Create React 17 TypeScript With ESLint , WebPack & SCSS

1. Initialize our project

Let’s start by creating a new directory then initialize our project:

npm init -y
|or
yarn init -y

2. Install React & TypeScript

To install React, TypeScript, run the following commands in a Terminal:

npm install react react-dom 
npm install --save-dev @types/react @types/react-dom typescript
|or
yarn add react react-dom
yarn add --dev @types/react @types/react-dom typescript

Create anindex.tsx file in the src folder

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
<React.StrictMode>
  <App />
</React.StrictMode>,
document.getElementById("root")
);

• Create the App.ts component

import React from "react";
const App: React.FC = () => {
return (
<div className="wrapper">
<h1>React 17 and TypeScript 4 App!🚀</h1>
</div>
  );
};
export default App;

3. Create Tsconfig.json in your project’s root directory

4. Adding Eslint

yarn add -D eslint  eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks  @typescript-eslint/eslint-plugin @typescript-eslint/parser
or 
npm install --save-dev eslint  eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks  @typescript-eslint/eslint-plugin @typescript-eslint/parser

5. Installing and Configuring WebPack

WebPack Dependencies:

yarn add -D webpack webpack-cli webpack-dev-server ts-node @types/node @types/webpack @types/webpack-dev-server tsconfig-paths-webpack-plugin
or
npm install --save-dev webpack webpack-cli webpack-dev-server ts-node @types/node @types/webpack @types/webpack-dev-server tsconfig-paths-webpack-plugin

Let’s Install some Scss dependencies to work with our Webpack config file

• ts-loader : TypeScript loader for Webpack
• style-loader & CSS-loader : for loading CSS & SCSS files

Dependencies:

yarn add -D style-loader node-sass sass-loader
npm install --save-dev style-loader node-sass sass-loader

lets create webpack.config.ts in the root of our project folder and add the following to it:

• ts-loader : TypeScript loader for Webpack
• style-loader & CSS-loader : for loading CSS & SCSS files

6. Adding SCSS to our App

• Install node-sass:

yarn add node-sass 
or
npm install add node-sass

• Create our SCSS file under src/ styles.scss

.wrapper {
display: flex;
justify-content: center;
align-items: center;
}

• Import your .scss files in your React components like App.js

import React from "react";
import "./styles.scss";
const App: React.FC = () => {
...

• Testing Eslint :

ESLINT Warning

To start our React project, we will need to update our package.json

"scripts": {
 "start": "webpack-cli serve --mode=development --env development --open --hot",
 "build": "webpack --mode=production --env production --progress",
 "lint": "eslint src/**/*.{ts,tsx} --quiet --fix"
},

• run yarn lint for fixing automatically Any ESLint errors
• To start the project simply run :

yarn start 
or 
npm start

Terminal

Final Touches :

We will add Prettier to standardize our code

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
or 
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

we will create two files .prettierrcand .prettierignore

• .prettierrc

{
"singleQuote": true,
"tabWidth": 4,
"bracketSpacing": false,
"jsxBracketSameLine": true,
"trailingComma": "all",
"allowParens": "avoid"
}

• .prettierignore

node_modules
build

Add a few more settings to the .eslintrc file to integrate it with prettier.

...
 
 "plugins": [
.....
  "prettier" ],
"rules": {
...
  "prettier/prettier": [
    "error",
    {
      "endOfLine": "auto"
    }]
  },
....

Enable auto format in save for VSCODE

go to preferences -> Settings search for formatOnSave and check the checkbox

Or add this line to settings.json

"editor.formatOnSave": true,

This code can be found on GitHub

Thanks for reading, I hope you found this piece useful!

This has been developed by myself at eDonec