Linting and MUI^5 support

25.06.2022 — Linting and MUI^5 support, 1st week, 2nd week — 1 min read

React 18 Migration

Because Radis is currently using an outdated version of React, we have chosen to upgrade to React 18.

1//pakage.json
2{
3"react": "^18.2.0",
4"react-dom": "^18.2.0"
5}

1//index.jsx
2import React from "react";
3import ReactDOM from "react-dom/client";
4import "./index.css";
5import App from "./App";
6import reportWebVitals from "./reportWebVitals";
7
8const root = ReactDOM.createRoot(
9  document.getElementById("root") as HTMLElement
10); //new way 
11root.render(
12  <React.StrictMode>
13    <App />
14  </React.StrictMode>
15);

Linting and type checking setup

In essence, there aren't any github actions set up in the Radis App that check the code on every push, and with bigger codebases, it's impossible to manually inspect the new code with each new push.

Since the Radis app uses Eslint to examine the linting, there are already preconfigured guidelines , making it less complicated.

First of all , we set up the node environment into the runner using github actions, then we execute the yarn lint command to verify the linting.

Because the Radis app uses TypeScript, so we check the types using yarn type-check.

1# linting check of radis-app
2name: Linting Check for Radis-App
3
4on:
5  push:
6    branches:
7      - main
8  pull_request:
9    branches:
10      - main
11
12jobs:
13  run-linters:
14    name: Run linters
15    runs-on: ubuntu-latest
16
17    steps:
18      - name: Check out Git repository
19        uses: actions/checkout@v2
20      - name: Set up Node.js
21        uses: actions/setup-node@v1
22        with:
23          node-version: 14
24
25      - name: Install Node.js dependencies
26        run: yarn install --frozen-lockfile
27
28      - name: Run linters
29        run: cd frontend && yarn lint
30      - name: type check
31        run: cd frontend && yarn type-check

MUI^5 Migration

The earlier version of the Radis app uses MUI 4, however because MUI 5 has some significant improvements, we chose to upgrade for improved support and additional features.

New features :

The sx prop (The material-ui team has replaced makeStyles with a much simpler and much better API in v5: sx prop)
Better TypeScript Support .

For More details :

https://blog.bitsrc.io/material-ui-5-is-coming-heres-what-i-m-excited-about-f04fd72713f5

Thanks .