How to Learn React in 2021: The 7 Skills You Need To Know

React is the most popular JavaScript library for building interactive user interfaces. It powers the front-end of many top tech companies including Facebook, Netflix, Airbnb, and more. Needless to say, learning React is a great way to boost your skills and hirability as a front-end developer.

But what‘s the best way to learn React? What core skills and concepts should you focus on? As an experienced full-stack developer who‘s worked extensively with React, I‘m here to break it all down for you.

By the end of this guide, you‘ll have a clear roadmap of the key abilities you need to develop to go from React newbie to pro. Let‘s jump in!

1. Master the Building Blocks: HTML, CSS & JavaScript

Before you dive into learning React, it‘s crucial that you first have a solid grasp of the three core web technologies:

• HTML for defining the structure and content of web pages
• CSS for styling the appearance of those pages
• JavaScript for adding interactivity and dynamic functionality

React builds upon these foundations, especially JavaScript, so having a good command of them is key. You don‘t need to be an expert, but you should be comfortable with:

• Semantic HTML elements and attributes
• CSS selectors, specificity, box model, and responsive design principles
• JavaScript data types, variables, functions, classes, DOM manipulation, and ES6+ features like arrow functions, destructuring, and template literals

If you can build a multi-page website with HTML/CSS and add interactivity with JavaScript, you‘re ready to start learning React. If not, spend some time brushing up on these essentials first.

2. Learn React Fundamentals and Hooks

With the prerequisites down, it‘s time to dig into React itself. While React is a JavaScript library, it introduces some unique concepts and syntax you‘ll need to wrap your head around, such as:

• JSX – An extension of JavaScript that allows you write HTML-like code for defining React elements and components.
• Components – The building blocks of React apps. Components are reusable pieces of code that encapsulate structure, style and behavior.
• Props – Short for "properties". A way for components to receive data from their parent components.
• State – An object that stores data that can change over time. Each component can maintain its own local state.

These are the core elements that underpin any React application. But in recent years, React has introduced additional APIs that change how you‘ll work with state and side effects:

• Hooks – Functions that "hook into" component state and lifecycle. The main ones to know are useState for managing state, useEffect for side effects, and useRef for referencing DOM elements.

Hooks were introduced in 2018 and have quickly become the recommended way to write React components. They make your code more reusable, readable and testable. Spend plenty of time practicing with hooks – they are now essential to modern React development.

3. Fetch Data from APIs

Most real-world React apps need to fetch data from an external API. This might be a REST API that returns JSON data, or a newer GraphQL API.

For REST APIs, you can use the native browser fetch function or an HTTP client library like Axios to make requests. For example, here‘s how you might fetch user data when a component mounts using the useEffect hook:

import { useEffect, useState } from ‘react‘;
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
useEffect(() => {
fetch(/api/users/${userId})
.then(res => res.json()) 
.then(data => setUser(data));
}, [userId]);
// render user profile UI
}

GraphQL is an alternative API design that aims to be more efficient and flexible than REST. With GraphQL, you make queries to fetch only the specific data your app needs. Popular GraphQL clients for React include Apollo and Relay.

Familiarize yourself with making HTTP requests from React components and working with the response data. This is a key part of building data-driven apps.

4. Style with Components or Utility Classes

Once you have your React components structuring your app‘s UI and fetching data, the next piece is styling. There are a few popular approaches to styling in React, including:

• Traditional CSS stylesheets or CSS-in-JS solutions
• Component libraries with prebuilt UI elements like buttons, forms, modals, etc.
• Utility-first CSS libraries that provide a wide range of composable classes

In the component library category, Material UI is a widely used and feature-rich option. It offers React components that implement Google‘s Material Design spec.

For utility-first CSS, Tailwind CSS has rapidly gained popularity. It provides a set of low-level classes you compose to build custom designs without writing much CSS yourself.

Both component libraries and Tailwind work well with React‘s component-based model. Pick one to start with and learn its API and best practices. This will allow you to quickly build good-looking apps without getting bogged down in writing tons of custom CSS.

5. Manage App State with React Context

As your React apps grow in size and complexity, you‘ll soon encounter challenges around sharing and syncing state across multiple components. This is where state management solutions come in.

For a long time, Redux was the go-to state management library for React. It provides a centralized store that holds your app‘s global state, with actions that update the store and triggers re-renders of affected components.

