Quick Start with Create React App

Getting Started with Create React App

Create React App is a popular tool for building React applications. With just three dependencies, you get support for React, JSX, ES6, polyfills, a development server, auto-prefixed CSS, tests, service workers, and more. In this article, we’ll take a closer look at how to set up a React app with Create React App and configure some of its key features.

Prerequisites

To use Create React App, you’ll need to have Node.js version 6 or higher installed on your machine.

Creating a New App

To create a new app, run one of the following commands:

• npx create-react-app my-app
• npm init react-app my-app
• yarn create react-app my-app

These commands will create a new directory with the basic project structure and install hundreds of packages as dependencies.

Understanding react-scripts

The react-scripts package is the core of Create React App. It handles all the configuration and brings most of the dependencies of the project. Understanding react-scripts is key to understanding how Create React App works.

Upgrading Dependencies

One of the benefits of having few dependencies is that they are easy to upgrade or downgrade. You can use the npm install command with the --save and --save-exact flags to specify the exact version of a dependency.

Configuring Linting

ESLint is configured by default in Create React App. You can configure your code editor to report linting warnings by installing an ESLint plugin and adding a .eslintrc file to the project root.

Starting the Application

To run the application, execute npm start. This script starts a Webpack development server with hot reloading enabled.

Adding Images and Styles

You can add images and styles to your app by using the src folder and the module system, or by using the public folder as static assets.

Setting Environment Variables

Create React App allows you to set environment variables using the process.env object. You can also define custom environment variables that start with REACT_APP_.

Proxying Server Requests

You can proxy server requests by adding a proxy field to your package.json file.

Configuring a Progressive Web App

Create React App allows you to configure a progressive web app by registering a service worker and creating a web app manifest.

Testing the App

Create React App uses Jest as its test runner. You can write tests in files that end with .test.js or .specs.js.

Deploying the App

To deploy the app, you can create a production version by running npm run build. You can then copy the contents of the build directory to a web server.

Ejecting the App

If you need more control over the configuration of your app, you can eject it by running npm run eject. This will copy all the configuration files and dependencies to your project.

By following these steps, you can set up a React app with Create React App and configure its key features. Whether you’re building a small app or a complex enterprise application, Create React App is a great tool to have in your toolkit.