Learning React all over again

Over the past couple of months I’ve been learning React and thought I would make a short list of how I would approach learning React now if I had to do it over again. At the end of the article, I also briefly mention helpful tools to get you up and moving quickly.

Note: In this guide I assume you comfortable programming in JavaScript (ES5 or ES6) or have significant programming experience in another similar language. If that’s not the case, I would recommend learning ES6 (this book would be a good starting point) and then coming back.

1. Learn Flux

In response to internal problems using MVC design patterns, Facebook developed a new pattern called Flux. React was written as part of Facebook’s efforts to implement this new architecture pattern. Although React can be used within other design patterns, I have only used it as part of Flux and would recommend sticking to that pattern at least until you’re comfortable with React and can see the positives and negatives of the methodology.

At this point, just focus on being familiar with the how and why of Flux, which you should be able to get from Facebook Enginner Jing’s presentation as well as the architecture diagram below.

The motivation for and design of Flux
Flux Architecture Diagram

2. Become familiar with React and JSX

JSX is HTML-ish syntax with the full power of Javascript used inline by React to generate HTML code. I was skeptical when I first heard about it — “another unnecessary layer of complexity,” I thought. However, getting started with it was a breeze and after using it for a while, I can say it is a crucial ingredient to making React as powerful as it is.

Learning how React components are built takes practice and doing it well will take seeing how an experienced React developer goes about it and then doing it yourself. The goal here is just to become aware of the different parts of components and JSX syntax. For that, I recommend Facebook’s React tutorial. Very rarely does a project’s website provide the best introductory tutorial but the React team has proven an exception to the rule here.

Facebook React Getting Started Guide

3. Get comfortable with Redux

Any expert React developer might cringe to see Redux, a state management tool, mentioned so early in this list since it is usually learned after someone has a good understanding of React. I would tend to agree except these video tutorials by Dan Abrimov, the author of Redux are superb. I learned more about ES6, JSX and React from these tutorials than any other resource I could find. They are also a good introduction to the way React components should be constructed and used within an application.

Egghead Redux Course

Dan uses JSBin to teach the course and instead of worrying about typing them all out yourself while trying to watch the videos, Justin Wu has created a different JSBin for each video so you can reference it as you go along.

Of course there are times when Redux is overkill or unnecessary and Dan Abrimov agrees. This is his article explaining when you should use Redux, and when you shouldn’t.

Two Great Tools

Finally, two tools that I have come to love as I dived into React:

  1. Atom Editor
    An open source text editor with ES6 syntax highlighting, suggestions and project views.
  2. create-react-app 
    A command line tool to get you up and running fast without learning webpack, babel, or other tooling. Just run create-react-app and you’re up and ready to roll.

Thanks for reading!