React is the most popular JavaScript-based library right now, and the primary choice for beginner front-end developers looking to get into the field. Its popularity is partly due to its efficient and speedy design, but also due to the fact that you can use it to build mobile apps (React Native) and even desktop applications.

As someone who is self-taught, I know what it’s like to learn new technologies without direction or guidance. Looking back, I see my mistakes and distractions that delayed my progress. In this article, I will try to suggest the most optimal pathway for learning React.

Prerequisites for React

There are certain technologies you need to understand before you start tackling React. The library is based on JavaScript, so obviously, the knowledge of JS is a must. But there are few other technologies you need to learn.

Let’s start with two fundamental languages that any web developer should know.

HTML

HTML elements are fundamental building blocks of any web application. You need a markup language like HTML to define structure and layout for the page. Coincidentally, templating language for React called JSX looks very similar to HTML. Most of the time, you will be using HTML elements to structure components in React.

With that being said, I believe that perfecting HTML comes down to practice and real world experience. So you don’t need to dwell on this technology until you master it. Instead, get a really good grip on HTML fundamentals and once you start to work and write code, you will understand the rest.

Learn most important elements, tags, and attributes in HTML. You will learn the rest by doing.

CSS

In general, CSS is a very confusing and difficult language to learn. Still, you can start with a strong foundation of basics and once again, expand on it as you gain web development experience in the real world.

I recommend that every web developer should know element, class, and ID selectors. Also understand document flow, box model, flexbox, and CSS grid.

It’s important to realize that even experienced developers use Google to learn about CSS properties. The key is to have general idea of how to approach a certain problem. You can figure out the details – CSS properties and their possible values – by searching it online.

JavaScript

React is a JavaScript-based library, so without a doubt you need a solid JavaScript knowledge to build React apps.

There are a lot of resources for learning JavaScript online. I highly recommend you find a course that was released in the last 5 years. Newer JavaScript features are integral to building apps in React. Instead of using var, how to use let and const keywords to declare variables. Template literals are extremely important for writing dynamic strings in React.

Understanding functions is extremely important. Components in React are functions after all. You also need knowledge of functions to write event handlers and general helper functions for doing calculations. Knowledge of map() and filter() methods are also very necessary to do things like render multiple components in React.

Other newer features like object destructuring, spread and rest operators can bring simplicity to the code.

Knowledge of JavaScript functions will also help you deal with event handlers in React. For example, create an onClick function with a parameter in React.

Git

Git is an absolute necessity for building apps in React. All companies and development agencies use some type of version controls to successfully manage web development process.

Version control is not directly related to React or even web development. It’s still fairly easy and someone dedicated can learn Git in just few days. There are plenty of great video tutorials on Git. They also teach you how to upload your repositories to GitHub.

Foundations of React

Once you know all the prerequisites, it’s time to dip your toe into React. Before learning how to implement a certain feature, I recommend that developers should understand foundations of React, such as: components and their reusability, state and props, event handlers and JSX.

Since you’re already familiar with HTML, understanding JSX should not be too difficult for you. It’s an HTML-like language that allows you to declaratively invoke components and build a component tree to achieve the desired layout. JSX code is ultimately compiled into calls to React API. You can make these calls yourself, but the code becomes unreadable and difficult to follow. For this reason, almost all developers use JSX to structure and style applications in React.

Next, it will serve you well to understand the concept of components, and why their reusability is so important in React. Both types of components (class and function) have their own quirks and slightly different syntax. It may be worthwhile to understand both, but your company is probably going to use either one, not both. Still, understanding both types of components will help you see what’s happening in code snippets you find online.

State is also a foundational concept in React. It is tightly coupled to reactive and interactive features in React. It is integral to the concept of controlled inputs and implementing dynamic features that respond to users’ actions. State object is not a normal object in React, so it’s useful to learn how to approach it and get the best of state in React. State is also useful to implement dynamic rendering in response to user events. For example, render a component on click of a button in React.

Finally, props play an integral role as well. As previously mentioned, React web applications are essentially trees of components. Child components can have their own children, and so on. Props is the primary way for components to communicate with one another. React is fairly opinionated about props and has a strict guidelines for developers. For example, props can only be passed down from parents to children, not the other way round. A solid knowledge of props is necessary, even if larger web applications use Context API instead.

Useful React libraries

Knowing how to build basic components is great for learning and practice. If you’re building an MVP, or want fast development process, there are a lot of libraries with ready-to-use components. React community creates these useful custom components, which you can import and use in your own app. This can save you a lot of time.