Developer Checklist — React Application Initial Set Up

It is very easy to get started with a react app just with a single “create-react-app” command. But it is always recommended to make sure that we have few things checked off from our initial set up checklist before making our hands dirty with code. These checklist items can definitely help the project in the long run.

Set Up Roadmap

From the above roadmap,
1. Dark Lines highlight the recommended checklist.
2. Dotted Lines - if you wish to skip any paths.

Step 1: Create React Application

Let’s navigate to our codebase folder and create the project using “create-react-app” command.

npx create-react-app my-app-name

Note: You are welcome to use yarn.

In case, if we are going to develop using Typescript, create the project using the following command.

npx create-react-app my-app-name --template typescript

Note: Highly recommend to use Typescript instead of plain JS.

General Guideline — Run “npm start” after each step just to make sure that create-react-app starter app works fine after additional packages are installed. Resolve issues, if any.

Step 2: Set up SCSS

This step is applicable only if you wish to use SCSS instead of CSS for styling.
(Recommend to use SCSS in your application).

Let’s install node-sass first.

npm i --save-dev node-sass

Boom! SCSS has been set up in the project directory.
1. Convert existing .css files (App.css and index.css) to .scss files.
2. Change any imports to use .scss.

Step 3: Set up ESLint

With ESLint, we could enforce some guidelines in our project and avoid common pitfalls. Let’s install ESLint and ESLint Plugin React to our project first.

npm install eslint eslint-plugin-react --save-dev

Try running “npm start” at this point.
In case, there is an error, follow the instructions that appear on the terminal.
Sometimes, react-scripts may not be updated to use the latest ESLint versions. In such cases, just figure out the ESLint version which react-scripts is looking for from the terminal logs and install that version.

Example > npm install eslint@6.6.0 — save-dev

Please Note : For typescript, we need additional packages like @typescript-eslint/eslint-plugin and @typescript-eslint/parser

Refer the steps in ReadMe — https://github.com/nijin-vinodan/react-starter-templates/tree/master/examples/starter-react-ts-scss-eslint-prettier

Create a .eslintrc file at the project root and then we can run ESLint on any files.

This configuration file takes the form of a JSON object. We can specify any options (Lint rules) like parserOptions, environment etc.

Here, eslint-plugin-react adds predefined react rules. We could override them in the rules section.

Sample ESLint Example

You can view the entire list of configurations here
https://eslint.org/docs/user-guide/configuring

Add the following to package.json along with other scripts.

npm run lint:fix will run the ESLint on all our project files and fix whatever is possible.

Step 4: Set up Prettier

Prettier helps in formatting the code. It makes sure the entire codebase looks uniform when there are multiple developers working on it. Let us install Prettier within our project directory.

npm install prettier --save-dev

Now, let’s configure prettier. Create a .prettierrc file in the project root directory and add few prettier options.

For more Prettier options and detailed explanation on options, checkout
https://prettier.io/docs/en/options.html

Let’s also set up Prettier CLI which will format our code based on the options specified. Add the following code snippet to package.json along with other scripts.

Step 5: Integrate Prettier with ESLint

Did you know ESLint can also format your code to some extent? Well, if we are using Prettier, we need to replace ESLint’s formatting rules.

Note: We are only going to replace ESLint’s formatting rules and not the code-quality rules. ESLint will still check the quality for us based on the rules specified.

Now, let’s integrate Prettier in our ESLint configuration by installing the following as we need to replace ESLint’s formatting rules.
Install the following packages.

eslint-config-prettier disables rules that conflict with Prettier
eslint-plugin-prettier adds the rule that format content using Prettier

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

We can enable this configuration by using the recommended one in eslintrc file.

{
    "extends": ["plugin:prettier/recommended"]
}

Step 6: Set up Pre-Commit Hook

husky is a tool that allows to set up Git Hooks easily. We could set up a pre-commit hook with husky that will make sure the ESLint and Prettier scripts are run before the code is committed to your repository.

npm install --save-dev husky

The above command will install husky in the project. Now, let’s set up the husky pre-commit hook. Let’s add the following code to our package.json to configure pre-commit hook.

This ensures that ESLint and Prettier runs before committing.

Step 7: Set up Project Folders and Start Working on the development!

Download Source

Checkout this repository for react app starters configured with Typescript, SCSS, ESLint and Prettier. Download it and run “npm i” to install all node-modules.

https://github.com/nijin-vinodan/react-starter-templates/tree/master/examples

References

Create React App · Set up a modern web app by running one command.

How to setup ESLint and Prettier for your React apps