How to Learn React & Redux - Resources and Guide

One of the most popular articles on Medium this year was Jose Aguinaga’s “How it feels to learn JavaScript in 2016.” All jokes aside, for someone new to web development, trying to learn React, Redux, and all the other frameworks/tools/modules like webpack, Babel, etc. was confusing and sometimes overwhelming.

I’ve always found “XXX in 3 months”-type articles useful where someone else has struggled to dig through a bunch of resources to summarize it down to a couple of helpful ones. So here’s my version of how to learn React and Redux after my own search for best guides.

How to Learn React and Redux

Step 1: Basics — JavaScript, Node.js

Before diving into React, if you are like me with most of the programming experience in Object-Oriented Languages (Java, Python) or data analysis (R, Matlab/Octave), functional programming is a huge paradigm shift. Maybe your focus is strictly on front-end development, but even a surface-level understanding of backend is probably useful for anyone working on web development.

Although there are tons of material out there for Node.js, I used the following resources to get up to speed:

1. The Node Beginner Book by Manuel Kiessling + programming exercises accompanying the book on Gomix.
2. Server-side Development with NodeJS by Jogesh Muppala on Coursera. I didn’t pay for the certification so I skipped the assignments, but the lectures were sufficient enough for a high-level overview.
3. Articles referenced on javascriptissexy by Richard: good resource to understand callbacks and closures.

Step 2: ES6, JSX, React

Once I had a grasp of basic rules of JavaScript, I dove straight into the official React documentation and googled my way to victory by modifying the classic to-do app example for my application. Although the documentation provided by Facebook is great and comprehensive, it doesn’t do a good job explaining other related topics like ES6, JSX, and other tools that some boilerplates provide like express, babel, browserify.

Once I deviated from the simple to-do app, it was hard for me to find documentation on these tools and see how they all fit in. Looking back, it would have been nice to get this all at once, and here are the resources that I found afterwards that I highly recommend to learn React:

1. Modern React with Redux by Stephen Grider on Udemy. Stephen does a great job walking you through not only React but ES6 & JSX syntax.
   Bonus: Use this code for 92% discount on the course!
2. I’ve heard great things about React.js Fundamentals by Tyler McGinnis. Since I had already completed the Udemy course, I didn’t get to try this out personally, but reviews are stellar for this one as well.

Step 3: Redux, Testing, Realistic Applications

Redux was a difficult concept for me to grasp. If you are coming from Flux, you probably won’t have as much trouble and can get all you need from the official Redux documentation. But for those who want a little more explanation with diagrams and realistic applications, here are some resources that I found after I struggled through hacking together solutions:

1. Once you finish the React portion of Stephen Grider’s class, finish the course and learn the Redux portion. You can also take his Advanced Redux course, which covers authentication and testing.
2. If you want to build an app from scratch without any boilerplate, here’s a long tutorial that covers Redux, React, and Immutable on Tero Parviainen’s blog that walks you through building a voting app.
3. I didn’t get around to finishing these, but here are other free resources available with good reviews: Robin Wieruch’s Soundcloud application & the free book and Wes Bos’s tutorial on his website.

That’s it for How to Learn React and Redux, I hope that helped!

• IoT Prototyping and Development
• Series