Building and Deploying a react application from scratch (Part 1)

In this article, I will be introducing us to setting up a standard react application and deploying it on a cloud platform, heroku. This article is into three parts as highlighted below

  • Part 1 - setting a standard development tool
  • Part 2 - Setting the react environment
  • part 3 - Deployment

In the onset when I was trying to learn react, I made my findings on how to get started and I found the create-react-app method of doing so. create-react-app automatically configures everything for the project from package manager, necessary modules, transpiler, build (webpack). Later in the journey, I needed to understand the breakdown of the configuration which led me to reading a number of articles. In this article, all that is needed to get started will be explained.

Let's get Started

Tools

In setting up our project, we will be needing some tools to build a great product

  1. Node and NPM: This is a JavaScript run-time environment required to run our JavaScript programs. NPM is an acronym for Node Package Manager. On this platform, we can access various packages to develop elegant JavaScript projects. This helps us to install packages into our applications. To check if node and NPM are installed, run this commands on the terminal
    node -v   // to check node
    npm -v   // to check npm
    
    If not installed, download it here. After verifying that node and npm are available, create a folder for the project, navigate in to the folder and run this command
    npm init -y
    
    This creates a package.json file which gives description of our application. It gives information that allows npm to understand our project and handle the dependencies. Note: The -y flag above is optional. Adding it set up the file automatically and omitting it allows us to configure the details ourselves . Your file should look like this
    {
       "name": "react-setup",
       "version": "1.0.0",
       "description": "",
       "main": "index.js",
       "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1"
       },
       "keywords": [],
       "author": "",
       "license": "ISC"
    }
    
  2. Prettier: Prettier is a code formatter that helps us in beautifying our codes. It helps in arranging our codes in an ordered and elegant manner. To install prettier, run

    npm install -D prettier
    

    The -D flag saves the package under devDependencies property of package.json as shown below

    {
       "name": "react-setup",
       "version": "1.0.0",
       "description": "",
       "main": "index.js",
       "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1"
        },
       "keywords": [],
       "author": "",
       "license": "ISC",
       "devDependencies": {
          "prettier": "^2.0.4"
       }
    }
    

    After downloading, prettier requires some setup for it to have effect in our project. We need to add some configurations to package.json. Add this to the scripts property

       "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1",
          "format": "prettier \" \"  --write"
        },
    

    We'll come back to to add some stuffs here. Next, create another file and name it .prettierrc. This is where we will set all our prettier rules

    {
       "useTabs": true,   // allows the use of tabs
       "singleQuotes": false  // disables single quotes, only double quotes are allowed
    }
    

    Other options can be found here. Running npm run format on terminal applies all these rules to the project. To auto format our project, we can install prettier extension which is available for almost all code editors

  3. ESLINT: ESLINT is a code linter which allows us to find and fix possible errors in our code syntax. It also performs the work of prettier, i.e, code formatting but we will be using it only as a linter in our project. To install, run

    npm install -D eslint eslint-config-prettier eslint-plugin-prettier  eslint-plugin-import
    

    The eslint package installs the linter and the eslint-config-prettier installs a packages which tells ESLINT not to worry about code formatting as prettier is already serving that purpose. Our devDependencies should look like this

    "devDependencies": {
       "eslint": "^6.8.0",
       "eslint-config-prettier": "^6.10.1",
       "eslint-plugin-import": "^2.20.2",
       "eslint-plugin-prettier": "^3.1.3",
       "prettier": "^2.0.4"
    }
    

    Under Scripts, let's add this

       "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1",
          "format": "prettier \" \" ",
          "lint": "eslint \"\" --quiet --fix "
        },
    

    We will be come back here also. Our configuration file for ESLINT will go into a new file called .eslintrc.json. Copy this code into .eslintrc.json

    {
       "extends": ["prettier", "prettier/react", "plugin:import/errors"],
       "plugins": ["prettier", "import"],
       "parserOptions": {
           "ecmaVersion": 2020,
           "sourceType": "module",
           "ecmaFeatures": {
                 "jsx": true
           }
       },
       "env": {
           "es6": true,
           "browser": true,
           "node": true
       },
       "rules": {
    
       },
    }
    

    To learn more about the properties in this file, read the eslint docs here

  4. Airbnb: This is the last tool we will be needing in this chapter. Airbnb is a style guide which allows us to write unique codes. It states the rules which are accepted in the project and those not accepted. It also helps us to check if we are writing the correct syntax. To install, run

    npm install -D eslint-config-airbnb-base
    

    On installation, airbnb can be used to overwrite some eslint rules. Add these codes to .eslintrc.json

    "extends": ["airbnb-base", "prettier", "prettier/react", "plugin:import/errors"]  // This should be at the extends property
    // we can also set the rules we want in the rules property
    "rules": {
         "no-var": 2,
         "semi": 0,
         "no-console": 1,
         "no-unused-expressions": 0,
         "no-plusplus": 2
    }
    

    the property values 0, 1 and 2 means off, warning and error respectively. Other airbnb rules can be gotten here

We are done setting up the tools, so, lets check their effect

Create a new folder and name it src. Inside src, create two files index.html and app.js. Write some codes in the files and let's go back to package.json to complete our unfinished tasks. You remember?

"scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "format": "prettier \"src/**/*.{html,js} \" --write ",
     "lint": "eslint \"src/**/*.{js}\" --quiet --fix "
 },

This applies prettier and eslint to our project. To check, run

npm run format // to run prettier
npm run lint  // to run eslint

Congratulations, you are able to set up a standard essential development tool

Benefits

  1. It allows you to write elegant and well structured codes
  2. In case you are working on a group project, it directs each team member on what are allowed and not allowed in the project
  3. It makes you more professional

Have you got hold of this? Lets meet in part two where we set our react packages, babel and parcel bundler. Happy Hacking!

For further reading, reference these documentations

Comments (3)

Mustapha Mubarak's photo

Didn't really go through it because if I do,I'll want to follow the steps and I'm currently working on another project at the moment. But from the looks of it,all i can say is you've done a wonderful job with the blog and the tutorial.I also noticed the tutorial was targeted for linux users. You can also do tutorials for other OS users to expand your audience. Just a suggestion though. Keep up the good work👍

Adio Mojeed's photo

I appreciate your reply Mustapha but the commands I have on the article are general, they work both on windows and linux

Mustapha Mubarak's photo

Adio Mojeed Alright Waiting for your next tutorial. Excellent work again👍