By Joe Morgan
In this series, you will build out examples of React projects to gain an understanding of this framework, giving you the knowledge you need to pursue front-end web development or start out on your way to full stack development.
In React, state refers to a structure that keeps track of how data changes over time in your application. Managing state is a crucial skill in React because it allows you to make interactive web applications. In this tutorial, you’ll run through an example of managing state on class-based components. This tutorial will first show you how to set state using a static value and then how to set a state as the current state, using a product page component as an example.
In this tutorial, you’ll share state across multiple components using React context. React context is an interface for sharing information with other components without explicitly passing the data as props. This means that you can share information between a parent component and a deeply nested child component, or store site-wide data in a single place and access them anywhere in the application. To illustrate this, this tutorial will create a website where users can build custom salads.
In this tutorial, you’ll use the useEffect and useState React Hooks to fetch and display information in a sample application, using JSON server as a local API for testing purposes. You’ll load information when a component first mounts and save customer inputs with an API. You’ll also refresh data when a user makes a change and learn how to ignore API requests when a component unmounts.
In React, routers help create and navigate between the different URLs that make up your web application. React Router is designed with intuitive components to let you build a declarative routing system for your application. In this tutorial, you’ll install and configure React Router, build a set of routes, and connect to them using the <Link> component. You’ll also use React Hooks to access data and other routing information and create nested routes.
In your React application, you can use authentication to manage which users have access to which pages. In this tutorial, you’ll create a React application using a token-based authentication system. You’ll create a mock API that will return a user token, build a login page that will fetch the token, and check for authentication without rerouting a user. As you build the application, you’ll explore different methods for storing tokens, including using localStorage and sessionStorage.
In React applications, performance problems often originate from component re-rendering. Because of this, learning how to prevent unneeded re-renders can help to optimize the performance of your React app. In this tutorial, you’ll look at how different actions can trigger re-renders and how you can use Hooks and memoization to minimize expensive data calculations. By the end of this tutorial, you’ll be familiar with many performance enhancing Hooks, such as the useMemo and useCallback Hook.
In this tutorial, you’ll deploy a React application from your local machine to an Ubuntu 20.04 server running Nginx. You’ll build an application using Create React App, use an Nginx config file to determine where to deploy files, and securely copy the build directory and its contents to the server. By the end of this tutorial, you’ll be able to build and deploy a React application.
DigitalOcean’s App Platform is a Platform as a Service (PaaS) product that lets you configure and deploy applications from a source repository. This can be a quick and efficient way to deploy your React applications, and if you are using React to build a site with no backend, you can use App Platform’s free tier. In this tutorial, you will create a React app with Create React App, push it to GitHub, then deploy it to App Platform for a quick continuous deployment option.
This book is an introduction to React that works from the foundations upward. Each chapter takes you a little deeper into the React ecosystem, building on your previous knowledge. Along the way, you’ll learn how to maintain internal state, pass information between parts of an application, and explore different options for styling your application.