This article introduces you to ReactJS and some of the build tools mentioned above which will help you get started right away.
- NPM is a package manager which allows you to find, share and reuse code.
- Webpack is a module bundler. It takes in a bunch of assets like source code (js), CSS, images etc along with its dependencies and converts them into static assets which can be distributed to the client.
Ex — Webpack can be used to bundle or combine our source code along with dependencies like React-Bootstrap (fetched via NPM) into a single file called bundle.js (or any other name of your choice). This bundled file can then be given to the client for his use.
Follow the steps mentioned here to install node.js and npm on your machine.
Create a new directory for the project.
mkdir hello-react && cd hello-react
Run npm init inside hello-react to create a node package. When prompted, fill in the description, author and leave the other fields to default. Save the configuration. This will create package.json with contents as shown below.
Create a new file webpack.config.js and add the following. The comments in the config file explains how webpack is setup and what it does.
Run the following command to install the dependencies and save the list of dependent packages with their version locked in package.json. We need react and react-dom for our hello world application.
npm install react react-dom --save
Run the following command to install development dependencies and save the list of dependent development packages with their version locked in package.json. All the dependencies starting with babel are used to compile the code from ES6 to ES5. Webpack is used to build our application and webpac-dev-server is used to host the server (development only).
npm install babel-core babel-loader babel-preset-es2015 babel-
preset-react webpack webpack-dev-server --save-dev
Package.json file with dependencies
Dependencies installed with NPM and their versions are stored in the package.json file (if save flag is used). When ever you run npm install hereafter, it will install the dependencies with the version saved in the json file.
Create index.html as shown.
This is the file served by the web server. The script bundle.js is the file produced by webpack after bundling our source and the dependencies. React will render the contents inside <div id=”root”></div>
Create a source directory for our code.
All the source code will be stored inside this directory. Add index.jsx inside the directory
mkdir -p src/index.jsx
Add the following to index.jsx
This is how your directory will look like. Note — build directory will be created by webpack while building your app.
Build the source code
Run the following code from the root directory i.e hello-react to build the source code using webpack.
Deploy the code
We will use the webpack-dev-server (installed as dev dependency) to host the app on localhost:8080. Note — Use webpack-dev-server for development only.
Run the following command from root directory i.e hello-react
Open the browser and go to localhost:8080 to view the page.
You can try out the examples from the official ReactJS documentation by replacing/adding more code in src directory.