https://github.com/ryan-ahn/npm-react18-starter

React18 프로젝트 시작을 위한 NPM 패키지
https://github.com/ryan-ahn/npm-react18-starter

react vite zustand

Last synced: 3 days 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 (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-06T00:57:23.000Z (10 months ago)
• Last Synced: 2024-12-30T08:37:05.204Z (12 days 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

![Author](https://img.shields.io/badge/Author-ryan-orange.svg)

![License](https://img.shields.io/badge/License-MIT-blue.svg)

![Last Commit](https://img.shields.io/github/last-commit/ryan-ahn/npm-react18-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)};

`

```