<p>Build amazing interactive user interfaces with React. We'll get to know React, then move on to the syntax, JSX, components, hooks, getting projects ready with Create React App, styling with CSS, working with data, error handling, deployment, and much more.</p>

Your First Week With React, 2nd Edition

Preface

React is a remarkable JavaScript library that’s taken the development community by storm. In a nutshell, it’s made it easier for developers to build interactive user interfaces for web, mobile and desktop platforms. Today, thousands of companies worldwide are using React, including big names such as Netflix and Airbnb.

Getting Started with React: A Beginner&rsquo;s Guide

Starting a new React project isn’t that simple. Instead of diving straight into code and bringing your application to life, you have to spend time configuring the right build tools to set up a local development environment, unit testing, and a production build. Luckily, help is at hand in the form of Create React App.

Create React App: Get React Projects Ready Fast

When React was first introduced, one of the features that caught most people’s attention (and drew the most criticism) was JSX. If you’re learning React, or have ever seen any code examples, you probably did a double-take at the syntax. What is this strange amalgamation of HTML and JavaScript? Is this even real code?

An Introduction to JSX

Hooks have been taking the React world by storm. In this tutorial, we’ll take a look at what hooks are and how you use them. I’ll introduce you to some common hooks that ship with React, as well as showing you how to write your own. By the time you’ve finished, you’ll be able to use hooks in your own React projects.

React Hooks: How to Get Started &amp; Build Your Own

Today’s user interfaces are becoming increasingly complex: updating data in one part of your application can often have a knock-on effect elsewhere. That’s why one of the keys to working effectively with React is understanding how to deal with data.

Working with Data in React: Properties & State

Almost every application needs to accept user input at some point, and this is usually achieved with the venerable HTML form and its collection of input controls. If you’ve recently started learning React, you’ve probably arrived at the point where you’re now thinking, “So how do I work with forms?”

Working with Forms in React

I’ve been working with a couple of developers in my office on React projects, who have varied levels of React experience. This tutorial arose from a question one of them asked about how best to style React components.

7 Ways to Style React Components Compared

When used purposefully and sparingly, web animations are much more than mere decorative add-ons. As Val Head explains:

How to Do Animation in React Apps

Having learned the basics of React, you’ll soon end up wanting to build an app that fetches some kind of data from an API. This guide will look at how to do data fetching in React, as well as providing a good user experience.

How to Fetch Data with React Hooks

As most developers will admit, it’s hard to create applications that are completely error free. Even with rigorous testing, almost all React apps rely on third-party modules, or external services that introduce the potential for things to go wrong. We can, however, do our best to handle potential errors gracefully, preventing the user from being faced with a cryptic error message or a blank screen.

How to Deal with Errors in a React App

In this guide, we’ll discuss how to use higher-order components to keep your React applications tidy, well-structured and easy to maintain. We’ll discuss how pure functions keep code clean and how these same principles can be applied to React components.

Higher-order Components: A React Application Design Pattern

The most popular way to handle shared application state in React is using a framework such as Redux. Quite recently, the React team introduced several new features which include React Hooks and the Context API . These two features effectively eliminated a lot of challenges that developers of large React projects have been facing. One of the biggest problems was “prop drilling”, which was common with nested components. The solution was to use a state management library like Redux. This, unfortunately, came with the expense of writing boilerplate code. But now it’s possible to replace Redux with React Hooks and the Context API.

How to Replace Redux with React Hooks and the Context API

In this guide, we’ll take a look at using Jest —a testing framework maintained by Facebook—to test our React components. We’ll look at how we can use Jest first on plain JavaScript functions, before looking at some of the features it provides out of the box specifically aimed at making testing React apps easier.

How to Test React Components Using Jest

If you’re fairly new to React development, you may have reached that point where you’ve built your first application (probably with Create React App) and want to get it up on the Web for others to use. You might be wondering how you’d go about deploying your app and what sort of services you could use to host it. In this guide, we’re going to take a look a how to take a completed React application and deploy it to the Web. We’ll look at the structure of an app and how it’s served up, and then see how to deploy it to several different services that have a free tier.

How to Deploy a React App

In this guide, I’ll discuss the approach I take when building and structuring large React applications. One of the best features of React is how it gets out of your way and is anything but descriptive when it comes to file structure. Therefore, you’ll find a lot of questions on Stack Overflow and similar sites asking how to structure applications. This is a very opinionated topic, and there’s no one right way. In this guide, I’ll talk you through the decisions I make when building React applications: picking tools, structuring files, and breaking components up into smaller pieces.

Community Questions