React Template

Overview

The React 单页应用模板 (React Single Page Application Template) is a base template for personal projects. It eliminates the tedious process of initializing a project by providing a pre-configured setup with several frameworks and libraries including React, TypeScript, TailwindCSS, React Router, Ant Design, AHooks, PNPM, and Vite. It also supports Jest for unit testing and React Testing Library for component testing, as well as Github Actions for deployment and Github Pages for easy access.

Features

• React V18: Uses the latest version of the React library.
• TypeScript V5: Enables static type checking and provides enhanced tooling for React development.
• TailwindCSS V3: A utility-first CSS framework for quickly building custom user interfaces.
• React Router V6: A routing library for declarative routing in React applications.
• Ant Design V5: A popular UI library with a set of customizable and well-designed React components.
• AHooks V3: A set of reusable React hooks for common functionalities.
• PNPM V7: A fast and disk space-efficient package manager for Node.js projects.
• Vite V4: A fast and lightweight build tool for modern web applications.
• Jest V29: A JavaScript testing framework for unit testing React components.

Installation

1. Initialize the project by using the Vite CLI to create a new application template. Provide the directory name, choose React and TypeScript options, then navigate to the created directory.

vite init
cd your-project-name
code .

2. Configure npm source by creating a .npmrc file in the root directory and adding the following content:

registry=https://registry.npm.taobao.org/

3. Install dependencies using PNPM:

pnpm install

4. Initialize Git configuration in the project directory:

git init

5. Adjust TypeScript configuration by removing tsconfig.node.json file and modifying tsconfig.json file as described in the documentation.
6. Initialize Github Actions configuration by modifying the baseURL in vite.config.ts file and adding the deploy.yml file in the .github/workflows folder. Follow the instructions in the documentation to set up Github Actions and obtain an access token for deployment.
7. Set the repository as a template repository to easily create new repositories based on this template.
8. Add TailwindCSS support by installing the required dependencies and modifying the configuration files as described in the documentation.
9. Integrate react-router by installing the required dependencies and creating/configuring the router in src/routers/index file. Replace the main component in the entry file (main.tsx) with the RouterProvider component and set the router property to the created router object.
10. Incorporate Ant Design by installing the required dependencies and configuring internationalization and theme settings in the entry component. Adjust the CSS classes to avoid interference with TailwindCSS styles.
11. Enable automated testing support by installing Jest, initializing the Jest configuration file, and configuring Babel.

Summary

The React 单页应用模板 is a comprehensive template for developing React-based single page applications. It provides a pre-configured setup with popular frameworks and libraries, making the initialization process quick and easy. It also offers additional features like testing support and deployment automation through Github Actions. With support for internationalization, theme customization, and a wide range of customizable components, this template serves as a solid foundation for personal projects.