Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Set up React apps with zero configuration in two minutes

    Trevor MillerTrevor Miller

    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
    reactReact
    npmnpm
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss