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, Vant4, Pinia, 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
• 🎨 Vant 4 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