How To Learn React JS Quickly

1. Learn JavaScript first

This is a no-brainer, but let's get it out of the way.

You can't really learn React fast if you're not familiar with the language that the library is built for.

I wrote a blog post that lists beginner exercises in React, and even those beginner exercises need JavaScript as a prerequisite. If you skip JavaScript and learn React straightaway, you'll actually make your learning time longer because you skipped the basics, or the pre-requisite.

Not to mention that if you skip JavaScript, you'll have a hard time knowing which part of your code is just JavaScript and which part is React. How will you debug when you come across errors and bugs?

So if you want to learn React quickly, then get comfortable with JavaScript.

But how much JavaScript do you need for React?

At the very least, you should know the most important ES5 and ES6 concepts (ES5 and ES6 is the first and second major revision to JavaScript):

the let and const keyword
arrow functions
template literals
default parameters
array and object destructuring
for-of operator
find method
ES5 array methods
ES5 JSON methods
ES5 Date methods
modules (import and export)
promises
async / await (not ES5 or ES6, but ECMAScript 2016)

Too much? I know. The good news is that you can start learning the basics of JavaScript right away. What's important is that you start with the basics, then fill in your knowledge gaps along the way.

2. Understand declarative vs. imperative programming

This is the part where I failed, so I'm including it here so you don't have to make the same mistakes.

React is a declarative library, while JavaScript is an imperative programming language. That means learning React after learning JavaScript requires a bit of a shift in thinking, because they're almost opposite paradigms.

When I was learning React some years ago, I didn't even know I was doing imperative stuff on my React projects for my portfolio. In one job interview, the interviewer himself pointed it out and told me how it's supposed to be done in React.

Bless his kind soul.

I didn't have time to correct my code, but I kept what he said in mind. In another interview at another company, the interviewer pointed out the same section in my code. He asked me what I think I did wrong. Because I remembered what the first interviewer said, I was able to answer this question correctly. The whole interview was more engaging because I could talk more about my code and how to improve it. I got hired and work there until now 😉

To give you an example of these two different programming paradigms, take a look at exercise #5 at 9 Beginner React JS Exercise Problems

3. Read the docs

For any new library you've decided to use, never skip reading the documentation. If you're just learning how to code, I recommend you also learn how to read and make sense of the documentation of whatever you're trying to learn.

At work, you'll be using a lot of libraries. You have to get comfortable learning how to use libraries by reading their documentation. You just have to 😉

Code right away
Fail
Finally consult documentation

When I was a junior developer, I solely relied on Stack Overflow and tutorials. I was impatient and jumped straight to coding after scanning their documentation. This led to bad practices and lots of workarounds to force the library to do what I want. If only I read the docs, I would have implemented the logic better, because I knew the library better. No work arounds, no hacks.

You'll learn exactly how to use the library in different use cases, its features, limitations, and the creators' recommendations on approaching different scenarios.

If you don't believe me, here's my story:

We had a new hire that had the same years of working experience as me, who just learned React recently. Her past experience was Angular, and at this time I already had 1-2 years of experience in React.

Until then, I put so much importance in learning on the job. I thought everything you have to know for the job, you'll eventually learn ALL of it on the job.

But one time, I got blown away with her solution because I didn't know you could do it like that. When I asked her how she knew [insert whatever she did here. Sorry, I no longer remember what it was], she said, "it’s in the docs".

While I was correct that you'll learn the ropes on the job, she learned more effectively because she read the documentation first, unlike me 🙂

I've been working with React for a while now, and yet I still learn new things about the library from time to time. And the first place I go to is the official documentation, because... lesson learned 😉

4. Start working on small, tiny projects

You know what they all say in the learn-to-code space - don't get stuck in tutorial hell. And the only way to get out of tutorial hell is to work on your own projects to apply what you've learned from those tutorials.

If you're having a hard time with your own projects, maybe they're too big. Start small, and then work your way up to more complicated projects.

I wrote a list of very basic React exercise problems just for this very reason.

After these exercises, you'd want to move on to a small project.

For example, check out this step-by-step React tutorial for the Card Memory game: https://fullstackvault.xyz/blog/react-js-sample-project-step-by-step.

That's what's typically meant with "small" or "beginner React project".

5. Build bigger projects

After gaining confidence with a small React project, it's time to move on to larger React projects.

If you're struggling with ideas, check out the tutorials and project ideas at https://fullstackvault.xyz.

Should you take courses?

Since I got pretty comfortable with JavaScript, I didn't need to pay for any courses to learn React. But I still took a crash course on YouTube, that is basically a long tutorial for a large React project. I would say it propelled my knowledge faster than if I did all my curriculum on my own.

Yes, the documentation is good for learning the concepts that come with the library. But after that, it's time to put theories into action and solidify what you've learned by making your own projects. That's what the crash course did for me.

If you're ready to work on big React projects after going through steps 1-4 above, I highly recommend tutorials or courses that cover medium to large-sized React projects that were released recently.

React is updated very frequently, so you want to avoid outdated and obsolete content. I made a curation of very good resources for React here: fullstackvault.xyz

TLDR? How to learn React js quickly

Learn JavaScript first! How much exactly? It’s listed in the first item.

Second, understand imperative vs. dynamic programming, because learning React after JavaScript requires a paradigm shift. A concrete example plus an exercise is included in item no. 2.

Third, read the documentation. In item no. 3, I wrote why skipping this step might set you up to learn React ineffectively. So avoid developing bad practices from the get-go by reading the docs.

Next, get out of tutorial hell by working on your own projects. Start small and then gradually move to bigger and more complex projects. A list of beginner exercises plus a repository of advanced projects are linked in items 4 and 5.

And finally, if you have any concerns or questions, I’m always happy to help 🙂 Just drop a comment below. Other than that, happy learning!