However, Redux has a reputation for being quite complex and requiring a lot of boilerplate code. In recent years, a simpler solution has emerged that‘s now baked into React core – the Context API.

React Context allows you to share data across your component tree without manually passing props down at each level. You create a context object with any value, and then any child component can access that value by using the useContext hook:

import { createContext, useContext } from ‘react‘;
const UserContext = createContext();
function ParentComponent() {
return (
<UserContext.Provider value={{ name: "John" }}>

<ChildComponent />
</UserContext.Provider>
);
}
function ChildComponent() {
const user = useContext(UserContext);
return <div>Name: {user.name}</div>
}

Combined with hooks like useReducer for more complex state updates, the Context API can handle state management needs for most apps. Spend time learning it well.

6. Handle Routing with react-router

Most React apps aren‘t single pages – they have multiple routes like home, about, contact, blog, etc. To handle navigating between these routes, you need a client-side routing solution.

The most popular router in the React ecosystem is react-router. Specifically, the react-router-dom package is used for web applications.

React Router provides a collection of navigational components that conditionally render based on the current URL path. The core ones to know are:

• <BrowserRouter> – Wraps your root component and syncs the UI with the browser URL
• <Route> – Renders a component when its path prop matches the current URL
• <Link> – Renders an anchor tag that navigates to the to prop‘s location on click

Here‘s a simple example of defining routes in a React component:

import { BrowserRouter, Route, Link } from ‘react-router-dom‘;
function App() {
return (
<BrowserRouter>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>

</nav>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
</BrowserRouter>
);

}


React Router also supports more advanced features like nested routes, route parameters, programmatic navigation, and code splitting. Familiarize yourself with these APIs to build multi-page React apps with smooth navigation between views.
7. Implement Authentication
Virtually every production app needs some form of authentication to allow users to sign up, log in, and access protected content. In the React world, there are a few different approaches to implementing auth.
If you‘re using a backend framework like Django, Rails or Laravel, it likely has built-in auth functionality you can leverage. Your React app would then just need to store the user‘s auth state and token, and conditionally show/hide pieces of the UI.
For a standalone React app, you can implement your own auth system by storing a JWT (JSON Web Token) in local storage or cookies after a user signs in, and attaching it to API requests to authenticate the user. Protected routes can check for this token and redirect if it doesn‘t exist.
Third-party auth providers like Auth0 and Firebase offer drop-in SDKs that handle most auth flows for you. The key is to centralize your auth logic and share the user‘s auth state globally via React Context or a state management library. 
Here‘s a simplified example of handling auth in a React component:

import { useContext } from ‘react‘; 
import { Route, Redirect } from ‘react-router-dom‘;
import { AuthContext } from ‘./AuthContext‘;
function PrivateRoute({ component: Component, ...rest }) {
const isAuthenticated = useContext(AuthContext);
return (
<Route {...rest} render={props => (
isAuthenticated ? (
<Component {...props} />
) : (
<Redirect to="/login" />

)
)} />
);
}


This PrivateRoute component checks the isAuthenticated value from React Context. If it‘s true, the wrapped component is rendered. If false, the user is redirected to the login page.
Take time to understand the various auth flows and learn how to sync auth state across both the React UI and APIs. It‘s a critical piece for full-stack applications.
Next Steps and Resources
We covered a lot of ground in this guide to learning React in 2021. By focusing on these core concepts and gradually incorporating them into your apps, you‘ll be well on your way to React mastery.
But don‘t stop there! Continue building your skills with more advanced topics like testing (unit, integration, E2E), performance optimization, animations, PWAs, and server-side rendering. The React ecosystem is vast and always evolving.
If you‘re looking for more guidance and hands-on practice, here are some of my favorite React learning resources:

Official React tutorial – A tic-tac-toe game tutorial covering the basics
Full Stack Open – A free online course teaching full-stack JS development with React, Redux, Node.js, MongoDB, and GraphQL
Epic React – A premium video course by Kent C. Dodds covering React fundamentals, hooks, performance, testing, and advanced patterns

I also highly recommend reading the official React documentation, following the React blog to stay up-to-date, and regularly building projects to cement your knowledge. With practice and persistence, you‘ll be shipping React apps like a pro in no time!
Feel free to let me know if you have any other questions – happy coding!


	
Related