We will set up a React starter project based on developer best practices before writing the code. The full code base is updated on my GitHub.

Create React App

Create React App (CRA) is a command-line tool that helps you create a React application quickly and easily. It does this by setting up all the necessary dependencies and configurations for you, so you can focus on writing React code.

We will use typescript for our codebase.

We can use npx

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

But, We will try to use Yarn for our project.

yarn create react-app client project-name --template typescript

CRA uses several popular tools under the hood, Webpack, Babel, Jest and many more, CRA also includes several features that make it easy to develop React applications, such as:

Hot reloading: This feature allows you to see your changes to the React code immediately without having to restart the application.

Code splitting: This feature allows you to load only the parts of your React application that are needed by the user, which can improve performance.

Production build: CRA can create a production build of your React application that is optimized for performance and security.

Build Analyzer

We'll install the dependencies we need to analyze the project.

craco: Create React App Configuration Override, an easy and comprehensible configuration layer for create-react-app.

webpack-bundle-analyzer: It will create an interactive treemap visualization of the contents of all your bundles.

yarn add @craco/craco webpack-bundle-analyzer -D

Now, Add craco.config.js file and configure webpack-bundle-analyzer.

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = function () {
  return {
    webpack: {
      plugins: [new BundleAnalyzerPlugin({ analyzerMode: "server" })],
    },
  };
};

craco build is as same as npm run build but it will inject any webpack configuration that are overridden by the craco.

We need to add a new script in our package.json file to start analyze our craco build file.

{
  ...
  "scripts": {
    ...
    "analyze": "craco build"
  }
}

Now, We can analyze our applications by running

yarn run analyze

Engine Locking

We will write two file .nvmrc and .npmrc to maintain and force developers to use selected node versions and selected package managers. For node it will be Node version 16 and greater, for package manager it will be yarn

.nvmrc

v16

.npmrc

engine-strict=true

also, We will updated our package.json file to configure our engine

package.json

{
  ...
  "engines": {
    "node": ">=16.0.0",
    "yarn": ">=1.22.0",
    "npm": "please-use-yarn"
  },
}

Where we are declaring our node version should be greater than 16 and we are bound to use yarn.

ESLint and Prettier

we will add eslint to our dev dependencies

yarn add eslint --dev

Initiate eslint to our project

yarn run eslint --init

Update package.json file to add lint commad

{
  ...
  "scripts": {
    ...
    "lint": "eslint ./src"
  },
}

Now we can run

yarn lint

Now, let's add prettier

yarn add eslint-config-prettier eslint-plugin-prettier prettier --dev

Now update .eslintrc

{
  ...
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
  ],
}

now we will add prettier ignore file

.prettierignore

.yarn
.next
build
node_modules

we will also add .prettierrc file to config the prettier file

{
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

Now update package.json to run prettire

{
  ...
  "scripts": {
    ...
    "prettier": "prettier --write ."
  },
}

We can run prettier

yarn prettier

Husky

Git hooks are scripts that helps to run at certain events in the Git lifecycle. These events include different stages of a commit, like before a commit (pre-commit) and after a commit (post-commit). Husky is a tool that allows us to easily wrangle Git hooks and run the scripts we want at those stages.

First install husky

yarn add husky -D

Now initiate husky

yarn husky install

update package.json to prepare husky in every npm install

{
  ...
  "scripts": {
    ...
    "prepare": "husky install"
  },
}

Now we can add pre-commit and pre-push whatever configuration we need

yarn husky add .husky/pre-commit "yarn lint"

yarn husky add .husky/pre-push "yarn build"

Absolute path

It is very annoying to write the full path of a module to import. To improve our code quality we should use the Absolute path.

To add an absolute path we just need to update the tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "src"
  },
  "include": ["src"]
}

Now to import a file. We can only use the folder name.

Like

//previously 
import Button from '../../components/button.tsx';

//Now
import Button from 'components/button.tsx';