Week 03 - Practice

# Practice ## Week 3 ---- ### Beta Docs! + https://beta.reactjs.org/ ---- ### 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 />) ``` ---- ### Lifecycle ```jsx= class Clock extends React.Component { componentDidMount() { this.timer = setInterval(() => this.tick(), 100) } componentWillUnmount() { clearInterval(this.timer) } tick() { this.setState({ date: new Date() }) } } ``` ---- ### Terminology + 使用 "Mounting" 表示物件第一次被 Render + 使用 "Unmounting" 表示物件被移除 + Construct → Mount → Unmount ---- ### 不要直接修改 State ```jsx= // Wrong this.state.comment = 'Hello'; // Correct this.setState({comment: 'Hello'}); ``` --- ## 其他 ---- ### 書籤轉 Markdown ```javascript= // conv_chrome_bookmarks_to_md.js const fs = require('fs'); fs.readFile('bookmarks.json', 'UTF-8', (err, data) => { if (err) { console.error(err); return; } let jsData = JSON.parse(data); var fout = fs.createWriteStream( 'bookmarks.md', { flags: 'w' }); for (let i = 0; i < jsData.length; i++) { if (jsData[i].url != undefined) { const title = jsData[i].title; const url = jsData[i].url; fout.write(`+ [${title}](${url})\n`); } } }); ``` ---- ### NPM 死去 + 在 Windows 裡面 NPM 其實是一個 CMD Script + 因為我的 Command Prompt 掛了所以打不開 + Solution: 改用 WSL 擋著先 ---- ### Vite 不會 Reload + 在 WSL 底下開發，請拒絕使用 NTFS 檔案系統 + HMR - Hot Module Replacement ---- ### 被 HMR 閃瞎眼 + 調整 HTML ```html <body style="background-color: #1E1E1E">  </body> ``` ---- ### 快速插入 `/>` ```json // In keybindings.json { "key": "ctrl+.", "command": "editor.action.insertSnippet", "args": { "snippet": " />", } } ``` [來源](https://stackoverflow.com/a/74831716/4893895) ---- ### 參考 + [Read File](https://nodejs.dev/en/learn/reading-files-with-nodejs/) + [Parse JSON](https://tinyurl.com/2hh9twm5) + [For-Loop](https://www.w3schools.com/js/js_loop_for.asp) + [Write Stream](https://stackoverflow.com/a/33419220)