https://github.com/ryan-ahn/npm-react18-starter
React18 프로젝트 시작을 위한 NPM 패키지
https://github.com/ryan-ahn/npm-react18-starter
react vite zustand
Last synced: 4 months ago
JSON representation
React18 프로젝트 시작을 위한 NPM 패키지
- Host: GitHub
- URL: https://github.com/ryan-ahn/npm-react18-starter
- Owner: ryan-ahn
- License: mit
- Created: 2023-07-26T16:17:33.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-06T00:57:23.000Z (over 2 years ago)
- Last Synced: 2025-11-27T09:58:49.537Z (7 months ago)
- Topics: react, vite, zustand
- Language: TypeScript
- Homepage:
- Size: 332 KB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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
```shell
npx react18-starter my-project
cd my-project
```
### 2) Run development
```shell
npm run dev
```
## Using with Style set
```javascript
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)};
`
```