# Monthly Review
## Week 6
----
## Replit
+ Yet Another Online IDE
+ [Official Site](https://replit.com/)
+ [手機版 App](https://replit.com/mobileDownload)
----
## CodeBoard
+ 適合 Coding 的手機軟體鍵盤
+ [Google Play](https://tinyurl.com/yckb5x2u)
---
# 月總複習
----
## 參考教學
+ [BETA 版官方文件](https://beta.reactjs.org/)
+ [原版官方文件](https://zh-hant.reactjs.org/)
+ [W3Schools JavaScript](https://www.w3schools.com/js/default.asp)
+ [W3Schools TypeScript](https://www.w3schools.com/typescript/index.php)
----
## 基本環境
+ [Node.js](https://nodejs.org/zh-tw/download/)
+ 熟悉的編輯器，例如 [VS Code](https://code.visualstudio.com/)
+ 選用工具：
+ [PNPM](https://github.com/pnpm/pnpm)
+ [Auto Rename Tag](https://tinyurl.com/3ubanevf)
----
## 創建專案
+ 使用 Vite
```
npm create vite@latest <project-name>
```
+ Template 選擇 React
+ Language 選擇：
+ 不需要 Type Hinting → 選擇 JavaScript
+ 超需要 Type Hinting → 選擇 TypeScript
+ 選擇 SWC 聽說編譯速度更快
+ 但是專案會吃比較多硬碟空間
----
## 超．基本範例
```jsx=
// main.tsx
import ReactDOM from "react-dom/client";
const rootRef = document.getElementById("root");
const root = ReactDOM.createRoot(rootRef!);
const element = <h1>Hello ReactJS!</h1>;
root.render(element);
```
+ JSX 語法將 JavaScript 與 HTML 混在一起
+ `.jsx` for JavaScript
+ `.tsx` for TypeScript
----
## 核心觀念
+ Component
+ Props
+ State
----
## Component & Props
+ 最簡單的 Component 是個 Function
```jsx=
function WelcomeFunc(props) {
return <h1>
Function Say: Hello, {props.name}!
</h1>;
}
root.render(WelcomeFunc({ name: 'ReactJS' }));
```
+ Component 也可以是個 Class
```jsx=
class WelcomeClass extends React.Component {
render() {
return <h1>
Class Say: Hello, {this.props.name}!
</h1>;
}
}
root.render(<WelcomeClass name='ReactJS' />);
```
----
## Which One?
----
## State
+ 初始化 State
```jsx=
class Clock extends React.Component {
constructor(props) {
super(props)
this.state = { date: new Date() }
}
}
```
----
## Render With State
```jsx=
class Clock extends React.Component {
render() {
const time = this.state.date.toLocaleTimeString()
return (
<div>
<h1>Hello Clock!</h1>
<h2>Time: {time}</h2>
</div>
)
}
}
root.render(<Clock />)
```
----
## useState
```jsx=
import { useState } from 'react';
function IndexPanel() {
const [index, setIndex] = useState(0);
function handleClick() {
setIndex(index + 1);
}
return <button onclick={handleClick}>{index}</button>
}
```
{"metaMigratedAt":"2023-06-17T21:06:26.105Z","metaMigratedFrom":"YAML","title":"Week 06 - Monthly Review","breaks":true,"description":"地獄貓旅行團第六週心得分享","slideOptions":"{\"transition\":\"slide\"}","contributors":"[{\"id\":\"c7cbb212-2c41-4dfa-8d85-f8e7fa769bf1\",\"add\":2701,\"del\":34}]"}