-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
vairavel
committed
Apr 9, 2024
1 parent
dcac173
commit a236b54
Showing
1 changed file
with
43 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,30 +1,52 @@ | ||
# React + TypeScript + Vite | ||
# React Vite Redux Toolkit Redux Persist TypeScript Template | ||
This is a template repository that sets up a modern web application project using React, Vite for fast development, Redux Toolkit for state management, Redux Persist for persistent state storage, and TypeScript for type safety. | ||
|
||
# Features: | ||
React: A JavaScript library for building user interfaces. | ||
Vite: A blazing fast frontend build tool that significantly improves the frontend development experience. | ||
Redux Toolkit: A set of opinionated tools to simplify Redux state management, including utilities for creating actions, reducers, and store setup. | ||
Redux Persist: Allows for persisting Redux state to local storage, enabling the application to retain state across page reloads. | ||
TypeScript: A statically typed superset of JavaScript that helps catch errors early during development and improves code maintainability and readability. | ||
Usage: | ||
# Clone the Repository: | ||
``` | ||
git clone https://github.com/your-username/your-repository.git | ||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. | ||
``` | ||
# Install Dependencies: | ||
``` | ||
cd your-repository | ||
npm install | ||
Currently, two official plugins are available: | ||
``` | ||
|
||
- [@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 | ||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh | ||
# Start Development Server: | ||
|
||
## Expanding the ESLint configuration | ||
``` | ||
npm run dev | ||
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: | ||
``` | ||
|
||
- Configure the top-level `parserOptions` property like this: | ||
# Build for Production: | ||
|
||
```js | ||
export default { | ||
// other rules... | ||
parserOptions: { | ||
ecmaVersion: 'latest', | ||
sourceType: 'module', | ||
project: ['./tsconfig.json', './tsconfig.node.json'], | ||
tsconfigRootDir: __dirname, | ||
}, | ||
} | ||
``` | ||
npm run build | ||
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` | ||
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` | ||
- 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 | ||
``` | ||
# Structure: | ||
src: Contains the source code for the React application. | ||
features: Redux Toolkit slices for managing different parts of the application state. | ||
pages: React components representing different pages of the application. | ||
app.tsx: Root component where Redux store is configured and React Router is set up. | ||
store: Redux store configuration and related files. | ||
assets: Static assets like images, fonts, etc. | ||
index.html: HTML template for the application. | ||
vite.config.ts: Vite configuration file. | ||
|
||
# Contributing: | ||
Contributions are welcome! If you have any suggestions, bug fixes, or feature implementations, feel free to open an issue or submit a pull request. | ||
|
||
License: | ||
This project is licensed under the MIT License. | ||
|
||
Feel free to customize this template description according to your specific project's details and requirements. |