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.
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:
- 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.
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);
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
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 Ran all test suites. Watch Usage › Press f to run only failed tests. › Press o to only run tests related to changed files. › Press q to quit watch mode. › Press p to filter by a filename regex pattern. › Press t to filter by a test name regex pattern. › Press Enter to trigger a test run.
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”.
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