So you want to learn React.js?

Samer Buna
Nov 19, 2016 · 4 min read

First, make peace with the fact that you need to learn more than just React to work with React. This is a good thing, React is a library that does one thing really well, but it’s not the answer to everything.

However, identify whether what you’re currently learning is React or not, mainly so that you don’t get confused about your effort to learn React itself. A programmer who is comfortable with HTML and one other programming language will be able to pick 100% of React in 1 day or less. A beginner programmer should be good enough with React in a about a week. This is not counting the tools and other libraries that complete React like for example, Redux or Relay.

There is an important question about the order with which you need to learn things. This order would vary based on what skills you have. It goes without saying that you need a solid understanding of JavaScript itself first, and of course, HTML as well. I like to be specific about this here, so if you don’t know how to map or reduce an array, or if you don’t understand the concept of closures and callbacks, or if seeing “this” in JavaScript code confuses you, you’re not ready for React and you still have a lot to do in JavaScript land.

Refreshing your knowledge on JavaScript first would not hurt, specially because you need to learn ES2015, not because React depends on it (it does not), but because it’s a much better language, and most of the examples, courses, and tutorials you’ll find use the modern JavaScript syntax. Specifically, you need to learn the following:

  • The new features of the object literal and template strings
  • Block scopes and let/const vs var
  • Arrow functions
  • Destructuring and default/rest/spread.
  • Classes and inheritance (used slightly in defining component, but to be avoided otherwise)
  • Class field syntax to define methods with arrow functions
  • Promise objects and and how to use them with async/await.
  • Imports and exports of modules (most important of all)

You don’t have to start with ES2015, but you do need to eventually learn it (and not because you’re learning React).

So other than ES2015 stuff, you need to learn the following to be a productive React developer.

  • The APIs of React, ReactDOM, ReactDOMServer: These are not big APIs really, we’re talking about maybe 25 different things and you would rarely use them all. The official React documentation is actually a very good starting point (it has gotten a lot better recently), but if it still confuses you, watch an online course, read a book, or join a focused workshop. Your options are endless here, but be careful what you pick and make sure it has a focus on React itself and not its tools and ecosystem.
  • node and npm: the reason you need to learn those (for React), is because there are a ton of tools that are hosted at that would make your life easy. Also, since Node allows you to execute JavaScript on your servers, you can re-use your front-end React code on the server (Isomorphic/Universal applications). Mostly, what you’ll find valuable with node and npm is working with module bundlers like webpack. This is much more important when you’re writing a big application, but you will need at least one tool to work with JSX (ignore the advice that JSX is optional.) Learn JSX and use it. The recommended tool is Babel.js
  • React ecosystem libraries: Since React is just the UI language, you’ll need tools to complete the picture and go beyond even MVC. Don’t start here until you’re very comfortable with React itself. I’ll give you two things to focus on, just forget everything else you encounter and learn these two first once you’re done with React itself: react-router and redux.
  • Right after getting comfortable with the raw concepts of React itself, build a React Native app. You’ll only truly appreciate the beauty of React once you do that. Trust me.

During your learning process, the best thing you can possibly do is build stuff with your own hands. don’t copy paste examples, don’t follow instructions blindly, but rather, mirror the instructions to build something else (ideally, something you care more about). Whatever you do, just do not build a TODOs app.

I find building simple games to demonstrate the ideas of React much better than starting with data-driven serious web applications. That’s why in my Getting started with React.js course, I focus on building a simple game. I’ve also build a different game in my React.js Succinctly book which you can read for free. Try to implement other similar games in a JavaScript playground like that, it’s a good start, you don’t need a server, and you don’t need to manage a crazy state.

Recently, I’ve created an interactive learning tool with audio instructions for jsComplete. The first lab I tested the tool with was a React.js example. If you take the lab, please make sure to leave me your feedback.

Good luck and have fun! If you ask nicely, I’ll be happy to review your first React application and give you some pointers.

Thanks for reading.

jsComplete EdgeCoders

We write about the new and leading edge technologies with a focus on JavaScript

Samer Buna

Written by

Author for Pluralsight, O'Reilly, Manning, and LinkedIn Learning. Curator of

jsComplete EdgeCoders

We write about the new and leading edge technologies with a focus on JavaScript

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade