How to (and how NOT to) learn REACT?

DanielOctober 1, 2021October 3, 2021

I recently had a few conversations with some readers of JS Craft about what would be a good approach for them to start learning React. But before that, before getting to the master plan of learning React, let's do a bit of reverse psychology:

How NOT to learn React

A very underrated productivity tool is the not to do list. You will often hear about things "to do", but very few will tell you about how important it is to also have a "not to do list"

So, the not to do list of getting started with React:

1. Start to learn all of following at once: Webpack, Redux, NextJs, Mobx, React, ES6, React Router, LESS, Node, React Fiber, Lodash, and the Context API. Also don't forget about NPM, Flux, GraphQl, Relay, Axios, Styled Components, Reducers, Babel, Yarn, SASS, Flexbox and Fetch. Go for all the acronyms and technologies! They shall not overwhelm you :)!

2. Watch screencasts series as if they were Netflix. Just go into the surface and never repeat a screencast; hey, you already saw it once, what's the propose of rewatching it; you already know how it ends

3. Just read as much as you can and do not code at all! Learning programming is not a practical thing with clear results.

4. Stay away from CSS. It's bad, unproductive and not useful at all for React and frontend development in general. You are a developer and CSS is just for designers.

5. Do not make it fun! While learning, do not make cool & fun React projects like real-life examples or games. React is Work! Work should not be fun! Work is serious stuff and it should be treated likewise.

6. Never try to branch out from a tutorial. Strictly follow the steps from it and never try to make something that it's not included in that tutorial. Do not experiment!

7. Never try to make a clone of a real-life app like Trello or Whatups. Apps like these never contain commonly used patterns like authentification, popups or form validation.

8. Never ever read or use somebody else's code from places like Github. Always reinvent the wheel!

How to learn React

Setting the joke aside I’ve started with React the hard way: I've read in a chaotic "order", experimented a lot, sometimes spent weeks without much progress while other times I could have had a few a-ha moments in a single evening. My learning was pretty much self-guided, with no one to show me a simpler, or a faster way.

Maybe the biggest problem when you start learning React is all of the "things" from the React Ecosystem. All the libraries, acronyms and the flashy words. So let's make a basic fundamentals roadmap to get you started:

-> STEP 1: Javascript & basic ES6

Beside geting an intro to ES6, also, invest a few hours into NPM and Javascript Modules. Later on, knowing some basic ES6, will allow you to separate what is particular to React and what is ES6.

-> STEP 2: Learn Basic React

Start to read about and play with React. Don't overcomplicate the project's setup phase. Ditch Webpack for now and use create-reat-app (we have a short tutorial about it here) or the super nice codesandbox.

Be sure to get a good grip on fundamental things like components, properties, setState, user events, the component lifecycle and working with forms.

For now, just ignore things like Redux, React Router or Webpack.

Also if you don't like a tutorial/book /screencast series just drop it. Find something that resonates with your style of learning.

-> STEP 3: Build small projects

Things like a register form, a tic-tac-toe game, shopping cart, a Rock Paper Scissors game, multi-step forms, edit cancel inputs. Take a tutorial and add new functionality to its examples.

Here, to get you started, this is how you build a very basic calculator app in React:

Now try to add new operations like multiply and divide, validation, errors and so on.

-> STEP 4: Fetching HTTP data

Axios is a great tool working with HTTP request in React. While you are at it read a bit about ES6 promises and async-await.

The following steps can be tackled in any order you prefer:

-> STEP 5: React Router

Learn about React Router. Be sure to get the basic routing, URL prams, authentification & protecting routes and navigation events.

-> STEP 6: State management - Redux or Mobx

Even if simple state management can be done now via the React Context API (tutorials here and here) you will need to know how to manage the state of more complex apps with Redux or Mobx.

-> STEP 7: Learn CSS

If you already have a basic understanding of it, just skip this step. You don’t need to be a super expert in CSS, but a good understanding of CSS will add a lot of extra productivity to your skills.

-> STEP 8: NODE JS

If you don't have any experience, it may be also a very good idea to learn a bit about what happens on the backend with Node or any other simple Backend Language. Having a full-stack overview will help you a lot.

And by now you should have a decent overview & productivity level with React. Now you can move to the more fine-tuning stuff like:

• optimizing the build process with Webpack
• investing some time in reading about the Best Practices in React
• using GraphQl as an alternative to REST
• unit testing
• next and GatbyJs (this is what I've used to build the js-craft.io site)

Please keep in mind that all of these are based only on my personal experience, and maybe there are better ways to organize your React leaning process 🙂 But, this should be a decent enough plan to get you started.