Scaffolding a React project with Create React App
React is an open-source library that simplifies building user interfaces. However, getting started on a new project—and making sure that project is fast and accessible—requires more than just writing components. The guides in this learning path focus specifically on the React ecosystem tools and APIs you can use to optimize performance and usability for real-world applications.
This series does not aim to teach you the fundamentals of React or how the library works under the hood, although those topics are covered when relevant. Instead, it targets developers who already know the basics of React and want to focus on building high-performance sites. Most of the techniques you will encounter relate to code splitting, list virtualization, precaching, pre-rendering, and web app manifests.
Why optimize from the start?
A great deal of content already exists on building fast and reliable applications in general, but relatively little of it addresses React specifically. These guides fill that gap by discussing only the libraries, APIs, and features that apply directly to React apps. You will not find generic advice here—only practical recommendations for the React ecosystem.
Bootstrapping with Create React App
Create React App (CRA) is the simplest path to a working React setup. It comes with a build pipeline that includes webpack as the module bundler and Babel as the transpiler, plus a baseline Jest configuration for testing. To create a project, you only need to run a single command from your shell:
npx create-react-app app-name
Once the scaffolding finishes, navigate into the generated folder and start the development server:
cd new-app npm start
A newly bootstrapped CRA app keeps its directory structure deliberately clean. It only includes the files you are likely to modify while working on your application. The underlying webpack and Babel configuration files, along with the Jest setup, are intentionally hidden from you for simplicity. It is possible to eject from CRA to make those configuration files part of your project's source code, but doing so is discouraged because it makes those files harder to manage and maintain.
Next steps in the learning path
Once your CRA application is up and running, you can start improving its performance and accessibility with the following guides:
