Today, we're going to add a build process to store common build actions so we can easily develop and deploy our applications.
The React team noticed that there is a lot of configuration required (and the community helped bloat -- us included) to run a React app. Luckily, some smart folks in the React team/community got together and built/released an official generator app that makes it much easier to get up and running quickly.
The create-react-app project is released through Facebook helps us get up and running quickly with a React app on our system with no custom configuring required on our part.
The Node homepage has simple documentation on how to install node, if you don't already have it installed on your system.
node installed on our system, we can install the
npm install --global create-react-app
create-react-app installed globally, we'll be able to use the
create-react-app command anywhere in our terminal.
Let's create a new app we'll call 30days using the
create-react-app command we just installed. Open a Terminal window in a directory where you want to create your app.
In terminal, we can create a new React application using the command and adding a name to the app we want to create.
create-react-app 30days && cd 30days
Let's start our app in the browser. The
create-react-app package comes with a few built-in scripts it created for us (in the
package.json file). We can start editing our app using the built-in webserver using the
npm start command:
This command will open a window in Chrome to the default app it created for us running at the url: http://localhost:3000/.
Let's edit the newly created app. Looking at the directory structure it created, we'll see we have a basic node app running with a
public/index.html and a few files in the
src/ directory that comprise our running app.
Let's open up the
src/App.js file and we'll see we have a very basic component that should all look familiar. It has a simple render function which returns the result we see in the Chrome window.
index.html file has a single
<div /> node with the id of
#root, where the app itself will be mounted for us automatically (this is handled in the
src/index.js file). Anytime we want to add webfonts, style tags, etc. we can load them in the
We'll get to deployment in a few weeks, but for the time being know that the generator created a build command so we can create minified, optimize versions of our app that we can upload to a server.
We can build our app using the
npm run build command in the root of our project:
npm run build
With that, we now have a live-reloading single-page app (SPA) ready for development. Tomorrow, we'll use this new app we built diving into rendering multiple components at run-time.