Getting going with React can sometimes be overwhelming. Or, at least, this is what people are saying. The consensus seems to be that the difficulty in getting going is mostly due to the following realities or obstacles.
In this article, I’m going to prescribe a set of thoughtfully curated steps for learning React that I hope might bring some relief to these three difficulties.
That was the good news. The bad news is that productive learning paths, taught by someone other than you, are rarely free. Learning React from others will cost you some cash. If you follow the steps below it will cost you around $73.00 USD (or around $30.00 if you use 10 day trials). This amount will get you one month of access to several sites providing React learning materials (i.e. $29 a month for Pluralsight or 10 day free trial + $29 a month for Evented Mind + $15 a month for tutsplus.com or 10 day free trial).
When you reach step three you’ll need a good understanding of Node, npm, ES6 (including ECMAScript modules and either Webpack, systemJS or Browserify), and Babel. If you lack a basic understanding of each of these, I would suggest you brush up on the basics before moving to step three. If you spend the money on the learning resources I mentioned above, catching up shouldn’t be too difficult, given most of these resources also provide Node, npm, Webpack, SystemJS, ES6, and Babel screencasts.
Now, before you go complaining and crying fatigue realize these technologies are the minimal barrier to entry with most of the competing solutions (i.e. Angular 2, Ember, and Aurelia). If you think learning these extra parts isn’t worth your time, I’d like to suggest you back up from React and have a look at vue.js, riot.js, or mithril (i.e. download one(ish) script file, include it in HTML page, and go!). After all you might not need React, or need to learn it. And the last thing you want to do is use React when something simpler will suffice.
I’d like to plant some broad React ideas (in no particular order) into your head before you get dizzy and overwhelmed. This might all be gibberish right now but reading them will help you connect some dots in the future.
render()) to the virtual DOM which, in turn, updates the actual DOM with the fewest changes required. The idea is that implicit DOM interactions (i.e. jQuery DOM interactions) are avoided and given over to an abstracted DOM (i.e. the virutal DOM).
JSX goes from this:
To this (note the
createElement function replaces JSX):
While it’s possible to have dumb or stateless components, the focus of React is on building stateful components containing stateless child components relying on the top-most parent for state (i.e. data). Thus, React is more than the V in MVC. It is also the C in most cases. The top most component is often refereed to as a controller component because this is where the state is managed. Consider the explanation from the React docs:
A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via props. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way.
As you learn, return to these ideas to see if what I am saying becomes more meaningful.
This is the most important step that you’ll be tempted to skip. Don’t! Before going off and trying to understand what exactly React is, first you should strive to understand why it is.
Step 1.b – Read: Why did we build React?
Step 1.c – Watch: Pete Hunt: React: Rethinking best practices
This step will lay the foundational mental model for React. Read this material knowing that the next step will fill in the missing details.
Step 2.a – Read (but skip if too basic): React.js Introduction For People Who Know Just Enough jQuery To Get By
Step 2.b – Read: ReactJS For Stupid People
Step 2.c – Read: The React Quick Start Guide
Step 2.e – If you are feeling brave, read: Removing User Interface Complexity, or Why React is Awesome
It’s time to stretch those fingers and play around with some code. In this step, you should strive to gain the fundamental concepts through real code comprehension (i.e. learn to write React code and know what it is doing).
Step 3.a – Read: Learn Raw React — no JSX, no Flux, no ES6, no Webpack… then consider reading part two and part three as well.
Step 3.b – Watch: Getting Started With React.
Step 3.c – Watch: React.js: Getting Started. This is a bit outdated, but worth an hour of your time. Watch and digest the concepts discussed.
This is the step where you take all of your React knowledge and add in some additional players to make an actual application.
Step 4.a – Read: All the official mini guides starting from “Displaying Data”.
Step 4.b – Watch: Building a Wiki With React and Firebase
Step 4.c – Read: Flux For Stupid People
Step 4.d – Watch: Building Applications with React and Flux
Step 4.e – Watch: Build a Microblogging App With Flux and React
Step 4.f – Watch: Building a Real-time App with React, Flux, Webpack, and Firebase
A lot of people will skip forming a foundational amount of knowledge and just start build something for the sake of learning. I personally think this is a waste of time. After all, is it more efficient to sink, then learn not to drown or, learn to swim and then go swimming. If you followed the steps above, you’ve learned to swim and you should be ready to go and build something.
When building you need to be aware of the following resources:
If you are still in need of more and want to move from terse screencasts to more of a course, I have two recommendations.
React for Beginners (starting at $47)
Building Modern Web Apps (with React, Ampersand, ES6 and Webpack) (starting at $39 from Frontend Masters)
It’s my hope that by curating these steps, and by you following them to some degree, getting going with React will be easier. Good luck.