Learning ReactJS, Part 1– Steps & Takeaways

This past March, I discovered my javascript skills felt out of date. I needed to catch up, so I learned Angular — took an online course, built a couple of minor projects, did some freelance work that used it. It felt good.

Now they tell me Angular is out, React is in.

Truthfully, I think the endless treadmill of languages and libraries is a bit ridiculous, and I believe strongly that developers (and especially developer managers!) ought to care more about what the project requires than what language, etc, is “in,” but I recognize the need to stay up to date in all one’s skills.

Therefore — off to battle with ReactJS, via CodeAcademy. Let’s see how it goes.

1. Compiled javascript? Hm. As a long-time ES5-er, I’m dubious already. I just barely tolerate ES2015 in pure Node. It just doesn’t exactly feel like javascript. But I guess there are a lot of advantages, such as better class usage, debugging, maintainability…well, we’ll see.

2. Ok, CodeAcademy is slow. Both in terms of the learning curve and in app connectivity. I hope they’re not powered by React. As long as I’m searching for a new course, I think I’ll let myself get sidetracked and read up on ES2015 to give myself some background.

It’s heady reading, but thorough, and useful, and interesting too, as long as you take the occasional break.

Likewise to get acquainted with ES2016 and ’17: https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla

3. To start learning the topics surrounding React, I’ve found this book: ReactJS Succinctly (free!)

Some takeaways from the book:

A focus on views: React focuses on a clean view, letting the developer ignore some of the nitty gritty of the data.

Components: Like many frameworks, React provides an easy way to create components (this holds true especially if pairing React with JDX).

– React is not amazingly readable. It’s an intentional sacrifice, to enable clean and reusable code.

Mixins: Not quite the same as in Ruby, but React can add in sections of functional code to reuse.

– React uses native browser javascript events, e.g. onClick. I guess you could pair this with jQuery?

– This book has a great practical example section where you can follow along to build a working game in React. I skipped this for now as I intend to follow up with some practical training courses.

4. Time to learn React for real. I’ll be starting off with this tutorial from TutorialsPoint, because it looks like a good balance of practical and informational.

Getting started takes a lot of work, but that’s expected for a framework like this. You’ll want Node, npm, babel, React, ReactDOM, and more. Once you get used to it or automate it, it’s no big deal.

“React recommends using inline styles.” This seems a suspicious departure from reasonable protocol, and I want to look into this later.

– This tutorial meanders, and is not the best for following in code, but it makes decently organized reading to firm concepts in your mind. We’ll back it up later with something a bit more interactive.

Much of this is redundant material, having read the book mentioned earlier — redundant in a good way, mostly. It’s a lot less content, so the important points get reaffirmed in your mind.

5. After all that, back at the CodeAcademy React course after all. It’s still slow, annoyingly so, but it’s pretty thorough, and probably worthwhile. The interactivity alone is worthwhile, and of the interactive courses I previewed, this is the most straightforward to dive into.

After all that, I at least understand many of the fundamentals fairly rigorously. Next up, CodeAcademy’s ReactJS Part II (sigh), and a personal coding project!

The learning never ends — and that’s wonderful.