alisajadian / react-typescript-redux-mui

react, typescript, redux, material-ui, react-pro-sidebar, responsive design, dark mode, screen direction

Pro Starter Template

For implementing this project I tried to use the new technologies like:

• react: 18.0.2
• typescript: 4.9.4
• @mui/material: 5.11.6
• redux": 4.2.0
• react-router-dom: 6.7.0
• react-chartjs-2: 5.2.0
• react-pro-sidebar: 1.0.0

Installation:

npm install -global react-create-app

Create react typescript app:

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

Intall react-router-dom pakcages installation:

npm install react-router-dom @types/react-router-dom

Intall mui (Material UI) pakcages installation:

1. Use emotion for styling:

   • npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

2. Use styled component for styling:

   • npm install @mui/material @mui/icons-material @mui/styled-engine-sc styled-components

Intall redux pakcages installation:

npm install redux react-redux redux redux-thunk @types/redux @types/react-redux @types/redux @types/redux-thunk

Intall react-pro-sidebar pakcage installation:

npm install react-pro-sidebar

Intall react-chartjs2 pakcage installation:

npm install react-chartjs2

👍

Resources:

• https://react-typescript-cheatsheet.netlify.app/docs/basic/setup
• https://mui.com/material-ui/getting-started/templates/
• https://react-redux.js.org/tutorials/typescript-quick-start
• https://www.npmjs.com/package/react-pro-sidebar
• https://react-chartjs-2.js.org/