React is an open-source library that makes building UIs easier. This learning path will cover different APIs and tools within the ecosystem that you should consider using to improve the performance and usability of your application.
This guide will show you how to get up and running with a React application. Every other guide in this section will cover topics to optimize the speed or accessibility of a React app.
Why is this useful?
There's a lot of content that explains how to build fast and reliable applications, but not many that show how to build fast and reliable React applications. These guides cover all this from the perspective of a React app where only libraries, APIs, and features specific to the React ecosystem are mentioned.
What will you learn?
The tutorials in this learning path do not focus on:
- How to use React
- How React works under the hood
Although both of these concepts will be touched on when needed, all the guides and codelabs in this section will instead focus on how to build fast and accessible React sites. For this reason, a basic knowledge of React is required.
Create React App
Create React App (CRA) is the easiest way to get started building React applications. It provides a default setup with a number of core features baked in, including a build system containing a module bundler (webpack) and a transpiler (Babel).
On a command-line shell, you only need to run the following to create a new application:
npx create-react-app app-name
npx is a package runner that is installed automatically with
npm 5.2.0 or
later. It simplifies quite a few processes involved with managing
packages—including running CLI commands like
having to install them globally on your machine.
Take a look at Introducing npx: an npm package runner if you would like to learn more.
Once the command finishes executing, you can navigate to and run the application with the following commands:
The following embed shows the directory structure and the actual web page of a newly bootstrapped CRA application.
Although CRA makes it simple to get started building a React application, there are many different ways to begin building sites with React. The "Popular Alternatives" in the README covers different use-cases and options.
There are multiple configuration files and build scripts that CRA uses to set up a webpack and Babel build process that includes a base Jest setup for testing. To make things simpler for the user, these files are hidden and cannot be accessed until you eject from CRA. It is always best to avoid ejecting whenever possible, since this means taking on all of these configuration files as your own source code, which can become difficult to manage.
The directory structure of a new CRA application only contains the files that you would actually need to modify in order to work on your application. The CRA documentation explains this in detail.
Now that you know how to get started building a Create React App, learn how to improve your app's performance and accessibility with all the guides in this learning path:
- Code splitting with React.lazy and Suspense
- Virtualize large lists with react-window
- Precaching in Create React App with Workbox
- Pre-render routes with react-snap
- Add a web app manifest with Create React App
- Accessibility auditing with react-axe and eslint-plugin-jsx-a11y