React Setup, Part V: Conclusion
Run a React Program on Your Local Computer
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!