react18-starter
v1.0.12
Published
Start a Vite React TypeScript project in few second!
Downloads
6
Maintainers
Readme
Ryan's React18 Awesome Starter
Features
- [x] ⚙️ Small & Fast Bundler (Vite)
- [x] 🗝️ Typed Programming (Typescript)
- [x] 🕋 Simple Store (Zustand)
- [x] 📙 Configure Formatter (ESLint + Prettier)
- [x] 🧵 Built-in Component & Layout
- [x] 🧩 High Order Component
- [x] ✨ Setting Reset Style
- [x] ⚡️ Setting Style Set
- [x] 🗂️ Page Helmet SEO
- [x] 📍 Absolute Path
- [ ] 📱 Check Device
- [ ] 🪄 Theme Mode
Frameworks
- Bundler : Vite
- Core : React18
- Store : Zustand
Code Structure
- Static(public)
- Root(src)
- ⎣ components - atomic stateless components
- ⎣ containers - stateful components
- ⎣ constants - static resource
- ⎣ interface - interfaces
- ⎣ layouts - layouts
- ⎣ router - routers
- ⎣ libs - store, hooks, utils
- ⎣ styles - style set
Getting Started
1) Installation
npx react18-starter my-project
cd my-project
2) Run development
npm run dev
Using with Style set
const Style = styled.div`
// flex set(justify-content, align-items, flex-direction)
${({ theme }) => theme.flexSet('center', 'center', 'column')};
// box set(width, height, border-radius)
${({ theme }) => theme.boxSet('00px', '00px', '00px')};
// color set(color, background-color)
${({ theme }) => theme.colorSet('white', 'black')};
// background set(url, object-fit)
${({ theme }) => theme.backgroundSet('URL','contain')};
// font set(font-size, font-weight, line-height)
${({ theme }) => theme.fontSet(00, 000, 00)};
`