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.
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, read my book Pure React.