Create React App Documentation

website·Indexed 42 days ago

Official documentation for Create React App, a tool for setting up React projects. Covers essential configuration including TypeScript integration, adding routers, managing environment variables, deployment to static servers, and performance measurement with Web Vitals. Includes guides on handling assets, code splitting, and integrating with API backends.

Tokens: 17.7K
Snippets: 121
Records: 162
Agent score: 74%

What's inside Create React App

Understand the Create React App package structure
Create React App is split into two distinct packages:
1. create-react-app: A global command-line utility used exclusively to bootstrap new projects.
2. react-scripts: A development dependency installed within each project that contains the build scripts and configuration.
https://create-react-app.dev/docs/updating-to-new-releases/
Understand Create React App deprecation and alternatives
Create React App has been deprecated. For modern React project setup and recommended options, developers should refer to the official React documentation at react.dev.
https://create-react-app.dev/
Understand default browser support in Create React App
By default, Create React App projects support all modern browsers. Support for older browsers, specifically Internet Explorer 9, 10, and 11, is not provided out-of-the-box and requires the manual addition of polyfills via react-app-polyfill.
https://create-react-app.dev/docs/supported-browsers-features/
Create a new React application
Create React App (CRA) allows you to start a single-page React application without manually configuring webpack or Babel. You must have Node >= 14 installed on your local development machine. Depending on your preferred package manager, use one of the following commands to initialize a project in a directory named my-app.
```
# Using npx (npm 5.2+)
npx create-react-app@latest my-app

# Using npm (npm 6+)
npm init react-app my-app

# Using Yarn (Yarn 0.25+)
yarn create react-app my-app
```
https://create-react-app.dev/docs/getting-started/
Write basic unit tests with Jest
Use it() or test() blocks to define individual tests. Use the global expect() function to make assertions. You can optionally group tests using describe() blocks.
```
import sum from './sum';

it('sums numbers', () => {
  expect(sum(1, 2)).toEqual(3);
  expect(sum(2, 2)).toEqual(4);
});
```
https://create-react-app.dev/docs/running-tests/
Install and set up React Router in Create React App
Create React App does not come with a built-in routing solution. React Router is the recommended library for handling client-side routing. After installation, you can implement routing by replacing the contents of src/App.js with your route definitions.
```
# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom
```
https://create-react-app.dev/docs/adding-a-router/
Install and integrate Bootstrap CSS in Create React App
To use Bootstrap in a React application, install the bootstrap package and import the CSS file at the beginning of the src/index.js file. This ensures that component-specific styles take precedence over default Bootstrap styles. For React-specific component wrappers, consider using libraries like React Bootstrap or reactstrap.
```
npm install bootstrap
# or
yarn add bootstrap
```
```
// src/index.js
import 'bootstrap/dist/css/bootstrap.css';
// Put any other imports below so that CSS from your
// components takes precedence over default styles.
```
https://create-react-app.dev/docs/adding-bootstrap/
Add TypeScript to an existing Create React App project
To migrate an existing project to TypeScript, install the necessary type definitions, rename files to .tsx (or .ts), and ensure a tsconfig.json exists in the root. After these steps, you must restart the development server. If tsconfig.json is missing, one will be automatically generated for you.
```
# Using npm
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

# Using yarn
yarn add typescript @types/node @types/react @types/react-dom @types/jest
```
https://create-react-app.dev/docs/adding-typescript/
Initialize Storybook in a React project
Storybook provides a development environment to browse component libraries, view different component states, and interactively test components in isolation from the main application. It can also be deployed as a static app for team review.
```
npx sb init
```
https://create-react-app.dev/docs/developing-components-in-isolation/
Deploy Create React App to Vercel
Vercel provides zero-configuration deployment for React projects via Git integration. Push your project to a Git repository and use the Vercel Import Flow to connect it. Subsequent pushes to the production branch (e.g., main or master) trigger production deployments, while other branches trigger preview deployments.
https://create-react-app.dev/docs/deployment/
Generate dynamic meta tags using server-side placeholders
Since Create React App does not support server-side rendering, dynamic <meta> tags (like Open Graph tags) can be implemented by adding placeholders in the index.html file. The server then reads the HTML file into memory and replaces these placeholders with actual values based on the current URL before serving the response. It is critical to sanitize and escape interpolated values to prevent XSS attacks.
```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta property="og:title" content="__OG_TITLE__" />
    <meta property="og:description" content="__OG_DESCRIPTION__" />
  </head>
</html>
```
https://create-react-app.dev/docs/title-and-meta-tags/
Deploy Create React App to Netlify
Netlify supports both manual and continuous delivery for React apps. To support client-side routing (pushState), create a public/_redirects file containing the rewrite rule /* /index.html 200. Create React App will automatically include this file in the build output.
```
# Manual deploy
npm install netlify-cli -g
netlify deploy
# When prompted, choose 'build' as the path to deploy
```
```
# public/_redirects
/*  /index.html  200
```
https://create-react-app.dev/docs/deployment/