Skip to content

Commit b3d4d25

Browse files
committed
Update the README file
1 parent 12875ea commit b3d4d25

File tree

1 file changed

+34
-21
lines changed
  • resources/tentative/todomvc-react-18

1 file changed

+34
-21
lines changed
Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,43 @@
1-
# React + TypeScript + Vite
1+
# Speedometer 3.0: TodoMVC with React 18 / Material UI / React Router
22

3-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
3+
## Description
44

5-
Currently, two official plugins are available:
5+
This application uses React 18.0.0 to implement a todo application.
66

7-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
7+
- [React](https://react.dev/) is a JavaScript library for creating user interfaces.
8+
- [Material UI](https://mui.com/) is a UI React-based library that makes it easier to implement a consistent style in an application.
9+
- [React Router](https://reactrouter.com/) is a Router for React, that is a library that handles URL changes.
910

10-
## Expanding the ESLint configuration
11+
## Implementation details
1112

12-
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13+
React:\
14+
Model: /logic/todo-model.js
15+
View: /components/*
16+
controller: The React Router configuration in /components/App.tsx
1317

14-
- Configure the top-level `parserOptions` property like this:
18+
MVC:\
19+
Model: maintains the data and behavior of an application\
20+
View: displays the model in the ui\
21+
Controller: serves as an interface between view & model components
22+
23+
## Built steps
24+
25+
To build the static files, this application utilizes vite. It minifies and optimizes output files and copies all necessary files to a `dist` folder.
26+
27+
## Requirements
28+
29+
The only requirement is an installation of Node, to be able to install dependencies and run scripts to serve a local server.
1530

16-
```js
17-
export default {
18-
// other rules...
19-
parserOptions: {
20-
ecmaVersion: "latest",
21-
sourceType: "module",
22-
project: ["./tsconfig.json", "./tsconfig.node.json"],
23-
tsconfigRootDir: __dirname,
24-
},
25-
};
2631
```
32+
* Node (min version: 18.13.0)
33+
* NPM (min version: 8.19.3)
34+
```
35+
36+
## Local preview
2737

28-
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
29-
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
30-
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
38+
```
39+
terminal:
40+
1. npm install
41+
2. npm run dev
42+
3. Then open http://localhost:5173 in your browser.
43+
```

0 commit comments

Comments
 (0)