text: Starting a new React project isn’t that simple. Instead of diving straight into code and bringing your application to life, you have to spend time configuring the right build tools to set up a local development environment, unit testing, and a production build. Luckily, help is at hand in the form of Create React App.
  Create-React-App is a command-line tool from Facebook that allows you to generate a new React project and use a pre-configured webpack build for development. It has long since become an integral part of the React ecosystem that removes the need to maintain complex build pipelines in your project, letting you focus on the application itself.
  How Does Create React App Work?
  Create React App is a standalone tool that can be run using either npm or Yarn.
  You can generate and run a new project using npm just with a couple of commands:
  npx create-react-app new-app cd new-app npm start
  If you prefer Yarn, you can do it like this:
  yarn create react-app new-app cd new app yarn start
  Create React App will set up the following project structure:
  new-app ├── .gitignore ├── node_modules ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── README.md ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ └── setupTests.js └── yarn.lock
  It will also add a
  react-scripts package to your project that will contain all of the configuration and build scripts. In other words, your project depends on
  react-scripts, not on
  create-react-app itself. Once the installation is complete, you can fire up the dev server and start working on your project.
  Basic Features
  Local Development Server
  The first thing you’ll need is a local development environment. Running
  npm start will fire up a webpack development server with a watcher that will automatically reload the application once you change something. Starting from v4, Create React App supports React’s fast refresh as an alternative to Hot Module Replacement. Like its predecessor, this allows us to quickly refresh parts of the application after making changes in the codebase, but has some new features as well. Fast Reload will try to reload only the modified part of the application, preserve the state of functional components and hooks, and automatically reload the application after correcting a syntax error.
  You can also serve your application over HTTPS, by setting the
  HTTPS variable to
  true before running the server.
  The application will be generated with many features built in.
  ES6 and ES7
  The application comes with its own Babel preset — babel-preset-react-app — to support a set of ES6 and ES7 features. Some of the supported features are:
  - Async/await
  - Object Rest/Spread Properties
  - Dynamic import()
  - Class Fields and Static Properties
  Note that Create React App does not provide any polyfills for runtime features, so if you need any of these, you need to include them yourself.
  Asset Import
  You can import CSS files, images, or fonts from your JavaScript modules that allow you to bundle files used in your application. Once the application is built, Create React App will copy these files into the build folder. Here’s an example of importing an image:
  import image from './image.png'; console.log(image); // image will contain the public URL of the image
  You can also use this feature in CSS:
  .image background-image: url(./image.png);
  Styling
  As mentioned in the previous section, Create React App allows you to add styles by just importing the required CSS files. When building the application, all of the CSS files will be concatenated into a single bundle and added to the build folder.
  Create React App also supports CSS modules. By convention, files named as
  *.module.css are treated as CSS modules. This technique allows us to avoid conflicts of CSS selectors, since Create React App will create unique class selectors in the resulting CSS files.
  Alternatively, if you prefer to use CSS preprocessors, you can import Sass
  .scss files. However, you’ll need to install the
  node-sass package separately.
  Additionally, Create React App provides a way to add CSS Resets by adding
  @import-normalize; anywhere in your CSS files. Styles also undergo post-processing, which minifies them, adds vendor prefixes using Autoprefixer, and polyfills unsupported features, such as the
  all property, custom properties, and media query ranges.
  Running Unit Tests
  Executing
  npm test will run tests using Jest and start a watcher to re-run them whenever you change something:
  PASS src/App.test.js ✓ renders learn react link (19 ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 0.995 s.
  Jest is a test runner also developed by Facebook as an alternative to Mocha or Karma. It runs the tests in a Node environment instead of a real browser, but provides some of the browser-specific globals using jsdom.
  Jest also comes integrated with your version control system and by default will only run tests on files changed since your last commit. For more on this, refer to “How to Test React Components Using Jest”.
  ESLint
  During development, your code will also be run through ESLint, a static code analyzer that will help you spot errors during development.
  Create React App: Get React Projects Ready Fast
  on SitePoint.