{
  "$type": "site.standard.document",
  "path": "/getting-started-with-create-react-app-2/",
  "publishedAt": "2016-08-13T13:36:24.000Z",
  "site": "at://did:plc:6gssgguzeecdttuw4gpdshg2/site.standard.publication/self",
  "tags": [
    "javascript",
    "react"
  ],
  "textContent": "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.\n\nCreate-react-app differs slightly from most boilerplate react projects. It uses just a single dependency to keep initial configuration as simple as possible.\n\nLet's go over the steps to get started on a react app using this great new tool.\n\nFirst install create-react-app as a global library.\n\n[Code block]\n\nNow 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.\n\n[Code block]\n\nNow 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:\n\n[Code block]\n\nProvided you followed all these steps you should now see your app.\n\n[Image: app-1.png]\n\nThe app created is rather simple. It hides the setup details really well. Here is App.js, index.js and package.json.\n\n[Image: atom.png]\n\nYou 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?\n\nLuckily 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.\n\n[Code block]\n\nNow you have complete control over all the configuration. You can see how much framework create-react-app provides.\n\n[Image: atom_eject.png]\n\nThere you have it a quick primer on create-react-app. It is a great way to get started on your first react app.\n\nRead the original post with all embeds and interactive content at https://rants.broonix.ca/getting-started-with-create-react-app-2/",
  "title": "Getting started with create-react-app"
}