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

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"
}
```
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

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

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

It allows you to write elegant and well structured codes
In case you are working on a group project, it directs each team member on what are allowed and not allowed in the project
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

Prettier
ESLINT
(Airbnb](github.com/airbnb/javascript)
Intro to react-v5 by Brian Holt on Frontend Masters