How to Learn React

React has taken the world of front end web development by storm. Companies like Amazon, Facebook, and Netflix all use React to some degree, and for good reason: React is a powerful framework that is intuitive to use.

Learning React is easier if you know where to start and where to go to learn the language. That is why we have written this guide. We want to help you get started on your React learning journey and find the resources you need to thrive. In this guide, you’ll find a range of resources and information about how React can help you in your career.

What is React?

React is a front end web development framework built with JavaScript. React was built by Facebook and released in May 2013. The React framework is based upon components, which are small pieces of code that can be bundled together to create a web page. Components introduce a logical architecture to a website and make creating front ends easier for developers.

The React language uses the principle “learn once, write anywhere.” This benefit speaks to how React can be used with your existing web code, like HTML and CSS, without any interference. You can even use React with the framework React Native to turn your React website into a fully-functional mobile application.

Jobs that Require React Skills

React skills are most commonly used in front end web development. React is a front end web development framework. With that in mind, you may also encounter React in full stack and backend web development. But React will not be used on every engineering team because every business and project has its own tech stack.

Full stack developers operate on both the front end and the backend, so they are likely to use React if the project on which they are working uses React. Backend web developers will not spend much time on the front end but it is useful to have a good understanding of front end technologies anyway. If a backend web developer is building the backend for an app powered by React, they may find themselves occasionally looking at the front end React code.

What Companies Use React?

Although React is only seven years old, many prominent companies are using the technology. The companies that use React range from social networks and streaming sites to online shopping websites.

Here are a few companies that use React:

• Coursera
• Robinhood
• Slack
• LinkedIn
• The New York Times
• Tinder
• Instagram
• Facebook
• Amazon

The above companies are only some of the top businesses that use React; plenty more businesses use it in some way. If you end up pursuing a career in front end web development, you will easily find companies that need your React skills. 

Salary for React Developers

Most companies employ React developers under the title “front end developer.” According to Glassdoor, the average salary for a front end developer is $76,929 per year. Not all of the positions taken into account to calculate that salary will require React as a skill, however.

It is possible to earn much higher salaries as you refine your web development skills. Senior front end developers earn an average of $103,344 per year according to Glassdoor, which is significantly more than the salary for regular front end developers.

What Skills Do I Need to Master React

You will need a good understanding of HTML, CSS, and JavaScript in order to learn React. This means you should feel comfortable writing web pages using all of these languages. React is a framework built with JavaScript and, on a day-to-day basis, you will use React, HTML, CSS, and JavaScript. You should not start learning about React until you feel comfortable with JavaScript.

A good understanding of the web and how web applications are built in professional environments is useful, too. However, you can pick this knowledge up as you learn React.

Where to Learn React

There are many courses and books online to learn React. Some courses cost money whereas others are free. To get you started using React, we have compiled a list of some top React courses that you may want to consider.

React Tutorial for Beginners [React js]

• Author: Programming with Mosh (YouTube channel)
• Price: Free
• Type of resource: Video

In this video, which lasts almost two and a half hours, you will learn how to build a web application using React. This video starts with the basics: what React is and how you can set up your first application. You will then gradually move on to learn all of the main features of React, from writing components and rendering lists to using props and state.

The author of this course teaches from his code editor and browser. This means you can easily follow along. You can always pause the video at any time if you need to read over the code the instructor is discussing. Each section is marked so you can easily navigate to the place in the video you want to visit. 

React for Beginners

• Author: Wes Bos
• Price: Free (paid version available)
• Type of resource: Course

This course, which has been taken by over 33,000 people, is taught by a professional web development instructor. In this course, you will learn how to build a React application from scratch. It covers topics like components, using JSX, managing application state, deploying your website to a service like Netlify, and more.

This course is split up into several videos and contains about five hours of material. Its short length means you can reasonably pick up the basics of React within about a week, assuming you study for an hour or so a day.

React Fundamentals

• Author: James K. Nelson
• Price: Free
• Type of resource: Course

There are a lot of buzzwords commonly associated with React. If you are a beginner, you want to cut through the noise and focus on the basics. That is exactly what this course achieves. In this course, you will focus solely on working with React, not other frameworks used with React.

