Learn ReactJS Environment Setup

ReactJS requires a preprocessor for using features like ES6 and JSX. While you can use ReactJS without these features, it's considered best practice to use the latest JavaScript standards for building React components. For these reasons, ReactJS is often implemented with Node.js using babel and webpack.

Why use Node with React?

Node.js is a platform for running JavaScript applications. Through it's package manager npm, Node makes it easy to install dependencies for React. You can quickly build, test, and deploy ReactJS apps using Node.

Why use Babel with React?

ReactJS requires a preprocessor like babel to convert ES6/JSX code into the more widely accepted ES5 standard. Babel takes React code as input and produces a regular .js file as output. This .js file can then be directly referenced as a script in any HTML document.

Why use Webpack with React?

Webpack is a module bundler that simplifies the deployment process for ReactJS apps. Using Webpack, you can specify input and output locations for preprocessing. Webpack also includes a standalone server for easily running and testing ReactJS components.

It's important to remember that ReactJS is simply a UI library at the end of the day. While using things like Node and Webpack make working with ReactJS easier, you can technically run ReactJS directly in the browser without these configurations.

With that said, ReactJS is typically implemented with Node to leverage preprocessors like babel and other common dev tools.

ReactJS Environment Setup

The following steps demonstrate how to implement ReactJS using Node, Babel, and Webpack

Installing Node

You will need Node.js for installing dependencies and running your ReactJS code. For more information on installing Node, check out JavaScript ES6 Environment Setup.

Creating a new ReactJS project

Once Node is installed, you'll want to create a new directory for your ReactJS project. In your home directory, run:

$ mkdir hello-react
$ cd hello-react

This will create a new folder hello-react. Inside your newly created project, run:

$ npm init

After completing the prompts, a new package.json file will be created in the root of your hello-react project. This officially makes the hello-react folder a node project.

Installing React

Using npm, you can easily install the ReactJS dependencies:

$ npm install react --save
$ npm install react-dom --save

This will install the necessary ReactJS libraries you'll need for building React components.

Installing Babel

Using npm, you can easily install the babel dependencies:

$ npm install babel-core
$ npm install babel-loader
$ npm install babel-preset-react
$ npm install babel-preset-es2015

This installs everything you need to use babel with the project.

Installing Webpack

Using npm, you can easily install the Webpack dependencies:

$ npm install webpack --save
$ npm install webpack-dev-server --save

Configuring Webpack

Now that you have all the necessary dependencies installed, you must configure Webpack for transpiling your ReactJS code. Webpack configuration is managed via a webpack.config.js file.

Create a webpack.config.js file in the root directory of your project and give it the following contents:

var config = {
   entry: './main.js',

   output: {
      path:'/',
      filename: 'index.js',
   },

   devServer: {
      inline: true,
      port: 8080
   },

   module: {
      loaders: [
         {
            test: /.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',

            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}

module.exports = config;

The configuration specifies an input entry file main.js and an output file index.js. This means we will write all of our ReactJS code in a main.js file that will be converted to an index.js file that we can reference directly in the browser.

Also notice the configuration for the webpack devServer. The port 8080 is specified for running the webpack dev server locally.

Creating the HTML file

Create a index.html file in the root directory of your project with the following contents:

<!DOCTYPE html>
<html>

   <head>
      <title>Hello React</title>
   </head>

   <body>
      <div id = "app"></div>
      <script src = "index.js"></script>
   </body>

</html>

This is the main HTML file that your ReactJS app will run in. Notice the reference to index.js within the <body> tag. Remember this references the resulting output file from the babel transpiler.

Creating a ReactJS component

Create a App.jsx file in the root directory of your project. Give it the following contents:

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello React!
         </div>
      );
   }
}

export default App;

This creates a root App element for the ReactJS application. Notice how we import the React library and create a App class that extends the React.Component class. Within the render() function, we return the HTML to load for the component.

Creating the main.js file

Remember that Webpack is configured to take a main.js file as input and produce a browser friendly index.js file. You must create a main.js file in the root directory that includes all of the ReactJS components you write. This way Webpack can preprocess all the necessary components from a single entry point.

Create a main.js file in the root directory of your project with the following:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

You'll notice we import the App component along with the ReactDOM class. We then call ReactDOM.render() to effectively bootstrap the root App component to the DOM. Notice how we reference the HTML element via document.getElementById('app')) in the render function. This tells React where to run/display within the main index.html file.

Running the App

To start the webpack dev server, run the following from the root directory of your project:

$ node_modules/.bin/webpack-dev-server

This will start a Webpack dev server on the specified port, in this case localhost:8080. Remember that Webpack automatically preprocesses the React components before starting the server. This optimizes the development environment for React as you don't need to worry about manually transpiling your ReactJS components.

Alternatively, you can update the package.json file with a "start" script:

"scripts": {
  "test": "echo "Error: no test specified" && exit 1",
  "start": "webpack-dev-server"
},

Now you can start the dev server via:

Conclusion

It's important to remember that React is just a UI library. While using Node with Webpack and Babel is highly recommended, you don't need these tools to use React. With that said, implementing React with Node makes things much easier and is a common approach to developing ReactJS apps in the real world.

Your thoughts?