Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 832 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Set up React apps with zero configuration in two minutes

2:02 React lesson by

The React team has an official Command Line Interface (CLI) for building React projects called "Create React App"; in this lesson, we show how to use this tool to quickly set up new projects using the create-react-app {project-name} command. We then use the npm scripts that are provided: npm start to develop, npm run build to ship, and npm run eject to opt out of the abstracted tooling.

The benefits of this tool are:
- It's officially maintained by the React team; this means best practices out of the box
- Zero config, one dependency
- Config is abstracted so React team can make improvements under the hood and you get the new goodness for free
- Clean command line output for errors
- You can "eject" at any time if needed

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

The React team has an official Command Line Interface (CLI) for building React projects called "Create React App"; in this lesson, we show how to use this tool to quickly set up new projects using the create-react-app {project-name} command. We then use the npm scripts that are provided: npm start to develop, npm run build to ship, and npm run eject to opt out of the abstracted tooling.

The benefits of this tool are:
- It's officially maintained by the React team; this means best practices out of the box
- Zero config, one dependency
- Config is abstracted so React team can make improvements under the hood and you get the new goodness for free
- Clean command line output for errors
- You can "eject" at any time if needed

Avatar
Wenbo

What if, for an example, I want to use lodash in my project, so I will do npm install lodash --save. Then now if I run npm run build, will the lodash also be included in the production bundled file ?

In reply to egghead.io
Avatar
Trevor

Hi Wenbo,

When you run npm install {package} --save it installs the package into your project's "node_modules" folder but doesn't include any actual code in your project; to use a package, you need to "require" (or better yet, use ES2015 modules and "import") the package into the file you are using it in; Webpack will then bring that code into your output bundle. So, for example:

$ npm install lodash --save

package.json now has lodash in its dependencies object so you have access to the package in node_modules. You can now import and use it:

// someFile.js
import orderBy from 'lodash/orderBy';

// use orderBy however you want
...

If you'd like to learn more about npm modules and ES2015 imports, check out these Egghead lessons:
https://egghead.io/lessons/node-js-introduction-to-modules
https://egghead.io/lessons/ecmascript-6-es6-modules-es2015-import-and-export

In reply to Wenbo
Avatar
Gary

Something not related, may I know the theme you used for vim? It looks gorgeous! I really love it.

Avatar
Trevor

Hi Gary, thanks! I host all my settings on GitHub if you want to check it out: https://github.com/trevordmiller/settings. TD;DR Base 16 Ocean ;)

In reply to Gary

In our command line, let's run npm install -g, for global, create-react-app. Now, from any directory, we can create a new react project by saying create-react-app and then, giving it the project name. In this case, let's call it Cool App.

Let's change directories into this new folder that's been created. Let's open this folder in our code editor.

Inside the package .json, we see a single development dependency of react scripts, our normal react production dependencies and then, three default scripts that we can run.

Back in the command line, let's run npm start. This will start up a server and open up our app in our default browser.

Here's the default view that says Welcome to React. Inside the source folder is where our components are located.

Let's go into this app.js file. Let's scroll down a bit. We can see, here, this Welcome to React code. Let's change that to say Hello World. When we saved our file, we saw that the app recompiled, and the browser was also automatically reloaded to show our new Hello World text.

When we make errors -- for example, if I remove this closing tag and re-save the file -- the command line will give helpful output to show where the error occurred.

When we're ready to ship our app, we can use the npm run build script to generate a production-ready folder. Now, if we look at the contents of our directory, we see this new build folder.

If at any point we no longer want to use the official react scripts, we can use the npm run eject script. Keep in mind that this action is permanent.

After running the eject script, we can see that the contents of our project had been modified to include a config folder, and our package .json has also been significantly modified.

In summary, use create-react-app with your project name to create a new project. Then, inside of that project, you can run npm start to start a development server, npm run build to create a production build, and npm run eject to opt out of react scripts.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?