# JS 的奇幻旅程 <br>
## 成績查詢系統實做
[TOC]
----
Made by FanRende (030Mortal#5525)
<img src="https://i.imgur.com/w1gYynK.png" width="50%">
---
## Login
----
- React Router
- Material UI
- Lazy Validation
- React Cookie
- Axios
---
### [React Router](https://reactrouter.com/)
- SPA: 透過 JavaScript 模擬後端路由
- BrowserRouter
- `https://www.example.com/page`
- HashRouter
- `https://www.example.com/#/page`
- [Picking a Router](https://reactrouter.com/en/main/routers/picking-a-router)
---
### [Material UI](https://mui.com/)
React 中實做 [Material Design](https://m3.material.io/) 的套件
```jsx
<AppBar id="appbar" position="sticky" sx={{ zIndex: 11 }}>
<Toolbar>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
<span style={{marginRight: "10px"}}> {student.id} </span>
<span> {student.name} </span>
</Typography>
</Toolbar>
</AppBar>
<Grid container rowSpacing={1} columnSpacing={1} justifyContent="center"
sx={{ backgroundColor: '#242424', cursor: 'none' }}>
{scoreData.map((grade, index) => (
<Grid key={index} item xs={12} sm={6} md={3} lg={3} xl={3}
sx={{ zIndex: 11 }}>
<GradeCard gradeName={grade.gradeName} grades={grade.grades} />
</Grid>
))}
</Grid>
```
----
### Grid System
Material UI 中可以對一個區塊進行排版的工具
會將一個 Row 分為 12 份(default)
並且根據內部元件的佔比進行排版
可以根據畫面大小自訂佔比
`xs, sm, md, lg, and xl`
---
### Lazy Validation
不要讓表單在還沒輸入任何資訊前就亮紅色警告
在送出表單後才檢查輸入合法性
---
### [React Cookie](https://github.com/reactivestack/cookies/tree/master/packages/react-cookie)
使用了 [universal-cookie](https://github.com/reactivestack/cookies/tree/master/packages/universal-cookie) 實作瀏覽器 cookie 管理
並且提供 useCookies Hook 可供使用
```jsx
function App() {
const [cookies, setCookie] = useCookies(['name']);
function onChange(newName) {
setCookie('name', newName, { path: '/' });
}
return (
<div>
<NameForm name={cookies.name} onChange={onChange} />
{cookies.name && <h1>Hello {cookies.name}!</h1>}
</div>
);
}
```
---
### [Axios](https://github.com/axios/axios)
基於 ES6 中的 Promise 實作的 Node.js Http Client
```javascript
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
Promise.all([getUserAccount(), getUserPermissions()])
.then(function (results) {
const acct = results[0];
const perm = results[1];
});
```
---
## Score
----
- useEffect
- Custom Hook - useTick
- Grid System
---
### useEffect
React 中 Hook 的其中一種
利用第二個參數決定何時執行 callback
- 未提供參數
- 每次 component render 時都會執行 callback
- 空 Array - []
- 只會在第一次 render 時執行 callback
- [a, b]
- 當 a 或 b 值改變時會執行 callback
----
<div class="flex-container">
<div class="flex-content">
```jsx
useEffect(() => {
console.log("render");
});
```
```jsx
useEffect(() => {
initComponent();
}, []);
```
</div>
<div class="flex-content">
```jsx
useEffect(() => {
if(canvas === null)
return;
let newContext = canvas.getContext();
setContext(newContext);
}, [canvas]);
```
</div>
</div>
---
### Custom Hook - useTick
為了執行動畫 我自己實作的一個 Custom Hook
```javascript
function useTick(callback: () => void) {
useEffect(() => {
let frame: number;
const animate = () => {
callback();
frame = requestAnimationFrame(animate);
}
frame = requestAnimationFrame(animate);
return () => cancelAnimationFrame(frame);
}, [callback]);
}
```
---
參考 / 延伸閱讀:
[React Router](https://reactrouter.com/)
[Material UI](https://mui.com/)
[React Cookie](https://github.com/reactivestack/cookies/tree/master/packages/react-cookie)
[Axios](https://github.com/axios/axios)
[React Hook](https://beta.reactjs.org/reference/react)
[Reusing Logic with Custom Hooks](https://beta.reactjs.org/learn/reusing-logic-with-custom-hooks)
<style>
.gray {
color: gray;
font-size: 0.5em;
}
.slides .json, .slides .jsx {
font-size: 0.75em !important;
line-height: 1.2em !important;
}
.mermaid {
background-color: rgba(1, 1, 1, .2) !important;
}
.slides code {
background-color: #444 !important;
border-radius: 10px;
}
.code-wrapper code {
background-color: inherit !important;
border-radius: inherit;
}
.flex-container {
display: flex;
justify-content: center;
}
.flex-content {
flex-grow: 1;
}
</style>
<style>
/* Customize website's scrollbar like Mac OS */
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(128, 128, 128, 1);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
</style>
{"metaMigratedAt":"2023-06-17T19:40:52.164Z","metaMigratedFrom":"YAML","title":"JS 的奇幻旅程 成績查詢系統實做","breaks":true,"description":"利用 React.js 實做成績查詢系統","slideOptions":"{\"theme\":\"dark\",\"transition\":\"fade\",\"previewLinks\":true}","contributors":"[{\"id\":\"82f6b599-31b8-4112-9dc5-7d7b7d6a3ebb\",\"add\":5743,\"del\":700}]"}