Back

How To Learn React JS Quickly

April 28, 2022

1. Learn JavaScript first

Skipping JavaScript and jumping straight to React is not wise. I'd personally go as far to say it's not an option. You can't really learn React fast if you're not familiar with the language that the library is built for, especially ES6 concepts, because these concepts are needed to be effective in React.

I wrote a post listing 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.

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

So if you want to learn React quickly, then getting comfortable with JavaScript is how you'll achieve that.

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)

2. Declarative programming vs. imperative programming

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 are two almost opposite paradigms.

This one I didn't do when I was learning React. Because I didn't even know I was doing imperative stuff on my React projects for my portfolio, this bad practice made its way to my code. 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, and asked me what I think I did wrong. Since I remembered what the first interviewer said, I was able to answer this question correctly. The whole interview was more engaging because I was able to talk more about my code and point out what I could do 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

In any new library you've decided to use, never skip reading the documentation. If you're just learning how to code, this is what I recommend you to learn doing - reading and making sense of the documentation of anything 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 πŸ˜‰

  1. Code right away
  2. Fail
  3. Finally consult documentation

I used to skip reading documentation when I was a junior developer. I solely relied on Stack Overflow and tutorials. I was impatient and jumped straight ahead into coding after installing the libraries. 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 specifically], 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.

5. Build bigger projects

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. Understanding dynamic programming sets you up to learn React quickly. A concrete example plus an exercise is included in item no. 2.

Third, read the documentation. In item no. 3, I made my case for the reason why. Skipping this step sets you up to learning React ineffectively and you might even develop bad practices like me.

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!

Newsletter

Receive email updates on new blog posts.
Unsubscribe anytime. No spam.