Starting a new React project now days is not as simple as we’d like it to be. Instead of instantly diving into the 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. But there are projects where all you need is a simple set up to get things running quickly and with minimal efforts.
Create-react-app provides just that. It’s a CLI tool from Facebook which allows you to generate a new React project and use a pre-configured Webpack build for development. Using it, you will never have to look at the Webpack config again.
How does create-react-app work?
Create-react-app is a standalone tool which should be installed globally via npm, and called each time you need to create a new project.
npm install -g create-react-app
To create a new project, run:
Create-react-app will set up the following project structure:
. ├── .gitignore ├── README.md ├── package.json ├── node_modules ├── public │ ├── favicon.ico │ └── index.html └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js └── logo.svg
It will also add a
react-scripts package to your project which will contain all of the configuration and build scripts. In other words, your project depends
react-scripts, not on
create-react-app itself. Once the installation is complete, you can start working on your project.
Starting a 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 which will automatically reload the application once you change something. Hot reloading, however, is only supported for styles.
The application will be generated with a number of 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. It even supports some of the newer features like async/await, and import/export statements. However, certain features, like decorators, have been intentionally left out.
Continue reading %Getting React Projects Ready Fast with Pre-configured Builds%