Getting started with create-react-app

Setting up a react app has always been a little complex. I've joked about it on this blog and twitter. The react team knows this is a pain point for the community and have been awesome enough to provide us with create-react-app.

Create-react-app differs slightly from most boilerplate react projects. It uses just a single dependency to keep initial configuration as simple as possible.

Let's go over the steps to get started on a react app using this great new tool.

First install create-react-app as a global library.

npm install -g create-react-app

Now to create an app use create-react-app <app-name>. I'll call the app for this blog post 'react-app'. So my command looks like. create-react-app react-app

Now you'll have to wait a few minutes as npm downloads all the dependencies. Once npm has done it's magic, all you need to do to start the app is:

cd react-app
npm start

Provided you followed all these steps you should now see your app.

The app created is rather simple. It hides the setup details really well. Here is App.js, index.js and package.json.

You might be worried that create-react-app locks you into its configuration. Since all the details are hidden how can you edit things like webpack configuration?

Luckily you can 'eject' your app at anytime. Eject is a one way trip, once you have done so you can't go back. Let's eject this demo app and see what happens. To eject just do this.

npm run eject

Now you have complete control over all the configuration. You can see how much framework create-react-app provides.

There you have it a quick primer on create-react-app. It is a great way to get started on your first react app.