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 React19, Vite7, TanStack Router, TanStack Query, Daisyui, Zustand, TypeScript, and Tailwindcss V4. 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 Vite7 as the development and build tool (includes Gzip packaging, TSX syntax, proxy support, etc.)
• 🍕 Fully integrates TypeScript
• 🚦 Uses TanStack Router for routing management, providing a type-safe routing system
• 🔄 Uses TanStack Query for server state management, simplifying data fetching and caching
• 🍍 Uses Zustand for state management, lightweight, simple and easy to use
• 📦 @reactuses/core High quality and reliable React Hooks library
• 🎨 Daisyui component library
• 🌀 Tailwindcss for instant atomic CSS engine
• 👏 Integrates multiple icon solutions
• 🌓 Supports Dark Mode
• 🌍 Multi-language support with i18n
• 🔥 Integrates ECharts for data visualization, with useECharts Hooks encapsulation
• ⚙️ Uses Vitest for unit testing
• ☁️ Axios encapsulation
• 💾 Local Mock data simulation support
• 📱 Browser compatibility
• 📥 Gzip compression for packaged resources
• 🛡️ First screen loading animation
• 💪 Integrates Eslint code validation standards, with Prettier as the default code formatter
• 🌈 Uses simple-git-hooks, lint-staged, and commitlint to standardize commit messages

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
• TanStack Router - Familiar with TanStack Router basic usage
• Icones - Recommended icon library for the project, but IconSVG is also an option
• Tailwind CSS - High-performance and extremely flexible instant atomic CSS engine
• @reactuses/core - A high-quality and reliable React Hooks library
• Daisyui - Tailwind CSS plugin for faster, cleaner, and simpler Tailwind CSS development
• ECharts6 - 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.

• Recommended to use pnpm>=8.15.4, otherwise dependencies may not install properly, causing build errors.
• Node.js version requirement is 18.x or above. Recommended: ^18.18.0 || >=20.0.0.

VSCode Extensions

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

• Tailwind CSS IntelliSense - Tailwind CSS IntelliSense plugin
• 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

# Copy the command - 'project' is your project name
pnpm create lemon project -t lemon-react

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 - recommended to 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