---
title: made by Oscar
image: https://blog.wildix.com/wp-content/uploads/2020/06/react-logo.jpg
---
# From Zero to know what React is
---
#### how to create React app ?
1. 去你想add file 既目標路徑
# Create Project
用Vite黎start your project
[Vite]([Vitejs.dev/guide/](https://vitejs.dev/guide/))
:::success
npm create vite@latest
:::
:::success
1. React
2. TypeScript + SWC
:::
:::success
1. npm install
2. npm run dev
:::
* name can no longer contain capital
## 搞掂
terminal有suggest你run 乜野command，留心睇
### 見到呢頁代表OK
1. App.css , 入面既野all delete
2. index.css, 入面既野all delete
3. App.tsx ，<>empty tag 入面既野alldelete
## Before delete
## After delete - delete< div > 轉 < >
main.tsx入面包住App.tsx
App.tsx return 出去，return去邊度？
main.tsx -> 入面render緊app既野
Define component :
function_Component_Example:
class_Component_Example :
---
### when we call API in React will have 5 steps :
1. Construct the UI with fake data
2. Download the JSON file and import as a mockData.
3. Construct the data ts file with "export interface".
4. Add the mock data to UI.
5. Use axios to call the API and add the response data to the UI.
---
## React JS Roadmap
### Foundation
#### The First Step
``` mermaid
graph TD;
create-react-app-->Components;
Components-->Functional_Components;
Functional_Components-->JSX;
JSX-->Props_&_State;
Props_&_State-->Hooks:useState,useEffect;
Hooks:useState,useEffect-->Conditional_Rendering;
Conditional_Rendering-->List_Keys;
List_Keys-->Events_Input_Handling;
```
---
#### The React Ecosystem
```mermaid
graph TD;
Routing-->React_Router;
Routing-->State_Management;
State_Management-->Styling;
Styling-->HTTP;
HTTP-->Forms;
State_Management-->Context_API;
Context_API-->Redux;
Styling-->Styled_Components;
Styled_Components-->Tailwind_CSS;
HTTP-->Using_Fetch_In_React;
Using_Fetch_In_React-->Axios;
Forms-->Hook_Form_Handling;
Hook_Form_Handling-->Formik;
```
---
#### The Advanced Topics
```mermaid
graph TD;
Advanced_Hooks(useRef , useMemo,useCallback...)-->Refs;
Refs-->Higher_Order_Components;
Higher_Order_Components-->Error_Boundaries;
Error_Boundaries-->Practice;
```
---
:::spoiler HTML
- **介紹 HTML**
- HTML 代表HyperText Markup Language(超文本標記語言)，用黎創建同設計網頁既標記語言。
- **HTML 基本結構**
- HTML 基本Format：
```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
- **常見 HTML 標籤和屬性**
- 常見 HTML 標籤：`<div>`, `<p>`, `<h1>`, `<a>`, `<img>`, `<ul>`, `<ol>`, `<li>`, `<table>`, `<form>`, 等。
- HTML 標籤屬性：例如 `src`（圖片的來源）、`href`（超鏈接的目的地）、`alt`（圖片的替代文本）等。
- **HTML CheatSheet**
- [HTML CheatSheet 中文](/EunYmL1gRjCH9J5d0JhtQA)。
- [HTML](/3EIxJQClSxq6X-oOU3XG1Q)
:::
:::spoiler CSS
- **CSS 是什麼？**
- CSS 意為層疊樣式表，用於定義網頁的外觀和樣式，與 HTML 一同使用。
- **CSS 選擇器和屬性**
- CSS 選擇器：選擇器用於選擇要樣式化的 HTML 元素，如 `.class`、`#id`、元素名稱等。
- CSS 屬性：例如 `color`（文字顏色）、`font-size`（字體大小）、`margin`（外邊距）等。
- **布局和盒模型**
- CSS 布局：常見的布局方法，包括流式布局、浮動、彈性布局等。
- 盒模型：元素由內容、內邊距、邊框和外邊距組成。
- **Flexbox 和 Grid 布局**
- Flexbox 布局：用於設計一維排列的佈局，例如行或列。
- Grid 布局：用於設計二維排列的佈局，可以更靈活地定義行和列。
- [CSS](/XX0NqV6STcGi9sYSEO0DOA)
- [A guide of flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [A guide of Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
- [CSS Cheat Sheet](https://www.instagram.com/p/Cz9i7IKNYp9/?utm_source=ig_web_copy_link)
- **媒體查詢 (Media Queries)**
- Media Queries 允許根據設備特性（如視口寬度、裝置類型）應用不同的樣式。
- **作用：** 主要用於實現響應式網頁設計，使網頁能夠適應不同的裝置和屏幕大小，提供更好的使用體驗。
- ### Media Queries 的基本語法
```css
@media Media_Type and (條件) {
/* 應用於符合條件的樣式 */
}
```
常見的Media_Type
all： 所有Media_Type。
print： 打印機和打印預覽。
screen： 顯示器屏幕。
speech： 螢幕閱讀器等發聲設備。
- 範例：
```css
@media screen and (min-width: 768px) and (max-width: 1200px) {
/* 寬度在 768px 到 1200px 之間時應用的樣式 */
}
```
```css
@media screen and (orientation: portrait) {
/* 縱向時應用的樣式 */
}
```
- **響應式圖像**
- `max-width: 100%` 保證圖片在不拉伸尺寸的情況下保持適應屏幕大小。
- `srcset` 屬性提供不同解析度的圖像，讓瀏覽器根據需要選擇。
- **Flexbox 和 Grid 既High-level Usage**
- 進階的 Flexbox 佈局：運用 `flex-grow`、`flex-shrink`、`flex-basis` 等屬性進行更細緻的佈局。
- Grid 布局進階技巧：使用 `grid-template-areas`、`grid-gap`、`grid-template-columns` 等進階屬性。
:::
:::spoiler JS
- **JavaScript 係乜？**
- JavaScript 是一種動態、直譯的程式語言，用於使網頁交互，實現動態效果。
- [JavaScript](/kOtqnQWxSB25uENzw8pX7Q)
- **變量、數據類型和運算符**
- `var`、`let` 和 `const` 變數聲明的不同方式。
- var唔用，用let取代
- const 常數
- 基本數據類型：Number、String、Boolean、Null、Undefined、Array、Object。
- 運算符：算術、比較、邏輯運算符等。
- **條件語句和迴圈**
- `if`、`else`
- `for`、`while`
- **函數和事件處理**
- 函數的定義和呼叫：重用程式碼的方法。
- 事件處理：應對使用者互動的方式。
- **DOM 簡介**
- DOM 是文檔物件模型，通過 JavaScript 與 HTML 文檔互動的接口。
- [JS Event & DOM](/bhasZoJ_TFWnU-60a0FU4A)
- **選擇元素和修改內容**
- `getElementById`、`getElementsByClassName`、`querySelector` 等方法選擇 DOM Elements。
- 修改元素內容：使用 `innerHTML`、`innerText` 等屬性。
- **創建和刪除元素**
- `createElement` 和 `appendChild`：動態創建和添加元素。
- `removeChild`：刪除元素。
- **事件處理進階**
- 事件冒泡和捕獲：理解事件傳播的不同階段。
- 事件委託：提高事件效能的技巧。
[JS Cheat Sheet](https://www.instagram.com/p/C0EBgWFAzXU/?utm_source=ig_web_copy_link)
:::
### Basic Things To Learn
:::spoiler Components
### Passing Props to a Component , 所有Component大階開頭
## Props 係一個parameter , 用object形式放落 component
functional component -> 依家call一個function，可以比args，比parameter->
parent比野child -> 呢樣就叫props
但child return JSX出去，比main做Rendering
props can be objects，arrays，functions
:::
:::spoiler Class Component
:::spoiler Function Component
其他cap圖全部以Function Component做
:::
:::spoiler JSX (JavaScript XML)
- JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JS file.想一次過係JS file寫晒 html，jsx幫你create element
for each 無野return，行完就算
### React {} => 代表你想係JSX入面寫JS ->Curly Braces
- outer {} => 我要寫JS
- inner{} => JS Object
### JSX Rules:
1 Return 入面一定係 single root element
2.single tag 要有 '/'變尾 -> <img ... />
3.駝峰命名
4.想係JSX入面寫JS加 '{}'
tips : 善用好用conventer網轉換JSX，JS，TS [好用conventer網](https://transform.tools)
[JavaScript in JSX with Curly Braces](https://react.dev/learn/javascript-in-jsx-with-curly-braces)
:::
:::spoiler TSX (TypeScript XML)
:::
:::spoiler Props
Props:
功能： Props 是 ==read-only component== , ==object , 用黎store Attributes==，是由father component傳遞給child component的數據。它是Read only，child component不能直接修改 props。
作用： 允許father component向child component傳遞數據，從而使component之間connect。
舉例：
```jsx=
// Parent Component
const ParentComponent = () => {
const message = "Hello from Parent!";
return <ChildComponent message={message} />;
};
// Child Component
const ChildComponent = (props) => {
return <div>{props.message}</div>;
};
```
:::
:::spoiler State
功能： State 是＝=variable==，它用於==跟蹤隨時間而變化==既data。與 props 不同，state 是==可變==的，可以通過調用==setState== 來更新。
作用： 用於在組件中保存和管理局部狀態，以實現動態 UI 和響應用戶操作。
舉例：
```jsx=
// Component with State
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
incrementCount = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.incrementCount}>Increment</button>
</div>
);
}
}
```
:::
::: spoiler Events
<b>onClick</b>
:::
:::spoiler Conditional Rendering
1. 另外開method 做
2. 直接係Component做if-else , 得一個Component比較適合
3. return 入面用 ? :
4. 用 && `||` （小用||）
## {}入面只能夠放一句expression ：想做if statements用 &&, and ? :
## Rendering Lists
- looping : loop a data then print out
[參考資料](https://react.dev/learn/rendering-lists)
#### 每次retrun一個single root element，所以要分開包住
#### 整component->Reuseable
:::
#### Rendering分兩種
:::spoiler 伺服器端渲染（Server-Side Rendering，SSR）
#### 伺服器端渲染 (SSR):
:::success
由server行晒全部JS，砌好晒HTML，再掉比電腦，每load一頁，轉部page，問server拎部HTML，每一下都load耐D
ADV: security高 ，call api動作係server做晒，砌好成個html再掉比你：銀行系統
NextJS包住ReactJS，所以行到SSR->寫法唔同
- 執行地點：
渲染發生在伺服器上。
- 流程：
當用戶請求頁面時，伺服器生成 HTML，包含所有必需的資料和內容。
完整的 HTML 內容被直接發送到瀏覽器。
- 優點：
更快的首次載入時間，因為用戶接收到完整的頁面。
更好的 SEO（搜尋引擎優化）效果，因為搜索引擎能夠直接解析 HTML 內容。
- 缺點：
較大的首次載入時間，因為整個頁面的內容都需要在伺服器端生成。
對伺服器的較大負載，特別是在高流量的情況下。
- 適用情境：
需要 SEO 優化的內容網站。
初始頁面載入速度較為重要的情況。
- Next.js (React 框架的 SSR 擴展)：
安裝：npm install next
- Nuxt.js (Vue.js 框架的 SSR 擴展)：
安裝：npm install nuxt
- Angular Universal：
安裝：ng add @nguniversal/express-engine
:::
:::spoiler 客戶端渲染（Client-Side Rendering，CSR）
#### 客戶端渲染 (CSR):
:::success
做一個Single page application，係將成個JS download 落電腦，由JS去控制介面有D乜。start 個下loading 最耐，唔用network時間run
電腦call api,比人睇晒：銀行call api唔想比人知
最raw react 一定做CSR
- 執行地點：
渲染發生在用戶的瀏覽器中。
- 流程：
瀏覽器接收到最小的 HTML 內容，通常僅包含基本的結構和載入 JavaScript 的標籤。
瀏覽器下載 JavaScript 並在用戶的設備上運行，以動態生成和更新頁面內容。
- 優點：
快速的初始載入時間，因為僅傳送最小的 HTML 內容。
渲染過程可以在用戶設備上進行，減輕伺服器負擔。
- 缺點：
可能有較差的 SEO 效果，因為搜索引擎在初始載入時看到的僅是基本 HTML 結構。
首次載入後，需要進行額外的資源請求和渲染，可能導致較慢的用戶體驗。
- 適用情境：
需要動態更新和即時互動的應用程式。
對初始載入時間較不敏感的情況，例如單頁應用（Single Page Application）。
- React：
使用 create-react-app 快速啟動 React 專案，預設支援 CSR。
- Vue.js：
使用 Vue CLI 快速啟動 Vue 專案，預設支援 CSR。
- Angular：
使用 Angular CLI 快速啟動 Angular 專案，預設支援 CSR。
:::
### Learn Important Hooks
[React 生命周期](https://www.runoob.com/react/react-component-life-cycle.html)
:::spoiler useState
- React 內建StateObject
- 屬於某個特定Component資料
- React 對State變化有反應（Reactive to State）
- 更新component（re-render）即時睇到變化
:::
:::spoiler useEffect
- useEffect 用於處理副作用操作，如數據獲取(fetch data)、訂閱等。它在每次render之後運行。
:::
:::spoiler useRef
[useRef解釋](https://juejin.cn/post/6844904174417608712)
- useRef返回一个可變的ref對象
```javascript=
import React, { useRef, useEffect } from 'react';
const RefComponent = () => {
const inputRef = useRef();
useEffect(() => {
inputRef.current.focus(); // 獲取焦點
}, []);
return <input ref={inputRef} />;
};
```
:::
:::spoiler useContext
- useContext 用於在 React tree中傳遞當前上下文的值。（通常是 React.createContext 的返回值），並返回當前上下文的值。
```javascript=
import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
const ThemedComponent = () => {
const theme = useContext(ThemeContext);
return <p>Current Theme: {theme}</p>;
};
```
:::
:::spoiler useReducer
- useReducer 用於管理複雜狀態邏輯，類似於 useState，但提供更多控制。
```javascript=
import React, { useReducer } from 'react';
const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
default:
return state;
}
};
const ReducerComponent = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
</div>
);
};
```
:::
:::spoiler useMemo
- useMemo 用於根據依賴值的變化，計算記憶化值用於緩存計算結果，以節省計算資源。
```javascript=
import React, { useMemo } from 'react';
const MemoizedComponent = ({ list }) => {
const sortedList = useMemo(() => list.sort(), [list]);
return <ul>{sortedList.map((item) => <li key={item}>{item}</li>)}</ul>;
};
```
:::
:::spoiler useCallback
- useCallback 用於緩存回調函數，以防止不必要的重新創建。
```javascript=
import React, { useCallback, useState } from 'react';
const CallbackComponent = () => {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
};
```
:::
### Learn Some Of The React UI Frameworks
- [Material UI](https://mui.com/material-ui/)
- [Material UI Template](https://mui.com/material-ui/getting-started/templates/)
- [Material UI Free Dash Broad](https://mui.com/store/collections/free-react-dashboard/)
- [React Bootstrap](https://react-bootstrap.netlify.app/docs/getting-started/introduction)
- [Semantic UI](https://semantic-ui.com/introduction/getting-started.html)
- [Download Icon 圖](https://www.flaticon.com/)
- [mdbootstrap](https://mdbootstrap.com/docs/react/plugins/ecommerce-gallery/)
### Learn To Use Popular React JS Packages
* React Router
* React Query
:::spoiler Axios
|Feature|Axios|Fetch API|
|-|-|-|
Easy of Use|Simple aPI , automatic JSON parsing|Lower-level API , manual response parsing|
Interceptors|Yes,built-in support|No,requires manual handling|
Browser Compatibility|Browsers and Node.js|Native browers feature , requires polyfills|
Size|Slightly larger | Smaller (native brower functionality)|
Error Handling| Automatic JSON parsing | Requires explicit parsing (e.g. 'response.json()')|
Community & Maintenace|Actively maintained , strong community|Part of native brower API , maintained by browser vendors|
### Axios Installation
//Using NPM
```
npm install axios
```
// Using Yarn
```
yarn add axios
```
#### Marking GET Request
```javascript=
import axios from 'axios';
axios.get('URL')
.then(response=>{
console.log(response.data);
})
.catch(error=>{
console.error(error);
});
```
#### Marking POST Request
```typescript=
import axios from 'axios';
//Define headers
const headers = {
'Content-Type':'application/json',
'Authorization':'Bearer YOUR_ACCESS_TOKEN'
};
//Define data to send in the body
const dataToSend = {
key1:'value1',
key2:'value2',
}
//Make the axios request
axios.post('URL',dataToSend,{headers})
.then(response=>{
console.log(response.data);
})
/catch(error=>{
console.error(error);
});
```
#### Marking PUT Request
```typescript=
import axios from 'axios';
const dataToUpdate = {
key1:"value1",
key2L"value2
};
axios.put(`http://.../data/${id}`,dataToUpdate)
.then(response=>{
console.log(response);
})
.catch(error=>{
console.error(error);
});
```
#### Marking DELETE Request
```typescript=
import axios from 'axios';
axios.delete(`https://data/${id}`)
.then((response)=>{
console.log(response);
})
.catch((error)=>{
console.error(error);
});
```
### Call API in React
#### JS - Promises (Object)
- Producing Code
- 會take times既 -> is code that take some time->
- Consuming Code
- 要等有結果 -> is code that must wait for the result -> promise有result
所以：call api 呢個動作係Producing Code
1. fetch
2. axios
[axios](https://axios-http.com/docs/api_intro)
```tsx=
.then() -> 200先行
.catch() ->3xx,4xx,5xx
.finally()
似try-catch
```
async , await -> 簡化.then() ,一對出現
[React 生命周期](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)
[Search JS 有咩libary用](https://www.npmjs.com)
* loading時出現既叫skeleton
mounting -> 準備擺上去既時候
Render phase -> side effect ,影響render時間->幾時要等？->call api
有side effect既野唔想放係
Unmounting -> componentWillUnmount
1. ForecastData -> convent Api JSON first
2. 將D野加落去 -> 搞State
:::
:::spoiler fetch (Referenca only)
### 1.使用 fetch 發送 GET 請求：
```javascript=
import React, { useEffect, useState } from 'react';
const ApiIntegrationExample = () => {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
} catch (error) {
console.error('Error fetching data:', error);
}
};
fetchData();
}, []); // Empty dependency array ensures the effect runs once after initial render
return (
<div>
{data ? (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
) : (
<p>Loading data...</p>
)}
</div>
);
};
export default ApiIntegrationExample;
```
上述例子中，我們使用 fetch 函數向 https://api.example.com/data 發送 GET 請求，然後解析 JSON 數據並將其存儲在組件的狀態中。當數據獲取完成後，顯示數據列表，否則顯示“Loading data...”。
### 2.使用 fetch 發送 POST 請求：
```javascript=
import React, { useState } from 'react';
const ApiIntegrationExample = () => {
const [postData, setPostData] = useState({ name: '', age: '' });
const handlePostRequest = async () => {
try {
const response = await fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(postData),
});
if (response.ok) {
console.log('User added successfully');
} else {
console.error('Failed to add user');
}
} catch (error) {
console.error('Error sending POST request:', error);
}
};
return (
<div>
<h2>Add User</h2>
<form>
<label>
Name:
<input
type="text"
value={postData.name}
onChange={e => setPostData({ ...postData, name: e.target.value })}
/>
</label>
<label>
Age:
<input
type="text"
value={postData.age}
onChange={e => setPostData({ ...postData, age: e.target.value })}
/>
</label>
<button type="button" onClick={handlePostRequest}>
Add User
</button>
</form>
</div>
);
};
export default ApiIntegrationExample;
```
:::
* React Hook Form
* Styled Components
* Storybook
* Framer Motion
### Learn How To Manage State In React With State Management
* Redux
* MobX
* Hookstate
* Recoil
* Akita
### Learn To Test Your Apps With Some OF These Libraries / Frameworks
* Jest
* Testing Library
* Cypress
* Enzyme
* Jasmine
* Mocha
---
:::spoiler React 係乜？
- **React 係乜？**
- A front-end JS framework by Facebook
- Modalized things into Components
- Single page Application
- **React 元件和屬性**
- 元件： React應用程序是由許多小組件構成的。元件是可重用的、独立的、有自己的狀態（state）和生命周期的構建塊。
- 屬性： React 元件接受屬性（props）作為輸入，這些屬性是從父元件傳遞的數據。屬性是不可變的，它們用於定義元件的外觀和行為。
- **JSX 語法**
- JSX 是一種 JavaScript 的語法擴展，類似 XML/HTML，但在 JavaScript 中使用。
- 例子：
```javascript=
- const element = <h1>Hello, React!</h1>;
```
- **React 開發工具**
- React Developer Tools：瀏覽器擴展，用於調試 React 應用。
- [React UI tools](https://mui.com)
- [Bootstrap](https://getbootstrap.com)
- **組件狀態和屬性**
- 使用 `useState` 鉤子管理組件內的狀態。
- 屬性和狀態的異同：何時使用屬性，何時使用狀態。
- 組件狀態： 每個 React 組件都可以擁有自己的內部狀態，通常用於存儲和管理組件的數據。狀態可由 setState 方法進行更新。
- 組件屬性： 組件的屬性是由父組件傳遞的數據，它們是組件的配置。屬性是不可變的，組件不能直接修改自己的屬性。
- **生命週期方法**
- React 組件有生命週期方法，這些方法在組件的不同階段被調用，例如組件的創建、更新和卸載。生命週期的階段：`componentDidMount`、`componentDidUpdate`、`componentWillUnmount` 等。
- **React Hooks**
- Hooks 是 React 16.8 中引入的新特性，它允許你在不使用類組件的情況下使用狀態和其他 React 功能。一些常用的 Hooks 包括 useState、useEffect 和 useContext。
- **React 路由**
- React Router 是一個用於處理 React 應用程序中路由的庫。它允許你定義應用程序的不同頁面，並在這些頁面之間進行導航。
- **資料傳遞和狀態提升**
- 資料傳遞：使用 `props`、`context` 進行組件間的數據傳遞。
- 狀態提升：提升狀態以實現多個組件之間的同步。
- **API 整合**
- 在 React 應用程序中，你可能需要與外部數據源（如後端 API）進行集成。這通常涉及使用 fetch 或其他 HTTP 請求庫，以獲取和發送數據。
:::
---
# Functional Components
:::spoiler Functional Components
:::
:::spoiler Functional Components with Props
:::
# Map Elements
:::spoiler code
:::
---
#### 寫React唔同Springboot，React無logic，似砌lego，design網頁擺位，煩component：Table / Box / Container / Grid / Tabs / NavBar ... 每一part component 砌好，再group埋所有component做page，如此類推重重覆覆做，就寫得到
[Reference Project - Shopping Cart](/V-DXxu0NQdeUQ2sIpHPOIQ)
Github repo : [Shopping Cart](https://github.com/OscarLoOscar/FSSE2309-Project)
---
## Preflight response is not successful. Status code: 401
### 解決方法：
step 1.Springboot Controller add
```javascript=
@CrossOrigin(origins = "http://localhost:xxxx", maxAge = 3600)
=> xxxx is your port in React
```
step 2.SecurityConfig add
```javascript=
.cors(Customizer.withDefaults());
```
---
git clone 完run 唔到project：
```javascript=
1. rm -rf node_modules
2. rm package-lock.json
3. npm install
```
---
## DDOS 自己
---
## Extra :
用python 拎到人地個網既design:
---
Made by Oscar
Sign in with Wallet
Connect another wallet