Now, this isn't another article that tries to stop you from learning and using React and other related libraries and frameworks like VueJS. Rather it is an article that aims to help you understand what React is, when you need to learn it, and what you need to learn it.

So this article will help you learn and use React at the right time. I will also provide useful free courses/crash courses to help you learn React. Let's get started.

1. What is React
2. Why is React important
3. When to learn React
4. How to learn React
5. When to use React

What is React?

React is a popular JavaScript library that is used to build user interfaces and single-page applications.

With React, a collection of prewritten code snippets can be used and reused to perform common JavaScript functions.

That is, React allows us to create reusable UI components. These components are what make up our website.

An example of a reusable UI component is the tweet section on Twitter. See what I mean in the image below.

Twitter simply created a component for this section and used it for all tweets in the app. Twitter uses React for its web app.

But you may ask if React is for building single-page then how the hell does Twitter have several pages?

Well, there are maintained supporting packages and libraries that make building complex applications with multiple pages like Twitter with React possible.

While some people still use supporting packages, others have ported to using React frameworks like Next and Remix for building simple and complex applications.

Another framework to learn on top of React you may say. But trust me they are pretty easy to learn. But we won't talk more about them because it is beyond the scope of this article.

Why is React important - What role does it play in web development?

React has played a very vital role in creating interactive web applications in these past few years, and it still is very vital today.

If you are an aspiring front-end developer or full-stack web developer who wants to work for a company, or simply create web apps as a freelancer or a startup, then you need React.

Web applications are different from websites. You don't need React to make a website (static website).

Web apps are dynamic websites that look and feel like desktop or mobile applications. With web apps, you can register an account, make posts, and do things that you'd usually do in an application.

Without React making a dynamic website will not just be tedious for the developer but also difficult to use. Because for each page transition the browser will have to reload. But that isn't so with React.

When do I learn React?

React as you know is a JavaScript library, and as with many other libraries and frameworks, they require a proper understanding of the language itself.

It's no use trying to learn a tool that makes using another tool easier when you have no (or low) clue of how the primary tool works.

React and other JavaScript libraries and frameworks all make use of JavaScript in it (a lot). So it is expedient for you to know vanilla JavaScript to a great extent before learning any JavaScript library/framework.

Understand this, React is not a special thing to learn. It's not like a mini-language that you have to learn to build cool web apps.

Learning React is not a matter of learning a new syntax or something, it's a matter of understanding how React has decided to work with JavaScript. And so you're like "Ok React, this is how you like it, I will play by your rule".

So that means React uses JavaScript's syntax in all ramifications, and a little bit of HTML (JSX). That is why when you know JavaScript enough, you wouldn't find it difficult to move to other libraries and frameworks.

So these libraries and frameworks are not replacing the JavaScript syntax, you're not going to find

if condition:
  // statement(s)
else:
  // statement(s)

replacing JavaScript's if and else in a library. For example in React, we would popularly use

const [state, setState] = useState('initial');

If you have never worked with destructuring arrays in JavaScript, you'd think this is some kind of React's syntax; you may think "here we have the state and setState in an array together and assigned to the useState function, ok this is React". You'd have no clue what this is.

This may sound funny if you are familiar with array destructuring, but some developers are in this situation. And trust me if this is you, it's not a good place to be. But luckily there is a solution - learn enough JavaScript.

So to what extent should you learn JavaScript before learning React?

I think you should learn everything your course/book outlines (I will outline some). Here is a way to learn JavaScript in such a situation - forget about React and other libraries/frameworks.

Don't learn JavaScript because you wanna learn React - don't have such an attitude toward learning. Learn JavaScript because you want to be a web developer who makes cool web apps. Because the truth is React may not always be here.

React may be gone in 5 years or even less. You never can tell. But when you learn enough JavaScript you can easily switch to any JavaScript library/framework you want.

So when you're done with your JavaScript course, that's still not the right time to jump into React. Instead try to master the JavaScript syntax you've learned with exercises, projects, and even websites (lots of them).

To do this, you can google out projects for beginners, Brad Traversy has a great repository of 20 vanilla web JavaScript projects - try building all of them on your own.

When all this is done, I believe you're 100% ready to learn React. Now am not sure which JavaScript course you'll take or may have taken, but to learn React you need to know these topics (explicitly including the basics)

