Skip to content
GSoc Blog [Radis-App]

Linting and MUI^5 support

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

React 18 Migration

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

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

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
5 push:
6 branches:
7 - main
8 pull_request:
9 branches:
10 - main
13 run-linters:
14 name: Run linters
15 runs-on: ubuntu-latest
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
25 - name: Install Node.js dependencies
26 run: yarn install --frozen-lockfile
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 :

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

For More details :

Thanks .

© 2022 by GSoc Blog [Radis-App]. All rights reserved.
Theme by LekoArts