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:
[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.
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 ;)
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.
Something not related, may I know the theme you used for vim? It looks gorgeous! I really love it.