What is React and why should you learn it?
Mastering React is one of the most sought-after professional skills out there.
Gianina Skarlett, front-end engineer at Forethought Technologies, says these 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 for five or six years. You’re not competing with someone who has 20 years of experience with React, so I think this point is really valuable.
Because it is so popular, there are many resources to learn React. Everything from YouTube videos to paid online courses and official React documentation can be a solid starting point for your training.
What are the steps to start learning to react?
Before you start with React …
Resources and references to get started
Learn 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 on it at the top of a page – commonly referred to as a hero – is an example of a component. You can have multiple pages on your site or app that include heroes, but all of them have different images and text. Understanding how to break up your application into components is important, and knowing how to write functional components using component composition, higher-order components, and other patterns is essential for writing good React code. You will also need to learn how props (short for “properties”) are used to provide data to components and change their appearance.
React can also provide interactivity. This “business logic” code is typically handled in React by means of hooks, which call code to be executed at certain times, to control the data that controls the application – called state – and countless other pieces of business logic.
“The way I (learned the hooks) was just the React documentation,” Skarlett explains. “These are trial and error, small projects, applications to be made. From there, it ends up clicking.
A third important element in learning React is understanding state, a data object that makes your application interface “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 clicked. You would use a hook to create a state for the current account and a function to increase the state of the account when the button is clicked.
The larger your application becomes, the more states your application needs to function. All of this state can get cumbersome, especially when many components need “knowledge” of some element of that state. An example is when user settings, dashboard, and other parts of an app need to know which user is logged in. that passing quickly becomes a mess.
Nowadays, many people are launching their own condition management systems using hooks, with good results. While there is 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” which are then updated and accessible from anywhere in the app – no need to go through the accessories.
Skarlett says the secret to big, clean apps is good health management, but don’t overdo it. “At some point… you have to understand your condition… Just because you have a condition doesn’t mean you need (Redux). Some states are used by a single component, and it really doesn’t need to be shared.
Being able to handle large amounts of state on a large application will quickly take you from a novice React developer to an intermediate developer.
Immerse yourself in advanced React learning
Once you have mastered the basics and some intermediate concepts in React, the advanced concepts you can learn are almost limitless. Just staying on top of best practices will help you keep learning every day.
In React, you will most often source your data from external sources called application programming interfaces – APIs – usually RESTful API. Learn how to get data from these sources using the native extraction library or advanced external libraries such as Axes will take your development to the next level.
GraphQL is another type of API and query method that returns more precise data. Using a library like Apollo to get and manipulate data in a GraphQL API can be useful in a variety of React-based projects.
For Karlsson, the most important thing an advanced React developer should understand is the phantom DOM. “Understanding the DOM … this is how the browser interfaces with the user interface … React has a representation of the front-end in memory so it can perform quick operations on it, but people write code that doesn’t take advantage of it, “he says.
React vs Angular vs Vue: what’s the difference?
React boasts a strong community and a large volume of third-party libraries to help you get up and running quickly. Seen offers a simpler approach to frameworks, allowing you to use as much or as little code as you want. Angular is generally more complex and less widely adopted, but is very reliable.
“The best tool for the job is the one you are most efficient with. This should solve the problems you are trying to solve, ”says Karlsson. “Most front-end frameworks do pretty much the same … I prefer React because that’s what I know.”
How to be successful in studying React
If you really want to learn React and prepare for a career as a React developer, here are a few things that can help you:
- Join online communities. There are many groups online for people who work hard to learn React. The community is largely positive and encouraging for new people.
- Use Twitter. It is packed with professional developers and is a constant flow of knowledge about the latest techniques in React development.
- Practice every week. Find a new idea to learn each week through a project. Create simple projects like to-do lists and counters, and work up to full-fledged web applications. Use free and public APIs like Open Movie Database or PokéAPI to build an app to display information from external sources.
- Find a mentor. Having someone to answer questions, give feedback on your code, and help you with difficult problems is invaluable. If you can’t find someone near you, search online for people who are ready to help.