Breaking components into modules

Approaching the Recipes app with the ability to use webpack and Babel allows us to break our code down into modules that use ES6 syntax. Let’s take a look at our stateless functional component for recipes (Example 5-13).

const Recipe = ({ name, ingredients, steps }) => 
    <section id="baked-salmon">
        <h1>{name}</h1>
        <ul className="ingredients">
            {ingredients.map((ingredient, i) => 
                <li key={i}>{ingredient.name}</li>
            )}
        </ul>
      <section className="instructions">
          <h2>Cooking Instructions</h2>
          {steps.map((step, i) => 
              <p key={i}>{step}</p>
          )}
      </section>
    </section>

This component is doing quite a bit. We are displaying the name of the recipe, constructing an unordered list of ingredients, and displaying the instructions, with each step getting its own paragraph element.

A more functional approach to the Recipe component would be to break it up into smaller, more focused stateless functional components and compose them together. We can start by pulling the instructions out into their own stateless functional component and creating a module in a separate file that we can use for any set of instructions (Example 5-14).

const Instructions = ({ title, steps }) => 
    <section className="instructions">
        <h2>{title}</h2>
        {steps.map((s, i) => 
            <p key={i}>{s}</p>
        )}
    </section>

export default Instructions

Here we have created a new component called Instructions. We will pass the title of the instructions and the steps to this component. This way we can reuse this component for “Cooking Instructions,” “Baking Instructions,” “Prep Instructions”, or a “Pre-cook Checklist”—anything that has steps.

Now think about the ingredients. In the Recipe component, we are only displaying the ingredient names, but each ingredient in the data for the recipe has an amount and measurement as well. We could create a stateless functional component to represent a single ingredient (Example 5-15).

const Ingredient = ({ amount, measurement, name }) => 
    <li>
        <span className="amount">{amount}</span>
        <span className="measurement">{measurement}</span>
        <span className="name">{name}</span>
    </li>

export default Ingredient

Here we assume each ingredient has an amount, a measurement, and a name. We destructure those values from our props object and display them each in independent classed span elements.

Using the Ingredient component, we can construct an IngredientsList component that can be used any time we need to display a list of ingredients (Example 5-16).

import Ingredient from './Ingredient'

const IngredientsList = ({ list }) =>
    <ul className="ingredients">
        {list.map((ingredient, i) => 
            <Ingredient key={i} {...ingredient} />
        )}
    </ul>

export default IngredientsList

In this file, we first import the Ingredient component because we are going to use it for each ingredient. The ingredients are passed to this component as an array in a property called list. Each ingredient in the list array will be mapped to the Ingredient component. The JSX spread operator is used to pass all of the data to the Ingredient component as props.

Using spread operator:

<Ingredient {...ingredient} />   

is another way of expressing:

<Ingredient amount={ingredient.amount} 
            measurement={ingredient.measurement} 
            name={ingredient.name} />

So, given an ingredient with these fields:

let ingredient = {
    amount: 1,
    measurement: 'cup',
    name: 'sugar'
}

we get:

<Ingredient amount={1} 
            measurement="cup"  
            name="sugar"  />

Now that we have components for ingredients and instructions, we can compose recipes using these components (Example 5-17).

import IngredientsList from './IngredientsList'
import Instructions from './Instructions'

const Recipe = ({ name, ingredients, steps}) => 
    <section id={name.toLowerCase().replace(/ /g, '-')}>
        <h1>{name}</h1>
        <IngredientsList list={ingredients} />
        <Instructions title="Cooking Instructions" 
                      steps={steps} />
    </section>

export default Recipe

First we import the components that we are going to use, IngredientsList and Instructions. Now we can use them to create the Recipe component. Instead of a bunch of complicated code building out the entire recipe in one place, we have expressed our recipe more declaratively by composing smaller components. Not only is the code nice and simple, but it also reads well. This shows us that a recipe should display the name of the recipe, a list of ingredients, and some cooking instructions. We’ve abstracted away what it means to display ingredients and instructions into smaller, simple components.

In a modular approach with CommonJS, the Menu component would look pretty similar. The key difference is that it would live in its own file, import the modules that it needs to use, and export itself (Example 5-18).

import Recipe from './Recipe'

const Menu = ({ recipes }) => 
    <article>
        <header>
            <h1>Delicious Recipes</h1>
        </header>
        <div className="recipes">
            { recipes.map((recipe, i) => 
                <Recipe key={i} {...recipe} />) 
            }
        </div>
    </article>

export default Menu

We still need to use ReactDOM to render the Menu component. We will still have a index.js file, but it will look much different (Example 5-19).

