What Is React and Why Learn It?
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.
What Are the Steps to Get Started Learning React?
Before You Get Started with React…
Resources and References to Get Started
Learning JSX, State and React Hooks
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.
Dive Into Advanced React Learning
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.
React vs. Angular vs. Vue: What’s the Difference?
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.”
How to Succeed in the Study of React
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:
- Join online communities. There are numerous groups online for people working hard to learn React. The community is largely positive and encouraging to new folks.
- Use Twitter. It’s full of professional developers and is a constant stream of knowledge on the latest techniques for React development.
- Practice every week. Find a new idea to learn each week by way of a project. Build simple projects like to-do lists and counters, and work up to full-fledged web applications. Use free and public APIs such as the Open Movie Database or PokéAPI to build an application to show information sourced from external sources.
- Find a mentor. Having someone to answer questions, give feedback on your code and help you through hard problems is invaluable. If you can’t find anyone near you, look online for people willing to lend a hand.