react-ts-template

React-Ts-Template is an open-source front-end boilerplate built on React 19, TypeScript, and Vite that scaffolds a production-ready React project with routing, state management, request encapsulation, and code quality tooling already configured.

What is React-Ts-Template?

React-Ts-Template is a GitHub-hosted project template for starting React applications quickly; it takes a standard source layout and pre-configured tooling and outputs a runnable app with route lazy loading, route guards, a Zustand store, an Axios wrapper, and linting setup. It was created by huangmingfu as a modern replacement for create-react-app, which is no longer maintained. The template is published under the MIT license and is intended to be cloned and adapted for new projects.

Key Features

• React 19 + Vite 7 — The project runs on the latest React version with Vite as its build tool, delivering millisecond-level cold starts and fast hot module replacement.
• Router lazy loading and guards — The router layer includes lazy-loaded routes to reduce initial bundle size and a guard system to control access before a route is entered.
• Zustand global state — Example store code in the store folder shows cross-component state sharing with the lightweight Zustand library.
• Axios request encapsulation — The service folder wraps Axios to unify how HTTP requests and responses are handled, simplifying backend integration.
• SCSS + BEM styling — Styles use SCSS precompilation and BEM naming, with optional CSS modules (*.module.scss) supported for local scoping.
• Automatic import sorting — The prettier-plugin-sort-imports plugin is integrated so import statements are reordered automatically for readability.
• Code quality tooling — ESLint, Prettier, Stylelint, Commitlint and Husky are pre-configured to enforce consistent code style, commit messages, and git hooks.
• Utility library bundle — Includes ahooks and es-toolkit for React hooks and JavaScript functions, clsx for class name handling, SWR for data fetching with caching, and use-immer for immutable state updates.

Who is it for?

• Front-end developers who want a pre-configured React 19 + TypeScript foundation so they can skip repetitive setup and focus on features.
• Teams that need consistent code style and git commit conventions across members; the included linting and commit hooks enforce rules automatically.
• Developers migrating from create-react-app who are looking for a faster, Vite-based alternative with similar project structure and modern tooling.

What can you do with React-Ts-Template?

• Indie developers: scaffold a new side project in minutes and immediately have routing, state management, and API integration ready.
• Team leads: standardize the project structure, naming conventions, and code-quality gates for a front-end team.
• React learners: study a real-world organization of router lazy loading, route guards, Axios wrappers, Zustand stores, and custom hooks in one codebase.

How does it work?

To start a project, clone the repository, run pnpm install to install dependencies, then pnpm dev to start the development server. For production, run pnpm build:pro to build the app. The template also includes environment variable files, a local reverse proxy for development, and build-time code splitting configuration.

Pros and cons

Pros

• Ready-to-use setup with modern stack (React 19, TypeScript, Vite) and no build-configuration work.
• Full type safety with strict tsconfig options and centralized type definitions.
• Integrated code standards (ESLint, Prettier, Stylelint, Commitlint, Husky) keep the codebase consistent.

Cons

• Some third-party UI libraries do not yet support React 19, so you may need to verify package compatibility.
• There is no built-in keep-alive component; the README recommends manually lifting state or using CSS visibility to preserve component state.

FAQ

Can I use React 18 instead of React 19?

Yes. Run pnpm install [email protected] [email protected] to downgrade the project to React 18. The template does not rely on React 19-specific features.

How do I save component state when navigating away?

React does not provide a keep-alive mechanism like Vue. The template recommends lifting the state to a parent component or using CSS visibility to avoid unmounting the component, as explained in the README.

Is this template free to use?

Yes, the project is licensed under the MIT License, so you can freely use, modify, and distribute it.

What package manager is required?

The template uses pnpm for dependency management and scripts. The quick-start commands are pnpm install, pnpm dev, and pnpm build:pro.