import React from 'react'
import { render } from 'react-dom'
import Menu from './components/Menu'
import data from './data/recipes'

window.React = React

render(
    <Menu recipes={data} />, 
    document.getElementById("react-container")
)

The first four statements import the necessary modules for our app to work. Instead of loading react and react-dom via the script tag, we import them so webpack can add them to our bundle. We also need the Menu component, and a sample data array which has been moved to a separate module. It still contains two recipes: Baked Salmon and Fish Tacos.

All of our imported variables are local to the index.js file. Setting window.React to React exposes the React library globally in the browser. This way all calls to React.createElement are assured to work.

When we render the Menu component, we pass the array of recipe data to this component as a property. This single ReactDOM.render call will mount and render our Menu component.

Now that we have pulled our code apart into separate modules and files, let’s create a static build process with webpack that will put everything back together into a single file.

Installing webpack dependencies

In order to create a static build process with webpack, we’ll need to install a few things. Everything that we need can be installed with npm. First, we might as well install webpack globally so we can use the webpack command anywhere:

sudo npm install -g webpack

Webpack is also going to work with Babel to transpile our code from JSX and ES6 to JavaScript that runs in the browser. We are going to use a few loaders along with a few presets to accomplish this task:

npm install babel-core babel-loader babel-preset-env babel-preset-react 
babel-preset-stage-0 --save-dev

Our application uses React and ReactDOM. We’ve been loading these dependencies with the script tag. Now we are going to let webpack add them to our bundle. We’ll need to install the dependencies for React and ReactDOM locally:

npm install react react-dom --save

This adds the necessary scripts for react and react-dom to the ./node_modules folder. Now we have everything needed to set up a static build process with webpack.

Webpack configuration

For this modular Recipes app to work, we are going to need to tell webpack how to bundle our source code into a single file. We can do this with configuration files, and the default webpack configuration file is always webpack.config.js.

The starting file for our Recipes app is index.js. It imports React, ReactDOM, and the Menu.js file. This is what we want to run in the browser first. Wherever webpack finds an import statement, it will find the associated module in the filesystem and include it in the bundle. Index.js imports Menu.js, Menu.js imports Recipe.js, Recipe.js imports Instructions.js and IngredientsList.js, and IngredientsList.js imports Ingredient.js. Webpack will follow this import tree and include all of these necessary modules in our bundle.

As webpack builds our bundle, we need to tell webpack to transpile JSX to pure React elements. We also need to convert any ES6 syntax to ES5 syntax. Our build process will initially have three steps (Figure 5-4).

Figure 5-4. Recipe app build process

The webpack.config.js file is just another module that exports a JavaScript literal object that describes the actions that webpack should take. This file (Example 5-20) should be saved to the root folder of the project, right next to the index.js file.

module.exports = {
   entry: "./src/index.js",
    output: {
        path: "dist/assets",
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: ['babel-loader'],
                query: {
                    presets: ['env', 'stage-0', 'react']
                }
            }
        ]
    }
}

First, we tell webpack that our client entry file is ./src/index.js. It will automatically build the dependency tree based upon import statements starting in that file. Next, we specify that we want to output a bundled JavaScript file to ./dist/assets/bundle.js. This is where webpack will place the final packaged JavaScript.

The next set of instructions for webpack consists of a list of loaders to run on specified modules. The rules field is an array because there are many types of loaders that you can incorporate with webpack. In this example, we are only incorporating babel.

Each loader is a JavaScript object. The test field is a regular expression that matches the file path of each module that the loader should operate on. In this case, we are running the babel-loader on all imported JavaScript files except those found in the node_modules folder. When the babel-loader runs, it will use presets for ES2015 (ES6) and React to transpile any ES6 or JSX syntax into JavaScript that will run in most browsers.

Webpack is run statically. Typically bundles are created before the app is deployed to the server. Since you have installed webpack globally, you can run it from the command line:

$ webpack
   Time: 1727ms
   Asset    Size  Chunks             Chunk Names
   bundle.js  693 kB       0  [emitted]  main
     + 169 hidden modules

Webpack will either succeed and create a bundle, or fail and show you an error. Most errors have to do with broken import references. When debugging webpack errors, look closely at the filenames and file paths used in import statements.

Loading the bundle

We have a bundle, so now what? We exported the bundle to the dist folder. This folder contains the files that we want to run on the web server. The dist folder is where the index.html file (Example 5-21) should be placed. This file needs to include a target div element where the React Menu component will be mounted. It also requires a single script tag that will load our bundled JavaScript.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Recipes App</title>
</head>
<body>
  <div id="react-container"></div>
  <script src="assets/bundle.js"></script>
