For anyone learning React, the official tutorial is the starting point.

You have gone through it; you now have a better idea of what React is all about.

You have no idea about where to go from here, though.

The internet is full of tutorials and blogs and whatnot on seemingly any topic relating to React.js.

But they also have a lot of fancy words you don’t understand: Redux, GraphQL, Flow, Webpack, Babel, MobX, react-this, and react-that, CSS-in-JS, ReasonML, containers and stateless components and shit. You feel lost. Your head is about to explode.

You see there are plenty of great React developers, but with so many things to learn and with so much information out there, you can’t imagine yourself being awesome at this React thing.

What’s their secret? (Is there even a secret?)

There will be some technical advice in the article. But that’s not enough.

The how of learning matters not less than the what. It doesn’t matter if you are learning the right thing if you are learning it the wrong way. The learning techniques are no secret; I’m going to list a couple of important ones.

Learn one thing at a time

Think about this: if you have to learn two new things, and understanding just one takes considerable effort, will it be any easier to learn both simultaneously?

Of course not. Case in point: you are going to be better at maths if you first learn to add numbers, and then build on that knowledge when you learn to multiply.

What if you had to learn a hundred things?

Does that thought make your heart panic?

If you try to focus on everything at once, you will actually focus on nothing. You will achieve nothing. Is that what you want?

But what if you could pretend you only have one thing on your plate and forget the other 99? It will be easier and more efficient.

You don’t even have to take my word (or experience) for it. It’s a fact. I’ll try to keep it short and sweet:

Our brains have something called working memory, and it has a limited capacity: it can contain only four pieces of information. Think of it as a computer that can only have four windows open at once.

When we are just learning something, we have all these new pieces of information in the working memory, each in a separate window. Each new concept, even they are somehow related, will occupy an entire window.

As soon as we understand the concepts as part of one larger unit of knowledge, rather than the distinct concepts, our brain will group them and place in one window, and free up the other windows. Not only that, the brain will now be able to store this unit in the filesystem (aka long-term memory.)

Trying to learn too much at once prevents us from learning anything. If we try to learn too much at once, though, our brain will run out of spare windows and will discard the older concepts, before we even had a chance of grouping the related concepts into one unit.

There is an absolutely fantastic course called Learning How To Learn which goes a lot deeper into why that is. I recommend it to anyone, both beginner developers and more expert developers. If you are busy to follow the course, there is a short textual summary which lists the most important takeaways.

You are going to lose the buzzword race

A LOT happens in the React world every day. There are a lot of libraries and approaches and (ir)relevant concepts.

It seems like an endless race to just keep up with everything.

Not everything is worthy of your attention. Many new ones come up every day, and many vanish just as quickly. There is a lot of churn, and you’ll be wasting your time if you tried to learn everything.

You physically can’t keep up with everything. But it’s okay; it’s liberating. If you stop trying to master every new piece, you will not feel like you are missing out.

That doesn’t mean you shouldn’t be interested. Have a brief idea of what’s happening in the React world to form a better “mental picture.” Join a React newsletter or two to stay in sync.

You don’t have to invest your time into every new thing. But you are free to play with some of these when you have a solid foundation beneath you.

Don’t feel pressured to try every single thing; it’s the race you can’t win.

Best practices are an improvement, not a starting point

Many beginners are obsessed with best practice right off the bat.

Best practices have their place — in improving the code and architecture to achieve thing X.

But it is suboptimal to overly-focus on best practices when you can’t implement thing X the dirty way. It distracts you from exploration and hinders your learning.

Experiment and try different approaches you can think of.

Only focus on best practice when you have a solid foundation beneath you.

Small projects help learning a big time (and you don’t need tutorials as much as you think)

The surest way to learn is to practice. Children don’t learn English by reading about English; children learn English by practicing English. But it’s not even about English.

Tutorials do have their place — they are great as a starting point. You should not rely on them for too long, though.

