A simple React project setup for rapid application prototyping

6 min readAug 28, 2016

In my previous article I described my personal way to setup a generic JavaScript project.

Nowadays, my interest is focused in learning a cool framework named React which you may have heard about. I’m following a number of books and tutorials, but I reach a deep understanding of a new framework, language or technology by continuously try my code, modify, run to see what happens.

I decided to upgrade the previous project setup to provide an environment ready to write a small React web application.

I like simple things, so my boilerplate is bare compared to the amazing others available out there (see for example the Kriasoft’s react-starter-kit: it’s astonishing).

The main (and, yes, only) feature is auto-build and page reload. The boilerplate is fast to download, simple to use and understand.

Quick recap

Let’s quickly review our starting point.

See the repo here:
https://github.com/paooolino/modern-javascript-setup.
Please refer to the previous article if you need extra infos:
https://medium.com/@paooolino/a-modern-javascript-project-setup-b7842955d1d3

We should have NodeJS and Git installed in our system. This brings to us the power of npm and version control.

package.json

The package.json file is auto-generated when you launch

npm init -y

npm installs

We need the following packages:

npm install --save-dev babel-core babel-loader babel-preset-es2015

The npm installs do automatically update the package.json file with the required dependencies.

A note on jQuery

In the previous article, I provided an example using jQuery. I won’t install it for this tutorial, as generally jQuery is not used with React.

A note on Webpack

In the previous article, I included webpack as a dev-dependency. I’m not including it anymore, as I prefer install it globally (see below). Installing a package globally once, makes it available for all the projects.

build command

To be able to use the build command, we need to manually change the package.json file adding the following line in the “scripts” section:

// package.json...
"scripts": {
   "build": "webpack",
   ...

webpack configuration

This is simple as before: it just takes the files in the /src directory and produces a bundle in the /build directory. It uses the babel-loader to preprocess the included .js files:

// webpack.config.jsmodule.exports = {
  entry: './src/index.js',
  output: {
    path: './build',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{ 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: "babel-loader" 
    }]
  }
};

babel configuration

The .babelrc file contains a list of babel plugins to be used during transpiling. There is only the “es2015” preset, for now:

// .babelrc{
  "presets": ["es2015"]
}

git configuration

Don’t forget to exclude the node_modules folder and the compiled bundle from version control:

// .gitignorenode_modules
bundle.js

HTML skeleton

The build/index.html is the same:

<!-- index.html --><!doctype html>
<html>
  <head>
  </head>
  <body>
    <div id="rootElement"></div>
    
    <script src="bundle.js"></script>
  </body>
</html>

This is our starting point. Compared to the previous setup, we didn’t include the jQuery library (we won’t use it). The source code in /src will be rewritten to provide a simple example of how to write and include a simple React component. Let’s begin.

Adding React

React is the famous “Javascript library for building user interfaces”. I like it because it allows to think your application as a bunch of components, each one with its separated logic.

See the official React project pages here:
https://facebook.github.io/react/

Adding React to our project is simple:

npm install --save react react-dom

Note that React is needed to actually run the application, so it is saved in the “Dependencies” section of the package.json.

Using Jsx

Jsx is nothing more than “syntactic sugar”. It allows to write XML syntax inside your JavaScript code.

For more informations about Jsx, see
https://facebook.github.io/react/docs/jsx-in-depth.html

As you may suspect, browsers do not understand the Jsx syntax. This is where Babel, again, comes to help. We need to install the babel-preset-react that includes all the plugins needed to transpile .jsx into “ol’ plain JavaScript” (ES5):

npm install --save-dev babel-preset-react

Don’t forget to update the .babelrc configuration file:

// .babelrc{
  "presets": ["es2015", "react"]
}

Webpack and the dev server

The webpack-dev-server will help to save a lot of time.

After modifying the source code, generally the following happens:
- you launch the build (npm run build)
- wait an amount of time for the build process to complete
- switch to the browser window and refresh the browser (f5) to see the result.

With Webpack you can automate these tedious actions! The dev-server will continuously watch your source files; when it detects a change, it automatically launches the build and refreshes the browser for you. When you switch to the browser window, you will immediatly see the new code in action.

As noted before, I choose to install Webpack globally, so if you haven’t yet, install it now:

npm install -g webpack

I think it’s worth to global install the webpack-dev-server also:

npm install -g webpack-dev-server

Using it is really simple.

I created a “start” script in the package.json that starts the dev server:

// package.json...
"scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --inline --content-base build/",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

The “content-base” option tells webpack the root directory of the application to be served. In this case, we provide the relative path to the build directory, where the index.html and the bundle.js live.

The “inline” mode is referring to one of the two ways webpack has to automatically refresh the browser page. Without specifying “inline” the “iframe” mode is triggered, which means that the entire application page is embedded in an iframe.

For more informations about the webpack-dev-server, see the official docs:
https://webpack.github.io/docs/webpack-dev-server.html

As I generally don’t like frames, I see no reason to avoid inline mode.

Having this done, when you launch

npm start

the bash window tells you where the content is served. Just point the browser to that address, and you will see your code in action.

Hey, what about hot reloading?

Webpack features another cool… well, feature, called “hot reload” or “hot module replacement”. It enables you to change the source code and have the web page updated without a full reload.

In other words, you may have the running application updated without losing its state. You will not reset the application to its initial state as a full f5 reload would do.

This is of course amazing but for now I won’t care about, because I want to keep things simple as much as I can. I think this is not a vital feature for rapid application prototyping.

The source, please

Please see the entire project repo here:
https://github.com/paooolino/react-boilerplate

The source code included in my setup is trivial, and will be probably replaced with everything you will decide to try. However, it shows a couple of things it’s worth to learn:

how to render a React component in the DOM.
how to write and include a React component passing external data.

// index.js/*
  external imports
*/

import React from 'react';
import ReactDOM from 'react-dom';

/*
  internal imports
*/

import MyComponent from './components/MyComponent';

/*
  app render
*/

ReactDOM.render(
  <MyComponent someData="Jordan" />,
  document.querySelectorAll('#rootElement')[0]
);

// src/components/MyComponent.js/*
  external imports
*/

import React, { Component } from 'react';

/*
  internal imports
*/

// ...

/*
  component definition
*/

class MyComponent extends Component {
  render() {
    return (
      <div>
        Hello, {this.props.someData}
      </div>
    );
  }
};

export default MyComponent;