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.

[Code block]

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

[Code block]

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:

[Code block]

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

[Image: app-1.png]

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

[Image: atom.png]

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.

[Code block]

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

[Image: atom_eject.png]

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

Read the original post with all embeds and interactive content at https://rants.broonix.ca/getting-started-with-create-react-app-2/