Click here to Skip to main content
14,981,532 members
Articles / Web Development / Node.js
Article
Posted 28 Oct 2020

Stats

3.5K views
90 downloads
3 bookmarked

Setup React and Redux Development Environment From Scratch

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
28 Oct 2020CPOL6 min read
Basic skeleton of React and Redux development environment for a book store application
This article demonstrates the basic application setup done for React and Redux application. However, we will be hooking up Redux with React in an upcoming article.

Introduction

This article is intended for beginners who wish to understand the environment setup for React and Redux application and get to know the nitty-gritty of the application building blocks that are getting created using the templates. For example, to create a React application, we can directly execute create-react-app in the terminal with the help of node but we may not understand the basic application completely as we are not aware of all those packages that have been added to our package.json file. Let's demystify the concepts with the help of simple book store application.

Background

Around a year ago, we adopted a new framework based on react and redux library and unfortunately in my team no one was much aware of that. So to learn, people started creating simple applications with ready to use templates but no one knew what packages were included in the simple application and how the application could be modified with different scripts or what a webpack could do to our application. To learn more on React basics, navigate to this page.

Prerequisites

Install NodeJS and Visual Studio Code into your development machine.

Setting the Base Environment

To create reactjs starter application, Facebook has provided a starter template to setup a basic React development environment. So let's create our book store application by issuing the below command:

npx create-react-app book-store

Image 1

Once it is done, we will be able to see the folder structure as below. We can see the files and the dependencies added into package.json and there are few things that are made hidden for us. If you want to see it, you can try npm eject. However, we don't need to see it as anyways, we are going to setup everything ourselves.

Image 2

Now in the terminal, we can dive into the application directory where our package.json resides and run the application:

cd book-store

npm start

And we can see the application running on port 3000. So this is how we setup Reactjs development environment with ready to use starter template.

Image 3

Alternatively, to setup Reactjs with Redux, we can directly hit npx create-react-app book-store --template redux and it will add Redux dependencies with proper file structure.

Demystifying Generated Application

So now let's start to setup our environment from scratch. The very first step would be to delete everything from src folder that got generated. Or we can create entirely new folder src and a package.json.

Image 4

Below are the dependencies that I am going to add to my book store application.

JavaScript
"dependencies": {
"@reduxjs/toolkit": "^1.4.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.1",
"react-scripts": "3.4.3",
"redux": "^4.0.5",
"bootstrap": "^4.3.1",
"immer": "~2.1.3",
"prop-types": "^15.7.2",
"react-router-dom": "^5.0.0",
"react-toastify": "^4.5.2",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0"
}

Now let's dwell into understanding and adding required dependencies.

What is Redux?

So here is the definition of Redux from Redux site Redux is a pattern and library for managing and updating application state, using events called "actions". When and where it is used can also be found in Redux website here.

I am not going through definitions as the scope and intention of this article is basically to uncover what has been used in generated application and how we can add on our own to understand for better clarity.

Adding Redux

To add Redux into our application, we can hit the below commands:

npm install redux

npm install react-redux

It is also imperative to understand what all dependencies are used to run the application and which all are needed for the development. To add a dependency, we can issue the following commands:

npm install <package-name> [--save-prod]

npm install <package-name> --save-dev

The flag --save-prod will add your installed package into "dependencies" section and --save-dev will create new section named "devDependencies"

First thing first, let's add index.html and index.js file:

Image 5

Let's add some basic HTML boiler plate code:

HTML
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Book Store</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Image 6

JavaScript
import React from "react";
import { render } from "react-dom";

function HelloWorld() {
  return <p>Hello World!!!</p>;
}

render(<HelloWorld />, document.getElementById("app"));

Image 7

Configuring and Understanding webpack

Webpack is bundler to minify js and facilitate adding various plugins and allowing us to add rules as per the file extensions.

Now letโ€™s add webpack and configure in our app.

Create a file with name webpack.config.dev.js for dev environment and start adding below code. This is just naming convention that is preferred to identify webpacks for dev, production or any other environment we need.

So first, we will use commonJS syntax to import webpack, path and "html-webpack-plugin". 

JavaScript
const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
process.env.NODE_ENV = "development";

Adding output:

JavaScript
output: {
   path: path.resolve(__dirname, "build"),
   publicPath: "/",
   filename: "bundle.js",
 },

Adding dev server configuration:

