XÂY DỰNG DỰ ÁN TIKTOK SỬ DỤNG REACTJS

Package Support

1. Create React App Webpack || Vite Flash here
2. Prettier Formatter Code Beautiful here
3. SASS/SCSS here
4. Reset CSS Normalize here
5. React Router DOM here
6. Classnames here
7. Fontawesome here
8. Babel here
9. Tippyjs React here
10. Debounce here
11. Axios here

Remove React.FC from Typescript template

Create React App Downsides to React.FC/React.FunctionComponent

Installation

$ npm install
$ npm run dev
$ npm run build

Using Make

$ make dev
$ make build

Git

$ npx git-cz --allow-empty

Docker

$ docker run -d -p 3000:3000 vite

Debugger

setTimeout(()=> {
    debugger
},3000)

Structure Tree

root
.
└── src
     ├── assets
     ├── components
     |      ├── AccountItem
     │      │        ├── AccountItem.module.scss
     │      │        └── AccountItem.tsx
     │      │ 
     │      ├── Button
     │      │        ├── Button.module.scss
     │      │        └── Button.tsx
     │      │ 
     │      ├── GlobalStyles
     │      │        ├── GlobalStyles.scss
     │      │        └── GlobalStyles.tsx
     │      │ 
     │      ├── Icons
     │      │        └── Icon.tsx
     │      │ 
     │      ├── Image
     │      │        ├── Image.module.scss
     │      │        └── Image.tsx
     │      │ 
     │      ├── Popper
     │      │      ├──Menu
     │      │      │      ├── Header.tsx
     │      │      │      ├── Menu.module.scss
     │      │      │      ├── Menu.tsx
     │      │      │      └── MenuItem.tsx
     │      │      ├── Popper.module.scss
     │      │      └── Wrapper.tsx
     │      │
     │      │
     │      ├── SuggestedAccounts
     │      │               ├── AccountPreview
     │      │               │               ├── AccountPreview.module.scss        
     │      │               │               └── AccountPreview.tsx
     │      │               │ 
     │      │               ├── SuggestedAccounts.module.scss
     │      │               └── SuggestedAccounts.tsx
     │      │
     │      │
     │      ├── Modal
     │      │       ├── Modal.module.scss
     │      │       └── Modal.tsx
     │      │
     │      │ 
     │      └── Portal
     │              └── Portal.tsx
     │
     │
     │
     │
     │
     │
     │
     │
     │
     │
     │
     ├── config
     │      └── routes.ts
     ├── data
     │      └── language.ts
     ├── hooks
     │      └── useDebounce.ts  
     ├── layouts
     │      ├── components
     │      │        ├── Header
     │      │        │       ├── Header.module.scss
     │      │        │       └── Header.tsx
     │      │        ├── Search
     │      │        │       ├── Search.module.scss
     │      │        │       └── Search.tsx
     │      │        └── Sidebar
     │      │                ├── Menu
     │      │                │      ├── Menu.module.scss
     │      │                │      └── Menu.tsx
     │      │                ├── Sidebar.module.scss 
     │      │                └── Sidebar.tsx
     │      │
     │      ├── DefaultLayout
     │      │           ├── DefaultLayout.module.scss
     │      │           └── DefaultLayout.tsx
     │      │
     │      └── HeaderOnly
     │                  └── HeaderOnly.tsx
     │
     ├── pages
     │       ├── Following
     │       │       └── Following.tsx
     │       ├── Home
     │       │       └── Home.tsx
     │       ├── Live
     │       │       └── Live.tsx
     │       ├── Profile
     │       │       └── Profile.tsx
     │       ├── Search
     │       │       └── Search.tsx
     │       └── Upload
     │               └── Upload.tsx
     ├── routes
     │       └── routes.ts
     ├── services
     │       └── searchService.ts
     ├── types
     ├── utils
     │       └── httpRequest.ts
     ├── App.tsx
     ├── favicon.io
     ├── main.tsx
     └── vite-en.d.ts

      │   ├──  └──

https://tree.nathanfriend.io/