lemon-template-react

An mobile web apps template based on the React ecosystem.

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
lemon-template-uniapp - An mobile web apps template based on the UniApp 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

sankeyangshu/lemon-template-react