/reactease

React + Unocss template starter

Primary LanguageTypeScript

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.