The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Set up React apps with zero configuration in two minutes

Set up React apps with zero configuration in two minutes

2:02
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
Watch this lesson now
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
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?