Reactease

Reactease is a react starter template with Vite, which means "Create react project with ease".(inspired by vitesse)

Features

• ⚡ Vite, pnpm
• 🔥 React
• ⚓ React Router
• 🎨 Unocss
• 🏠 Valtio, A user-friendly and concise state management using proxy
• 🎈 Iconify for icons（Icon sets)
• 💪 TypeScript, of course
• 🚀 Using vite-plugin-react-swc, faster.
• 😋 ESLint with @antfu/eslint-config
• 📁 File path alias ('~/*' -> src/*)

About unocss.config.ts

You can use many atomic css features by using the UnoCSS Packages

1. presetAttributify

   <h2
     m="x-2 y-1"
     bg="gray-400 hover:gray-200"
     text="2xl primary"
     font="base bold"
   >
     Attributify Mode
   </h2>

2. presetWind Integrated some features of TaildwindCSS and WindiCSS.

   <!-- lt-sm means screen less then 640px -->
   <div className='lt-sm:bg-red-200 at-sm:gray-400 sm:bg-blue-200'></div>

3. transformerVariantGroup

   <div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>

Install

Copy the command below and run it.

npx degit hacker-c/reactease my-react-app

Then install the deps.

cd my-react-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm

Usage

Development

Just run and visit http://localhost:3333

pnpm dev

Build

To build the App, run

pnpm build

Deploy

You can try netlify or vercel or other ways.