This template provides a minimal setup to get React working in Vite with Hot Module Replacement (HMR) and includes some ESLint rules for code quality.
Currently, two official plugins are available:
- @vitejs/plugin-react: Uses Babel for Fast Refresh.
- @vitejs/plugin-react-swc: Uses SWC for Fast Refresh.
For production-level applications, it’s recommended to enhance the ESLint configuration to enable type-aware linting rules.
-
Configure the top-level
parserOptionsproperty as follows:export default tseslint.config({ languageOptions: { // other options... parserOptions: { project: ['./tsconfig.node.json', './tsconfig.app.json'], tsconfigRootDir: import.meta.dirname, }, }, })
-
Replace
tseslint.configs.recommendedwith either:tseslint.configs.recommendedTypeCheckedtseslint.configs.strictTypeChecked
-
Optionally, add
...tseslint.configs.stylisticTypeCheckedfor style-based lint rules. -
Install eslint-plugin-react and update the ESLint configuration:
// eslint.config.js import react from 'eslint-plugin-react'; export default tseslint.config({ // Set the React version settings: { react: { version: '18.3' } }, plugins: { // Add the react plugin react, }, rules: { // other rules... // Enable its recommended rules ...react.configs.recommended.rules, ...react.configs['jsx-runtime'].rules, }, });
- User-friendly interface for task management.
- Global state management using React Context API.
- Form handling with React Hook Form and validation via Yup.
- Responsive design with Material UI.
- Optimized performance with lazy loading of components.
The application uses the React Context API for global state management, allowing for centralized state management and easy sharing of state across components.
Custom hooks are utilized to encapsulate logic and state management, enhancing code reusability. Key hooks include:
- useTasks: A custom hook for managing task-related state and actions.
Lazy loading is implemented to improve performance by loading components only when needed, enhancing the user experience.
- Use custom hooks to encapsulate common logic and avoid duplication.
- Favor component composition over inheritance.
- Organize your project by feature or functionality.
- Maintain consistent naming conventions for better readability.
To get started with the project, clone the repository and install the dependencies:
git clone https://github.com/AdeelKamalMalik/react-template.git
cd react-template
npm installAfter installing the dependencies, you can start the development server with the following command:
npm run devOpen your browser and navigate to http://localhost:3000 (or the port specified in your Vite configuration) to view the application.
To ensure code quality and functionality, unit tests have been added using Jest and React Testing Library.
-
To run the test cases, execute the following command in the project directory:
npm run test -
This command runs all the test cases and displays the results in the terminal.
The application uses Jest for running unit tests, and React Testing Library for testing React components. Ensure that tests are created for all critical components to maintain robust code quality.
npm install --save-dev jest @testing-library/react @testing-library/jest-dom- Make sure you have all test dependencies installed before running tests.
By following the steps outlined in this README, you can easily install, run, and test the project. Happy coding!