Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/minsoo-web/react-boilerplate
typesciprt, react-router (v6), redux-toolkit, storybook, craco, styled-components 를 이용한 셋업 환경입니다.
https://github.com/minsoo-web/react-boilerplate
boilerplate craco react react-router-v6 redux reduxtoolkit storybook styled-components typescript
Last synced: 24 days ago
JSON representation
typesciprt, react-router (v6), redux-toolkit, storybook, craco, styled-components 를 이용한 셋업 환경입니다.
- Host: GitHub
- URL: https://github.com/minsoo-web/react-boilerplate
- Owner: minsoo-web
- Created: 2022-01-26T02:38:30.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-01-27T09:14:10.000Z (about 3 years ago)
- Last Synced: 2025-01-23T01:49:53.952Z (29 days ago)
- Topics: boilerplate, craco, react, react-router-v6, redux, reduxtoolkit, storybook, styled-components, typescript
- Language: TypeScript
- Homepage:
- Size: 21.6 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Boilerplate
## 🤔 What is it ?
This Boilerplate is includes many config setup for useful developing React web project.
Included package and setup is like below.
- typescript
- react-router (v6)
- styled-components
- storybook
- testing-library/react
- axios / http-proxy-middleware (proxy config)
- redux (reduxjs/toolkit)
- craco (path alias)
🙇♂️ _I hope you like this folder structure and useful this boilerplate for saving time project init setup_
## 🗂 Folder Structure
```txt
./src
├── @types
│ └── index.d.ts
├── App.tsx
├── assets
│ ├── fonts
│ ├── images
│ ├── styles
│ └── svgs
├── components
│ ├── Auth # example folders
│ └── Common
│ └── MButton
│ ├── MButton.stories.tsx # storybook
│ ├── MButton.style.ts # styled-components
│ ├── MButton.test.tsx # test file
│ ├── MButton.tsx # tsx file
│ ├── MButton.type.ts # (if needed) type defefine
│ └── index.ts
├── constants
│ ├── Colors.ts
│ └── Fonts.ts
├── hooks
│ ├── index.ts
│ └── useSomeHook.tsx # example file
├── index.tsx
├── reportWebVitals.ts
├── router
│ ├── RootRouter.tsx
│ └── index.ts
├── screens
│ ├── Auth
│ ├── Home
│ └── index.ts
├── setupProxy.js
├── setupTests.ts
├── store
│ ├── ducks
│ │ └── auth
│ │ ├── authSlice.ts
│ │ ├── authThunk.ts
│ │ └── index.ts
│ ├── hooks.ts
│ ├── index.ts
│ └── rootReducer.ts
├── stories
│ ├── Introduction.stories.mdx
│ └── assets
└── utils
├── AddComma.ts # example file
└── Size.ts
```
## 🤷♂️ What` the difference ?
Many Project folder structure is not my style.
So I made this structure and difference is below.
1. One File, One Role
I don`t like to combine styled-component with tsx file.
Since it is too long to read, So I devided styled-component with tsx file. 🔫 Gang
2. Using ducks structure for redux-toolkit
Same reason here, I devided thunk file and slice file.
And combined this files for one module
3. Clean Import, Easy Find File
Many example and existing react project use nameing `index.tsx` like `SomeComponents/index.tsx`.
It is reason why import easy, but find file for name was complicated for me.
So I made `index.ts` file for one component folder, and named tsx file using component name.
e.g
_as is_
```txt
MButton
└── index.tsx
```
_to be_
```txt
MButton
├── MButton.style.ts
├── MButton.tsx
└── index.ts
```
### Useful tips for devided styled-components
Devided styled-components file cause writing so many import line
e.g
```ts
import {
Container,
SomeWrapper,
SomeTitle,
SomeImageWrapper
// ... blah blah
} from "./SomeComponents.style.ts";
```
I recommend to use `*` with `as`
to be
```ts
import * as Styled from "./SomeComponents.style.ts";
const SomeComponents = () => {
return (
hi
);
};
```
## 👨💻 How to use
1. clone this project
```bash
git clone https://github.com/minsoo-web/react-boilerplate.git
```
2. install package
> before you start this package install, if you use npm rather than use yarn
> I recommend you should remove yarn.lock file
```bash
# go into clone folder before installing the package
# e.g cd react-boilerplate
# using yarn
yarn install
or
# using npm
npm install
```
3. Let`s get it started
```bash
# using yarn
yarn start
or
# using npm
npm run start
```