Click here to Skip to main content
14,921,361 members
Articles / All Topics
Technical Blog
Posted 23 Jul 2016

Tagged as

Stats

3.9K views
1 bookmarked

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

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
23 Jul 2016CPOL1 min read
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

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

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Dave Ceddia
United States United States
Dave is a Software Engineer in the Boston area and writes about AngularJS and other JavaScript things over at daveceddia.com

Comments and Discussions

 
-- There are no messages in this forum --