Quick Tip: Kick-Start React Projects with Create-React-App

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 react-app

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 %Quick Tip: Kick-Start React Projects with Create-React-App%

by Pavels Jelisejevs via SitePoint