• Data Types - string, number, booleans, arrays, objects, undefined, null.
• Arithmetic operators and arithmetic operations, logical operators, ternary operators, expressions, variables (const and let), scopes
• Conditional statements - if and else, switch and case
• Loops - for, for in, for of, while, do/while
• Functions - arrow functions, closures, callbacks
• Classes and other ES6 features
• DOM
• JSON
• The global object
• Asynchronous JavaScript - setTimeout, setInterval

Basically everything. You can use the JavaScript outline provided by W3schools to compare with the course you're using to learn JavaScript. Just to make sure you get every box ticked.

How do I learn React?

Now let's take a look at how you can learn React with the resources that will be provided here. As mentioned before, React is not a special (or hard) thing to learn. This is the way I learn a new framework/library, and I recommend you try it too.

• Follow along with a tutorial
• Play around with the docs/take a course
• Build more projects
• Learn in public

Follow along with a tutorial

This is basically coding along with a React tutorial. You can find a React crash course on YouTube for free. You don't have to pay to learn React at all.

I'd recommend a crash course where there is a little bit of explanation on how React works, and then a project. I recommend this React crash course for 2021 by Traversy Media.

The crash course (this step) will help introduce you to React and how it works. It gives you a practical overview of what you'd be working with

Play around with the docs

React has a very good documentation for its library. The documentation gives you more insight into the library and shows you what more you can do with it.

React's documentation is designed to take you from basics to the advanced React step by step. Playing around with the docs simply means studying the docs and trying out some of the examples used.

You can study React's docs like the way you study a course (in college or something). The point is, React's documentation is straight to the point, so you studying it line by line or chapter by chapter is not a waste of time.

Studying the docs shouldn't take more than a week for an average person.

Alternatively, you can take a React course. There are some free React courses out there that can teach you everything you need to know to get started with React in-depth.

Just like the React docs, these courses provide an outline of things you would learn in React, so you go from topic to topic.

These are some of the free React courses:

1. W3Schools React Tutorial.
2. React 101 by CodeCademy.
3. React by FreeCodeCamp.

Build more projects

If you'd notice I said "more projects" rather than "a project". Now, this is because if you follow the first step you'd already built your first project in React, now you just need to build more.

After building more projects, I often recommend checking out some more tutorials on basic projects - you can search for more specific projects and find a tutorial on them.

This will always introduce you to a newer concept and perspective. But try not to end up doing too many tutorials (1 or 2 from different authors is fine), so you don't end up in "tutorial hell".

These steps will help you cover the basics and the more you build projects, and see them from a different perspective, the more you will become efficient in it.

Bonus - Learn in public

Now, this is something I wished I did when I got started with React. It is so important for every developer. Learning in public is like marketing yourself to a dev community. As such you may find companies interested in hiring you. Now it's not as easy or as fast as it sounds.

It would take time and consistency. But when you learn React in public, and post new projects you build you'll definitely get noticed by someone interested in you.

The same thing goes for those who want to freelance.

There are really great communities where you can learn in public, Tech Twitter is one of them. So get active on Twitter. I made a Twitter list of awesome developers you can follow to get started with Tech Twitter.

When do you need to use React

I have already said this before, but I'll just re-iterate.

React is not always needed. You should only use React when you are working on dynamic websites or as some developers may say "complex websites".

You can always use vanilla JavaScript for small projects, and static websites.

For example, if you're to build a business website for a client. The kind of website where you hard-code everything, where visitors come to see about the business like the contact info, and what the business is about. For example a law firm. Such websites don't require React. No matter the pages you're to create, it would be easier for you with vanilla JavaScript.

But if you're trying to build the next Twitter, DEV community, or personal blog (which is always updated) then you'd need the likes of React to easily build them.

Conclusion

React is a cool tool for web development, and as cool as it is, it's very easy to learn. Learning it at the right time puts you at a higher advantage.

To step up your web development career with React you can learn NextJS or Remix easily. You can follow the same steps I mentioned here for learning React to learn one of them. They are a lot easier to learn than React itself.

Thanks for reading. You can leave a comment below to let me know what you think about this article. If you like this article, please like and share. If you want to see more articles like this you can support me by buying me a coffee.

Yeah, and don't forget to hit me up on Twitter @elijahtrillionz. Happy hacking.