How to Start Learning React: A U.S. News Guide

After its introduction in 2013, it didn’t take long for React to become the dominant framework for JavaScript-based applications. Its intuitive, declarative markup for front end (known as JSX) and its strong community of support make React a stable platform that anyone can build on. Companies like Facebook, Instagram, Netflix and Airbnb trust React to build scalable, stable front ends for their applications.

By 2010, the internet was becoming more interactive. Web applications were popping up all over the place, thanks to the power of JavaScript and HTML5. Pretty soon, developers were pushing the envelope of how much of an application needed to be HTML augmented by JavaScript, as opposed to JavaScript by itself, without HTML.

Around this time, developers at Facebook created React. While it wasn’t the first JavaScript framework to come along, React’s unique approach to building components with JSX, using a shadow document object model and having the interface respond to changes in data, are still among its strongest points. A shadow DOM is like a copy of a webpage that the computer stores in memory so it can scan and modify it faster.

Proficiency with React is one of the most-sought job skills on the market.

Gianina Skarlett, a front-end engineer at Forethought Technologies, says those job prospects are a primary reason to look into React. “There are so many jobs for React developers,” Skarlett says. “React has only been in the industry … about five or six years. You’re not competing with someone who has 20 years’ experience with React, so I think that point is really valuable.”

Because it’s so popular, there are many resources for learning React. Everything from YouTube videos to paid online courses and the official React documentation can provide a solid starting point for your education.

Before digging too deep, it’s important to know that React is just JavaScript. Beginners often jump to React because it seems so simple compared with JavaScript, only to quickly find themselves stuck because they don’t understand JS fundamentals. Before learning any frameworks, it’s important to dive into the essentials of programming as a whole.

“If you’re learning web development, React is the technology you’ve probably heard of. But what I’ve seen personally from people jumping into it too quickly is they’re confused about where React starts and where JavaScript ends,” says Joe Karlsson, a developer advocate at MongoDB. “A lot of people think that things within React is what JavaScript is, and they’re surprised when it isn’t.”

Let’s look at some best steps to start learning React and the modern JavaScript ecosystem as a whole.

It can be tempting to jump right in with React before you grasp the basics of JavaScript. But there’s more to a framework than just a language, and you’ll need a few essential tools to get going.

The first thing you need to know is JavaScript. A solid foundation in the language and its conventions will help you tremendously as you start learning React. Everything from the package managers to configuration to the components and business logic in React are JavaScript, so knowing it well is the first step.

Karlsson says the next step is building something from scratch. “Try to build a simple web application … that doesn’t use any frameworks,” he says. “You want to have some basic functionality with JavaScript … before you jump in.”

Next, you’ll need to understand a bit about packages and package management, namely with NPM or Yarn. Both are JavaScript package managers that allow you to declare dependencies, or bits of code that help you achieve certain functionality without having to write it from scratch.

Resources and References to Get Started

Once you have your bearings with JavaScript and packages, you’re ready to start learning React.

First, dive into JSX and React components. Components are the building blocks of any React application. You can think of components as reusable pieces of code that may contain different content, or have slight visual differences, but are ultimately the same idea.

For example, a large header image with text over it at the top of a page – commonly called a hero – is an example of a component. You may have several pages on your site or application that include heroes, but all have different images and text. Understanding how to divide your application into components is important, and knowing how to write functional components using component composition, higher-order components and other patterns is essential to writing good React code. You’ll also need to learn how props – short for “properties” – are used to provide data to components and vary their appearance.

React can also provide interactivity. This “business logic” code is commonly handled in React by way of hooks, which call code to run at certain times, to control the data that controls the application – known as state – and countless other pieces of business logic.

“The way I (learned hooks) was just the React documentation,” Skarlett says. “It’s trial and error, small projects, to-do apps. From there, eventually it just clicks.”

A third important piece to learning React is understanding state, an object of data that causes the interface of your application to “react” in response to changes.

A good example is a counter. You have a large number on the screen. Next to it is a button that increases the number when you click it. You would use a hook to create a piece of state for the current count, and a function to increase the count state when the button is clicked.

The larger your application becomes, the more state your application needs to function. All of this state can become cumbersome, especially when many components need “knowledge” of a certain piece of that state. An example is when the user settings, dashboard and other parts of an app need to know which user is logged in. You could have that state live at the top of the application and then pass down from component to component through props, but all of that passing quickly becomes a mess.

These days, many people are rolling their own state management systems using hooks, with good results. While there’s nothing wrong with this approach, several other libraries exist for state management, such as Redux and MobX. These libraries allow you to create state “stores” that are then updated and accessed from anywhere in the app – no passing through props required.

Skarlett says the secret to large and clean applications is good state management – but don’t overdo it. “At some point … you need to understand your state … Just because you have some state doesn’t mean you need (Redux). Some state is used by just one component, and it really doesn’t need to be shared.”

Being able to manage large amounts of state across a large application will take you from a beginner React developer to an intermediate one quickly.

Once you’ve mastered the basics and some intermediate concepts within React, there’s almost no end to the advanced concepts you can learn. Just keeping on top of best practices will help you continue learning every day.

In React, you will most often source your data from external sources known as application programming interfaces – APIs – generally RESTful APIs. Learning how to get data from these sources using the native fetch library or advanced external libraries like Axios will take your development to the next level.

GraphQL is another type of API and querying method that returns more precise data. Using a library like Apollo to get and manipulate data in a GraphQL API can be useful across a variety of React-based projects.

To Karlsson, the most important thing an advanced React developer should understand is the shadow DOM. “Understanding the DOM … which is how the browser interfaces with the user interface … React has a representation of the front end in memory so it can make fast operations on it, but people write code that doesn’t take advantage of that,” he says.

If you’re still wondering what framework to start learning, you may be trying to choose between React, Angular and Vue. Personally, I recommend learning some of all of them. Each offers a JavaScript-first framework for creating user interfaces while having its own strengths and weaknesses.

React claims a strong community and large volume of third-party libraries to help you get up and running quickly. Vue boasts a simpler approach to frameworks, allowing you to use as much or as little code as you like. Angular is generally more complex, and less widely adopted, but is very reliable.

“The best tool for the job is the one you’re most efficient with. It should solve the problems you’re trying to solve,” Karlsson says. “Most front-end frameworks are doing about the same thing … I prefer React because it’s what I know.”

If you want to really learn React and prepare yourself for a career as a React developer, here are some things that can help you along: