react

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

By Dave Ceddia

Create React App

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”).

    $ npm install -g create-react-app

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

    $ create-react-app hello-awesomeness && cd hello-awesomeness

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:

favicon.ico
index.html
package.json
node_modules/
README.md
src/
   App.css
   App.js
   index.css
   index.js
   logo.svg

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

favicon.ico
index.html
package.json
node_modules/
src/
   index.js

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:

import React from 'react';
import ReactDOM from 'react-dom';

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

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

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

    $ npm start

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

Learning React can be a struggle — so many libraries and tools!
My advice? Ignore all of them :)
For a step-by-step approach, check out my Pure React workshop.

Pure React plant

Learn to think in React

  • 90+ screencast lessons
  • Full transcripts and closed captions
  • All the code from the lessons
  • Developer interviews
Start learning Pure React now

Dave Ceddia’s Pure React is a work of enormous clarity and depth. Hats off. I'm a React trainer in London and would thoroughly recommend this to all front end devs wanting to upskill or consolidate.

Alan Lavender
Alan Lavender
@lavenderlens