lemon-template-react

English / 简体中文

An mobile web apps template based on the React ecosystem.

Docs / Feedback

---

Introduction

🚀🚀🚀 lemon-template-react is built using the latest technologies, including React18, Vite6, react-vant, Zustand, TypeScript, and UnoCSS. It integrates features like Dark Mode, system theme colors, and Mock data.

You can directly start developing your business logic on this template! Hope you enjoy it. 👋👋👋

Note

If this project is helpful to you, please click the "Star" button in the top-right corner. Thank you!

Preview

👓 Click Demo (Switch to mobile view on PC browsers)

Other Templates

• lemon-template-vue - A mobile web apps template based on the Vue 3 ecosystem

Features

• ⚡️ Developed with React + Hooks
• ✨ Uses Vite 6 as the development and build tool (includes Gzip packaging, TSX syntax, proxy support, etc.)
• 🍕 Fully integrates TypeScript
• 🍍 Use Zustand for state management, lightweight, simple and easy to use
• 📦 ahooks High quality and reliable React Hooks library
• 🎨 react-vant component library
• 🌀 UnoCSS for instant atomic CSS
• 👏 Integrates multiple icon solutions
• 🌓 Supports Dark Mode
• 🌍 Multi-language support with i18n
• 🔥 ECharts for data visualization, with useECharts Hooks
• ⚙️ Unit testing using Vitest
• ☁️ Axios encapsulation
• 💾 Local Mock data support
• 📱 Browser compatibility with viewport vw/vh units for layouts
• 📥 Gzip compression for packaged resources
• 🛡️ Splash screen animation for first load
• 💪 Eslint for code linting, with Prettier for formatting
• 🌈 Uses simple-git-hooks, lint-staged, and commitlint for commit message standards

Prerequisites

Familiarity with the following concepts will help you use this template effectively:

• React - Familiar with React basic syntax
• Vite - Understand Vite features
• Zustand - Proficient in using Zustand
• TypeScript - Master basic TypeScript syntax
• React-Router - Understand React-Router usage
• Icones - Recommended icon library for the project, but IconSVG is also an option
• UnoCSS - High-performance and flexible atomic CSS engine
• ahooks - A reliable and high-quality React Hooks library
• React Vant - Lightweight and reliable mobile React component library
• ECharts5 - Familiar with basic ECharts usage
• Mock.js - Understand basic Mock.js syntax
• ES6+ - Proficient in ES6+ syntax

Environment Setup

Ensure the following tools are installed locally: Pnpm, Node.js, and Git.

• Use pnpm >= 8.15.4 to avoid dependency installation and build errors.
• Node.js version 18.x or above is required. Recommended: ^18.18.0 || >=20.0.0.

VSCode Extensions

If you use VSCode (recommended), install the following extensions for improved efficiency and code formatting:

• UnoCSS - UnoCSS support
• DotENV - .env file highlighting
• Error Lens - Better error visualization
• EditorConfig for VS Code - Maintain consistent coding styles across IDEs
• ESLint - Script linting
• i18n Ally - All-in-one i18n support
• JavaScript and TypeScript VSCode Snippets - Visual Studio Code snippets for JavaScript and TypeScript
• React Collection VSCode Snippets - A React Code Snippets Extension

Usage

Use the Scaffold

In development

GitHub Template

Use this template to create a repository

Clone

# Clone the project
git clone https://github.com/sankeyangshu/lemon-template-react.git

# Enter the project directory
cd lemon-template-react

# Install dependencies (use pnpm)
pnpm install

# Start the development server
pnpm dev

# Build for production
pnpm build

Git Commit Guidelines

Commit Standards

The project enforces Git commit messages using simple-git-hooks and commitlint, adhering to the widely adopted Angular guidelines.

• feat: Add new features
• fix: Fix bugs
• docs: Documentation changes
• style: Code formatting (does not affect functionality, e.g., spacing, semicolons, etc.)
• refactor: Code refactoring (neither bug fixes nor new features)
• perf: Performance optimizations
• test: Add or update test cases
• build: Changes to build process or external dependencies (e.g., updating npm packages, modifying webpack configuration)
• ci: Changes to CI configuration or scripts
• chore: Changes to build tools or auxiliary libraries (does not affect source files or tests)
• revert: Revert a previous commit

Community

You can use issues to report problems or submit a Pull Request.

Browser Support

• For local development, we recommend using the latest version of Chrome. Download.
• The production environment supports modern browsers. IE is no longer supported. For more details on browser support, check Can I Use ES Module.

IE	Edge	Firefox	Chrome	Safari
not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions

License

MIT License © 2023-PRESENT sankeyangshu