Create React App: The Fast, Official, and Build-Free Way to Create React Projects

An exciting new development in the React world last week! Create React App is the official new tool from Facebook for generating a starter React project. It’s quick to install and try out, and gets you going without any complicated build setup.

Another awesome thing about Create React App is that it’s minimal. It doesn’t prescribe a set of dependencies on you, like many boilerplate projects do. When you’re ready for Redux, React Router, or whatever else, you can npm install it yourself and have complete control.

The tool is squarely aimed toward beginners to React who are so often overwhelmed by all the setup required just to get a basic build working.

Quick Start

Install the tool with npm and the -g flag (for “install globally”).

<code class="language-bash" data-lang="bash">$ npm install -g create-react-app</code>

This gives you the create-react-app command, which you then run to generate a project:

<code class="language-bash" data-lang="bash">$ create-react-app hello-awesomeness && cd hello-awesomeness</code>

Wait a little while as it installs a bunch of dependencies. You don’t have to set them up, but that doesn’t mean they don’t exist…

It generates a fairly minimal set of files:

<code class="language-bash" data-lang="bash">favicon.ico
index.html
package.json
node_modules/
README.md
src/
   App.css
   App.js
   index.css
   index.js
   logo.svg</code>

You can actually pare this down even further. The minimal set of required files is this:

<code class="language-bash" data-lang="bash">favicon.ico
index.html
package.json
node_modules/
src/
   index.js</code>

Though if you do delete those other files, you’ll want to replace the code in index.js with something of your own. Here’s a minimal example:

<code class="language-javascript" data-lang="javascript">import React from 'react';
import ReactDOM from 'react-dom';

let HelloAwesomeness = () => <span>Hello Awesomeness!</span>

ReactDOM.render(
  <HelloAwesomeness />,
  document.getElementById('root')
);</code>

All that’s left is to run it. From within the project directory, just run:

<code class="language-bash" data-lang="bash">$ npm start</code>

A browser pops appears. “Hello Awesomeness!” indeed.

Create React App: The Fast, Official, and Build-Free Way to Create React Projects was originally published by Dave Ceddia at Angularity on July 23, 2016.