Mindlessly following tutorials will lead to the illusion of competence. You will feel like you know a lot, but faced with a simple problem, you would suddenly feel stuck and lost.

The best way to avoid the illusion of competence is to practice on your own, all the time. Come up with learning projects. Set up a small project for every concept you need to practice.

Things can look almost obvious when they are pre-chewed for you. In the real world, however, there will be no one to pre-chew everything for you.

By practicing, you solidify the knowledge in your head. You make it more “automatic.” You get better at it.

Don’t (only) read about React; practice React.

On the technical side

As discussed in the previous sections, you have best chances to learn something if you:

don’t try to cram many concepts all at once;

deliberately practice.

Now let me finally give you some more technical pointers.

Fundamentals

Learn to see in components.

Exercise 1: open any app or any website and look at it. What components do you see?

What are the relationships between components? Do you see how smaller components form bigger components?

Exercise 2: try to implement a couple of components.

While not directly related, seeing in components is in many ways similar to going from design files to HTML and CSS.

Feel how props are a central part of any component.

Props to components are like arguments to functions. They allow us to pass variable data into components.

https://facebook.github.io/react/docs/components-and-props.html

Exercise 1: do the “see in components” exercise once again, but this time, try to see if there are similar components which differ only in the text they show, or the image they render.

Exercise 2: try to implement a couple of components which take props.

Exercise 3: try to implement a complete portion of some app or web page. Don’t focus on CSS too much, but do think about components and their relationships thoroughly.

Feel how state and props interact and fit into React.

State and props are just as central to React as components are.

React applications of any size make use of both. You are not going to make it very far in learning React if props and state aren’t your second nature.

Dave Ceddia has an excellent article named A Visual Guide to State in React.

Practice by making a simple interactive application.

Know basic JavaScript

If you don’t know JS very well, you can interleave the above points with some JS practice.

In particular, it helps to know strings, arrays, objects, and functions; and the things you can do with them.

Functional JS concepts can come in handy as well.

The two most basic, yet useful functional concepts are:

filtering arrays const xs = [ 1 , 2 , 3 , 4 , 5 ]; xs . filter ( x => x >= 3 ); // => [3, 4, 5]

mapping arrays to other arrays const xs = [ 1 , 2 , 3 , 4 , 5 ]; xs . map ( x => x * 2 ); // [2, 4, 6, 8, 10]

Input and output arrays can be anything, not necessarily numbers. You can take an array of string todo items and map it into an array of li elements. The concepts and mechanics are still the same!

Learn to work with forms.

It’s a rare application if it has no forms. Many applications do, and being able to work with forms in React is crucial.

I have a series of blog posts about forms that I have arranged in the recommended order for you.

And what for the buzzwords?

There are many libraries and approaches out there; accept that you won’t be an expert in all of them.

Keep in mind that these are just solutions to some problems. And the best way to learn a specific library is to make something without it, feel the pain of NOT having that library, and then add it to solve that pain.

What follows is a quick rundown of some of the most popular libraries:

Don’t do Redux or MobX right from the start. These libraries solve a particular problem; you don’t need them until you find yourself having a lot of components just pass through many of their props.

Start with Create-React-App. You don’t have to be a Webpack Pro. And certainly not in the beginning.

Should you jump onto GraphQL? Nope. Not until you have put enough practice into connecting your React app with a regular REST API.

When do you need react-router? When you have more than a couple of pages in your app.

CSS-in-JS or CSS modules or?.. Start with the simplest thing to lower the cognitive burden. You can always play with CSS-in-JS after you have nailed the fundamentals.

Functional or class components? You can’t do without class components if you need some local state. For components that only need props, you can use either.

To recap:

Learn just one thing at a time.

Solidify your knowledge by practicing. Do small learning projects.

Don’t care for the best practices just yet.

You can keep up with the community by reading about new things. Don’t feel pressured into mastering every single library or concept.

See also