This course is designed to help you learn by writing your own code. There are interactive exercises for you to complete in your browser and two main projects that you will build.

The Beginner’s Guide to React

• Author: Kent C. Dodds
• Price: Free
• Type of resource: Course

Taught over 28 lessons, this course is a basic introduction to React. You will learn what React is, its fundamental tenets, and why professionals use it. The course features almost two and a half hours of material, split up into individual tutorials so you can easily navigate to the concepts you want to learn.

The Road to Learn React

• Author: Robin Wieruch
• Price: $49.00
• Type of resource: eBook

This book teaches what you need to know to use React effectively. You will start by learning the fundamentals of React and setting up your development environment. Later in the book, you will learn about testing and organizing your code and writing more advanced components.

This book is designed to take you from zero to proficiency. The book accomplishes this not only through written content but also interactive exercises and over 300 code snippets designed to illustrate key React concepts.

React Tutorials

There are many written React tutorials on the Internet that you can follow to learn more about coding in React. We have done some research and found a few in-depth React tutorials that you may be interested in looking at as you start learning React.

Official React Tutorial

The official React tutorial, which is on the main React website, is perfect for beginners. The tutorial walks you through how to build an interactive tic-tac-toe game with React. You will start by setting up your development environment and slowly learn about the topics necessary to build your application. By the end of this tutorial, you will have a solid understanding of the main building blocks of the React framework.

React Tutorial

This website is an interactive learning environment for newbies to React. This course discusses the basics of React through short lessons. You will use the skills you learn to build an online supermarket shopping app with an actual payment function. The tutorial comes with 67 free lessons, after which point you have to pay for a “pro” account.

MDN Understanding Client-side JavaScript Frameworks

The Mozilla Developer Network has written a few tutorials on how to use various JavaScript frameworks, including React. The first React tutorial walks you through how to get started with this framework. Subsequent tutorials discuss how to create a to-do list that meets certain accessibility requirements.

A Guide to Learning React

The best place to start learning React is to download the create-react-app application. This tool, built by Facebook, makes it easy to set up a server for a React website. The tool also creates a basic architecture for your website so you can start writing your React application immediately. But, after you have set up a project, where do you begin?

Here are a few topics you will need to learn about to become proficient with React:

• React architecture: You will need to know what a React app looks like and the main parts of a React application. Having this knowledge is essential before you move on to other features.
• Components: Components are one of the most important features of the React language. You should learn what components are, why they are used, and how to use a component in your application.
• Props: Props lets you pass data between components. You will need to know how to use props to share data between components and show that data in your application.
• State: The React state value keeps track of values that you set. You can also pass the value of the state between components. You should know how to add an item into the state, retrieve an item from the state, and manipulate the state.
• App lifecycle: React applications go through a lifecycle when they render. You need to learn the main parts of this lifecycle and the order in which each event in the lifecycle happens.
• Functional components: Functional components do not have a state. You should learn how to use functional components and how they compare to regular components.
• Constructors: Constructors let you initialize values in your React application. You should learn how to use constructors to set initial values in React’s state.
• Working with lists: Lists use a concept called keys to identify individual items in the list. You should learn how to write lists in React using keys.

These concepts will give you a solid footing in React. There is a lot more to learn but learning about the above topics will get you started. These are the main features of React which you can expect to encounter in almost every React application you build.

How Long Does it Take to Learn React?

You can start writing code in your first React app within minutes if you use the create-react-app tool. But, you will need to study for at least a month to feel comfortable with the basics of React development. Expect to spend three to six months refining your React skills after that, which is essential if you want to become a professional React developer.

Should I Learn React?

React is a modern web development technology, widely used by development teams around the world. Over the last few years, React has proven that it is here to stay. Through continuous updates and great community support, the language has evolved and more learning resources have become available as people who know React have shared their knowledge.

React is a great skill to know if you want to be a front end web developer. Not every company uses React, but enough do that finding a company that needs an employee with React skills is no problem at all. Companies in industries like news media, social media, and the sharing economy all use React.

Spend some time thinking about whether React is worth learning. Try out React for yourself and see if you like the syntax. If you think React will fit in with your career plan or personal interests, go ahead and start learning it.