{EP}

Edwin Perez

Setting Up a Modern Webapp 2020 Edition Part II

JavaScript

July 18, 2020

Overview

For this part, we'll focus on setting up the react family of libraries. This includes react itself, redux, redux sagas, immutable, and react router.

The Setup

The setup is somewhat opinionated, but the main idea is to keep it flexible, best practices, and modern. It will include the following:

  • React: UI Library.
  • React-Router: UI route manager.
  • Redux: State management.
  • Redux-dom: React to html converter.
  • Redux-Sagas: Asynchronous data management.
  • Immutable: Allows for working with immutable data.

Step 1: Installing dependencies

We'll install all of the react libraries mentioned above. Basically, we have to do two steps and it is to install the required babel libraries and then the actual libraries we are using. Babel needs to be able to parse react or JSX, also to be able to parse generators since we'll be using these with our sagas

npm i -D \
@babel/core@7.10.3 \
@babel/plugin-transform-runtime@7.10.4 \
@babel/preset-env@7.10.3 \
@babel/preset-react@7.10.1 \
@babel/runtime@7.10.4 \
babel-loader@8.1.0 \
immutable@4.0.0-rc.12 \
react@16.13.1 \
react-dom@16.13.1 \
react-redux@7.2.0 \
react-router-dom@5.2.0 \
redux@4.0.5 \
redux-immutable@4.0.0 \
redux-saga@1.1.3

Step 2: React configuration

Let's start with the configuring babel. This way when we add react, everything will work as expected.

# Create the .babelrc file for bable configuration
cd PROJECT_DIR
touch .babelrc

Our .babelrc file should look like the following:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/transform-runtime"]
}

Next is to update our webpack.config.js file to be able to run js files through babel and our custom configuration.

Here is the updated webpack.config.js file:

const { join } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const htmlConfig = new HtmlWebpackPlugin({
  title: 'Web App 2020',
  template: './index.ejs'
})

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    alias: {
      components: join(__dirname, 'src/components'),
      containers: join(__dirname, 'src/containers')
    }
  },
  plugins: [htmlConfig],
  devtool: 'inline-source-map'
}

Now that we have babel + webpack working together and supporting react, we are able to start adding some react to our app. Let's start making some directories and files for our react setup.

cd PROJECT_DIR

# Create a components dir (simple / dumb components)
mkdir src/components

# Create a containers dir (smart / higher order level components - HOC)
mkdir src/containers

# Our redux / redux-sagas files
touch src/store.js
touch src/reducers.js
touch src/sagas.js

# Simple component
mkdir src/components/button/

Creating