Understand the Basic Workflow in React

May 21, 2020 • 7 Minute Read

Introduction

React is an excellent library for creating component-based user interfaces. It takes care of the developer experience by providing declarative APIs for creating components. The React ecosystem has an excellent global package called create-react-app that can easily set up a React project with a single command.

Starters like create-react-app are pretty great tools, but you must understand how it all works under the hood. In this guide, you'll learn how to set up a custom webpack config to create a React app from scratch and unpack the workflow behind it.

Webpack

Before getting started, this section will give you a brief introduction to webpack, so that you can follow the next sections.

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph that maps every module your project needs and generates one or more bundles.

That means webpack can grab all of your code, manage the dependencies, remove dead code that's not required, and spit out an optimized JavaScript file. It can preprocess or transpile your SASS to CSS, JSX to JS, and lots of other optimizations using webpack plugins.

Your source code might have many files, and you can also import dependencies based on your project structure; in the end, webpack bundles them together in a single .js file inside the dist folder by default. Another cool thing about webpack is that you can do code splitting using dynamic imports so that the users are only served the JavaScript required to run that particular page.

Next up, you are going to see the various plugins required to set up a React app.

Initialize the Project

Start by creating a directory for the project and initialize npm.

      > mkdir react-app
> cd react-app
> npm init -y
    

After running these commands, you should see a package.json file inside your project.

Install Dependencies

React has two parts: the react library, which creates the Virtual DOM, and the react-dom library, which is a renderer for React on the browser. We require both of them to create a complete React web app.

So to install these libraries, run the following command.

      > npm i --save react react-dom

Everything installed next are dev dependencies.

Install webpack, which will transpile all the JSX code in the components into JavaScript, and webpack-dev-server to enable hot reloading. That means whenever you make any changes, the browser will update the code automatically without having to be refreshed.

Another webpack dependency you'll require is webpack-cli, which will allow you to write webpack commands and build scripts.

      > npm i --save-dev webpack webpack-dev-server webpack-cli

So next you'll install all the babel dependencies. React uses ES6 class syntax and JSX. Babel will transpile the syntax to browser-friendly JavaScript depending on which browser is being used.

      > npm i --save-dev babel-core babel-loader babel-preset-react babel-preset-env html-webpack-plugin
    

Set up Babel Preset

Inside the root of your project, create a .babelrc file, which will specify all the babel presets to be used by webpack.

      {
  presets: ["env", "react"];
}
    

That's all you need to do for this file.

Set up Webpack Config

Now that you have all the dependencies required to create a React project, configure webpack. Create a webpack.config.js file in your project directory.

There are a few things you need to do inside the webpack.config.js file. Require the path module to resolve the files in the project and the html-webpack-plugin to create the root HTML file.

      const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  // webpack config
};
    

It's best if you write all of your app code inside an src directory so that webpack can use this directory as source code for your project. Inside the src directory, create an index.js file to be the entry file for your project.

Once this is done, specify the entry and the output path inside webpack config file.

      const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "./app.bundle.js",
  },
};
    

All the files in the src folder will get transpiled into the app.bundle.js file inside the dist folder.

Next, specify a module object inside the config to select the file extension that babel should transpile. In this case, the extension would be .js.

      // ...

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "./app.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
      },
    ],
  },
};
    

The next step is to create an HTML template inside the src directory into which webpack will automatically inject the final js bundle file in the <script> tag. The benefit of using a template is that you can add in additional tags that you might need for your app.

So inside the webpack config file, specify the HTML template using the html-webpack-plugin.

      // ...

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "./app.bundle.js",
  },
  module: {
    // ...
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      inject: "body",
    }),
  ],
};
    

That's pretty much it. Now you can write some React code to test this out. For brevity, this guide doesn't include React code, but you can check out other guides (for example, here and here) for code examples.

Write Build Scripts

The last step is to include the webpack commands in the scripts object of the package.json file to run the webpack server and transpile the files in the dist folder.

      {
    // ...
    "scripts" : {
        "start": "./node_modules/.bin/webpack-dev-server --mode development --open --hot",
        "build": "./node_modules/.bin/webpack --mode production"
    },
    // ...
}
    

The start script will load the development version of the app, open up the browser tab immediately at localhost:8000, and enable hot reloading for you out of the box.

The build script will spit out the production version of your app inside the dist folder. Typically, you would want to serve the dist folder as your root in a production server.

Conclusion

It's important to understand the tools you use daily so if you hit a bump, you can go back to setting up the project on your own. The great thing is that you don't have to write the webpack config from scratch for each project. You can make a repo, clone the repo, and install the dependencies by running npm install.

Hopefully, this guide clarified the magic that create-react-app does under the hood.