JavaScript
devServer: {
   stats: "minimal",
   overlay: true,
   historyApiFallback: true,
   disableHostCheck: true,
   headers: { "Access-Control-Allow-Origin": "*" },
   https: false,
 },

Now we will add the HtmlWebpackPlugin that we imported.

JavaScript
plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
      favicon: "src/favicon.ico",
    }),
  ],

Module specifies what all rules we need to add for various file extensions. So let's add the module now as below:

JavaScript
module: {
  rules: [
    { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ["babel-loader"] },
    { test: /(\.css)$/, use: ["style-loader", "css-loader"] },
  ],
},

In the above rules configuration, I have added rule for .js and .jsx wherein all files of that extension within node_modules folder will be excluded and babel-loader will allow transpiling our JS and JSX files using babel. Similarly, we can add style-loader and css-loader for injecting CSS to DOM and importing CSS to our components subsequently. There are other loaders available too like sass-loader less-loader json-loader etc. which we can use as per our requirements. But for now, to keep it simple, I am not going to use other loaders.

Finally, our webpack.config.dev.js should look like this:

Image 8

Configuring Babel

Babel is a JavaScript compiler which facilitates the following to support all new browsers:

  1. Transpile modern JS(ES5, ES6 and etc.)
  2. Compile JSX to JS

If you want to play around with babel and understand how JSX is tranpiled, you can navigate to https://babeljs.io/ and try it out. ๐Ÿ˜Š

So let's begin adding babel configuration in package.json and add a preset. So the question now is what are preset??

Here is the answer:

A preset in babel can be described as a set of plugins used to support particular language features. Some presets Babel uses by default like ES6,javascript, jsx...

JavaScript
"babel":{
   "presets":["babel-preset-react-app"]
 }

Image 9

FYI. we can also configure babel in .babelrc file.

Adding Scripts

Now let's setup scripts to start our book store application.

JavaScript
"scripts": {
    "start": "webpack-dev-server --config webpack.config.dev.js --port 3000"
  },

Like we added start to run the application, we can add multiple scripts to include running test cases or debugging or may be just compiling.

Image 10

Now, if we try to start the application via npm start, we see an error for linting.

Image 11

Configuring ESLint

Linting is very important to configure as we can get the errors understandable and easy to fix. So let's configure eslint into our application. Again, we can setup this in two ways. Either in .eslintrc file or to better have handhold in package.json file.

JavaScript
"eslintConfig": {

    "extends": [
      "eslint:recommended",
      "plugin:react/recommended",
      "plugin:import/errors",
      "plugin:import/warnings"
    ],
    "parser": "babel-eslint",
    "parserOptions": {
      "ecmaVersion": 2018,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "env": {
      "browser": true,
      "node": true,
      "es6": true,
      "jest": true
    },

    "rules": {
      "no-debugger": "off",
      "no-console": "off",
      "no-unused-vars": "warn",
      "react/prop-types": "warn"
    },

    "settings": {
      "react": {
        "version": "detect"
      }
    },
    "root": true
  }
}

Once added properly, you should be able to see something like below:

Image 12

Let's try running again and after it is successfully compiled, we can navigate to http://localhost:3000.

Image 13

Finally it's โ€œHello Worldโ€.

Summary

So in this article, we saw how actually we can create a React application development environment by knowing what actually a package.json is composed of. And what all dependencies have been added to make the application structure better. Next, we will be creating a simple book store application and configuring Redux with React.

History

  • 28th October, 2020: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

NitinShrivastava
Software Developer (Senior)
India India
Started my career as a Web developer in C#, Asp.Net. Later on worked with MVC, Silverlight, WPF, WCF and Windows Phone 8 development. Also worked on SSRS for the reporting purposes. Keen to learn on latest technologies. Recently worked with backbone.js and AngularJS and Angular. Currently involved in the development using .Net core, Azure and ReactJS with Redux.

http://nitinvshrivastava.com

Comments and Discussions

 
GeneralMy vote of 5 Pin
Hyland Computer Systems29-Oct-20 12:46
MemberHyland Computer Systems29-Oct-20 12:46 
QuestionHow to setup express in react Pin
JAGDALE29-Oct-20 2:12
MemberJAGDALE29-Oct-20 2:12 
AnswerRe: How to setup express in react Pin
NitinShrivastava29-Oct-20 2:50
professionalNitinShrivastava29-Oct-20 2:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.