# Hello ReactJS! ## Week 2 ---- ## 建立環境 ```shell # 建立新的 ReactJS 專案，名稱不能有大寫英文 npx create-react-app hello-react # 進入專案資料夾 cd hello-react # 啟動開發伺服器 npm start ``` + 打開 http://localhost:3000/ 瀏覽頁面 ---- ## 相關工具 + ReactJS 專案內建 Git 版控 + 可以在瀏覽器安裝 ReactJS 的[開發者工具](https://reactjs.org/blog/2015/09/02/new-react-developer-tools.html#installation) + 要重按 F12 ---- ## 用 VS Code 看網頁 1. 按下 `Ctrl + Shift + P` 2. 搜尋 `Simple Browser: Show`  [來源](https://stackoverflow.com/a/72799210/4893895) ---- :tada:  + 缺點是開發者工具 --- # Write Code! ---- ## `src/index.js` ```jsx= import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; const rootRef = document.getElementById('root'); const root = ReactDOM.createRoot(rootRef); const element = <h1>Hello ReactJS!</h1>; root.render(element); ``` + JSX 基本上是 JS 卻又帶一點 HTML 在裡面 + PS. Markdown 支援 JSX 語法 ---- ## `src/index.css` ```css= body { background-color: #1E1E1E; color: #D4D4D4; font: 14px "Consolas"; margin: 20px; } ``` --- # 概念雜談 ---- ## JSX + 將 JavaScript 與 HTML 摻在一起做成撒尿牛丸的語法： ```jsx= const myVar = 2 ** 0.5; const element = <h1>Hello {myVar}</h1>; root.render(element); ``` ---- ## 命名規則 + React DOM uses **camelCase** property naming convention. + e.g. `className`, `tabIndex`. ---- ## 單雙引號強迫症 + 單雙引號的差別只有 Escape Character + 通常使用單引號 (`'String'`) ```javascript // 使用單引號，可以不用 Escape 雙引號 let html = '<div id="someDiv"></div>'; // 使用雙引號，就需要 Escape 每個雙引號 let html = "<div id=\"someDiv\"></div>"; ``` ---- ## 參考色票 + 背景色：`#1E1E1E` + 前景色：`#D4D4D4` + 一秒成為 Dark Theme 大師: + `#222222` → `#222` + `#444444` → `#444` + `#666666` → `#666` + `#888888` → `#888` + `#AAAAAA` → `#AAA` --- ## Components & Props ---- ## Components + 中文可以稱作組件、元件 + 用來構成一個應用的零件 ---- ## Props + Properties 的簡寫 + 中文可以稱作屬性、特性 + 描述一個零件的內容 ---- ## 語法 A ```jsx= function WelcomeFunc(props) { return <h1> Function Say: Hello, {props.name}! </h1>; } root.render(WelcomeFunc({ name: 'ReactJS' })); ``` + Components 可以是個 Function ---- ## 語法 B ```jsx= class WelcomeClass extends React.Component { render() { return <h1> Class Say: Hello, {this.props.name}! </h1>; } } root.render(<WelcomeClass name='ReactJS' />); ``` + Components 也可以是個 ES6 Class ---- ## 組合 ```jsx= function Welcome(props) { return <h1>Hello, {props.name}</h1>; } function App() { return ( <div> <Welcome name="Penut" /> <Welcome name="Mortal" /> <Welcome name="IC" /> <Welcome name="Ghost" /> </div> ); } root.render(<App />) ``` ---- ## 重構 + 把前端框架視為一種 HTML 的 Refactoring Tool --- # 其他 ---- ## `npm start` 不要開啟瀏覽器 + 新增 `.env` 檔案 + 加上 `BROWSER=none` 這行 ---- ## 建構式 ```javascript class Square extends React.Component { constructor(props) { super(props); } } ``` ---- ## Immutability 不可變性 + 直接修改資料 vs. 複製覆蓋資料 + [官方文件](https://tinyurl.com/yz4vakep) ---- ## Please Upgrade ASAP ``` npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap. ``` + Solution: `npm i tar` + Source: [Stack Overflow](https://stackoverflow.com/a/69343147/4893895) ---- ## Bookmark + 閱讀進度 + [Main Concepts 4. Components & Props](https://reactjs.org/docs/components-and-props.html)