React Setup, Part V: Conclusion

npm scripts

Great work! You’ve installed and configured Node, npm, React, ReactDOM, Babel, and Webpack. That’s all of the installation that you need!

To make these installed parts actually run, you will be using npm command-line scripts. You’ve already used some of these, such as npm init and npm install --save react.

You will find that as your applications become more complex, you will need to use more and more verbose command-line scripts. This can become a serious pain!

Fortunately, npm scripts are here to help.

Inside of your package.json file, find the scripts object. This object lets you give your command-line scripts easier names, and look them up whenever you forget them!

Let’s say that you need to use the script npm run build && npm run git-commit && npm run git-push. That’s way too much to remember. In package.json, you could add:

After that, you only need to type npm run deploy, and it will execute the command saved as deploy‘s value. And even better, you can look up the command in package.json if you forget.

In package.json, replace the scripts object with this:

npm run build will make webpack perform its transformations.

npm run start will start a local server! npm run start will also give you the ability to change your app and see the changes automatically, without having to restart the server for each new change.

Run a Local React App

Inside of your root directory, create a new directory named app. Create two new files inside of app: app/index.js and app/index.html.

In app/index.html, copy the following code:

In app/index.js, copy the following code:

Inside of the app folder, create a new folder named components. Create a new file inside of app/components named app/components/App.js.

In app/components/App.js, write a component class. This component class can render whatever you want. Don’t forget to require React at the top of the file, and to set module.exports equal to your component class at the bottom of the file.

In the terminal, type:

Check for a newly created build folder inside of your root directory. The build folder should contain new html and js files: build/index.html and build/transformed.js.

In the terminal, type:

Open a new browser tab and navigate to http://localhost:8080. See your React component shining gloriously in the sun.

In app/components/App.js, make a change to your component class’s render function. Refresh the browser tab and see your change appear on the screen!

The Condensed Version

That seems like an enormous amount of work to get a simple app up and running!

Perhaps it was, but that was in large part due to the fact that we slowly explained every step. Executing the steps by rote is much faster.

Here’s a condensed version of how to get a React app up and running:

In the terminal, create a new directory. cd into that directory.

Type the following command-line scripts:

• npm init
• npm i -S {react,react-dom}
• npm i -D babel-{core,loader} babel-preset-react
• npm i -D webpack webpack-dev-server html-webpack-plugin

In your root directory, create a file named .babelrc. Write this inside:

In your root directory, create another file named webpack.config.js. Write (or copy) this inside:

In package.json, replace the scripts object with this:

Create a directory inside of your root directory named app, and another directory inside of app named app/components.

Create three new files: app/index.js, app/index.html, and app/components/App.js.

Copy the code from “Run a Local React App” into app/index.js and app/index.html. Make app/components/App.js the outermost component class of your new app.

In the terminal, type these two commands:

Enjoy programming in React!