|
1 |
| -# React + TypeScript + Vite |
| 1 | +# Speedometer 3.0: TodoMVC with React 18 / Material UI / React Router |
2 | 2 |
|
3 |
| -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
| 3 | +## Description |
4 | 4 |
|
5 |
| -Currently, two official plugins are available: |
| 5 | +This application uses React 18.0.0 to implement a todo application. |
6 | 6 |
|
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. |
9 | 10 |
|
10 |
| -## Expanding the ESLint configuration |
| 11 | +## Implementation details |
11 | 12 |
|
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 |
13 | 17 |
|
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. |
15 | 30 |
|
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 |
| -}; |
26 | 31 | ```
|
| 32 | +* Node (min version: 18.13.0) |
| 33 | +* NPM (min version: 8.19.3) |
| 34 | +``` |
| 35 | + |
| 36 | +## Local preview |
27 | 37 |
|
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