Set up React apps with zero configuration in two minutes

Trevor Miller
InstructorTrevor Miller

Share this video with your friends

Send Tweet
Published 7 years ago
Updated 4 years ago

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

[00:00] 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.

[00:18] Let's change directories into this new folder that's been created. Let's open this folder in our code editor.

[00:24] 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.

[00:34] 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.

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

[00:47] 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.

[01:05] 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.

[01:14] 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.

[01:27] 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.

[01:36] 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.

[01:46] 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.

Gary
Gary
~ 7 years ago

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

Trevor Miller
Trevor Millerinstructor
~ 7 years ago

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 ;)

Ryan
Ryan
~ 6 years ago

It would be nice to a video build on this and talk about customizing the generated application's setup to include things like CSS modules, other Babel plugins, etc.