</body>
</html>

This is the home page for your app. It will load everything it needs from one file, one HTTP request: bundle.js. You will need to deploy these files to your web server or build a web server application that will serve these files with something like Node.js or Ruby on Rails.

Source mapping

Bundling our code into a single file can cause some setbacks when it comes time to debug the application in the browser. We can eliminate this problem by providing a source map. A source map is a file that maps a bundle to the original source files. With webpack, all we have to do is add a couple of lines to our webpack.config.js file (Example 5-22).

module.exports = {
    entry: "./src/index.js",
    output: {
        path: "dist/assets",
        filename: "bundle.js",
        sourceMapFilename: 'bundle.map'
    },
    devtool: '#source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: ['babel-loader'],
                query: {
                    presets: ['env', 'stage-0', 'react']
                }
            }
       ]
    }
}

Setting the devtool property to '#source-map' tells webpack that you want to use source mapping. A sourceMapFilename is required. It is always a good idea to name your source map file after the target dependency. Webpack will associate the bundle with the source map during the export.

The next time you run webpack, you will see that two output files are generated and added to the assets folder: the original bundle.js and bundle.map.

The source map is going to let us debug using our original source files. In the Sources tab of your browser’s developer tools, you should find a folder named webpack://. Inside of this folder, you will see all of the source files in your bundle (Figure 5-5).

Figure 5-5. Sources panel of Chrome Developer Tools

You can debug from these files using the browser’s step-through debugger. Clicking on any line number adds a breakpoint. Refreshing the browser will pause JavaScript processing when any breakpoints are reached in your source file. You can inspect scoped variables in the Scope panel or add variables to Watch in the watch panel.

Optimizing the bundle

The output bundle file is still simply a text file, so reducing the amount of text in this file will reduce the file size and cause it to load faster over HTTP. Some things that can be done to reduce the file size include removing all whitespace, reducing variable names to a single character, and removing any lines of code that the interpreter will never reach. Reducing the size of your JavaScript file with these tricks is referred to as minifying or uglifying your code.

Webpack has a built-in plugin that you can use to uglify the bundle. In order to use it, you will need to install webpack locally:

npm install webpack --save-dev

We can add extra steps to the build process using webpack plugins. In this example, we are going to add a step to our build process to uglify our output bundle, which will significantly reduce the file size (Example 5-23).

var webpack = require("webpack");

module.exports = {
    entry: "./src/index.js",
    output: {
        path: "dist/assets",
        filename: "bundle.js",
        sourceMapFilename: 'bundle.map'
    },
    devtool: '#source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: ['babel-loader'],
                query: {
                    presets: ['env', 'stage-0', 'react']
                }
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            warnings: false,
            mangle: true
        })
    ]
}

To use the Uglify plugin, we need to require webpack, which is why we needed to install webpack locally.

UglifyJsPlugin is a function that gets instructions from its arguments. Once we uglify our code, it will become unrecognizable. We are going to need a source map, which is why sourceMap is set to true. Setting warnings to false will remove any console warnings from the exported bundle. Mangling our code means that we are going to reduce long variable names like recipes or ingredients to a single letter.

The next time you run webpack, you will see that the size of your bundled output file has been significantly reduced, and it’s no longer recognizable. Including a source map will still allow you to debug from your original source even though your bundle has been minified.

create-react-app

As the Facebook team mentions in their blog, “the React ecosystem has commonly become associated with an overwhelming explosion of tools.”¹ In response to this, the React team launched create-react-app a command-line tool that autogenerates a React project. create-react-app was inspired by the Ember CLI project, and it lets developers get started with React projects quickly without the manual configuration of webpack, Babel, ESLint, and associated tools.

To get started with create-react-app, install the package globally:

npm install -g create-react-app

Then, use the command and the name of the folder where you’d like the app to be created:

create-react-app my-react-project

This will create a React project in that directory with just three dependencies: React, ReactDOM, and react-scripts. react-scripts was also created by Facebook and is where the real magic happens. It installs Babel, ESLint, webpack, and more, so that you don’t have to configure them manually. Within the generated project folder, you’ll also find a src folder containing an App.js file. Here, you can edit the root component and import other component files.

From within the my-react-project folder, you can run npm start. If you prefer, you can also run yarn start. This will start your application on port 3000.

You can run tests with npm test or yarn test. This runs all of the test files in the project in an interactive mode.

You can also run the npm run build command. Using yarn, run yarn build.

This will create a production-ready bundle that has been transpiled and minified.

create-react-app is a great tool for beginners and experienced React developers alike. As the tool evolves, more functionality will likely be added, so you can keep an eye on the changes on GitHub.