--- # (E)尊絕不凡 React 教學 ## - 第二週 --- #### 你好啊 #### 真沒想到你可以到四樓來呢 #### 不過就到這裡為止了 #### 接下來由我 Robby 來當你們的講師！ - Github [https://github.com/explooosion](https://github.com/explooosion) - Blog [https://dotblogs.com.tw/explooosion](https://dotblogs.com.tw/explooosion) --- week2 - [本次上課專案](https://github.com/explooosion/react-tutorial) --- ### 今天の學習目標 - ㄧ、 Components 進階 - 二、 Elements 常用元素 --- 首先，補充教學一下 Class --- ### 類別 Class - 宣告與建構 ```javascript= class Person { constructor(name, age) { this.name = name; this.age = age; } } ``` ```javascript= const man = new Person('Jack', 18); ``` --- ### 類別 Class - 方法與屬性 ```javascript= class Person { constructor(name, age) { this.name = name; this.age = age; } eat(){ console.log('eat'); } } ``` ```javascript= const man = new Person('Jack', 18); man.eat(); // eat ``` --- ### 類別 Class - 調用自身 method ```javascript= class Tesla { run() { console.log('車子前進') } autoDrive() { this.run(); } } const tesla = new Tesla(); tesla.run(); tesla.autoDrive(); ``` --- ### 類別 Class - 試著做做看 1. 建立一個老師的類別，老師的屬性有名字、性別，然後方法有上課 2. 新增一個老師，並且給予名字與性別 3. 老師上課 4. 試著新增方法：吃東西 5. 老師上課時吃東西 --- ### 試著應用觀念在 React 上 1. state 是屬性還是方法？ 2. render 是屬性還是方法？ --- ### 回頭看看今天の學習目標 - ㄧ、 Components 進階 - 二、 Elements 常用元素 --- ### ㄧ、Components 進階 --- ### ㄧ、Components 進階 學習項目： 1. Default Props 2. render --- ### 1.Default Props props 接收資料大致可以分成三種方式： - 直接給 props 資料 - 預設 props 有資料 - 從狀態傳給 props 使用 --- ### 1.Default Props 直接給 props 資料 App.js ```jsx= <Example list={['吃', '喝', '拉', '撒', '睡']} /> ``` Example.js ```jsx= class Example extends React.Component { render() { return ( <div> {this.props.list} </div> ); } } ``` --- ### 1.Default Props defaultProps：預設 props 有資料 Example.js ```jsx= class Example extends React.Component { render() { return ( <div> <p>NAME: {this.props.name}</p> </div> ); } } Example.defaultProps = { name: 'Jack', } ``` --- ### 1.Default Props state：從狀態傳給 props 使用 App.js ```jsx= <Example list={this.state.list}> ``` Example.js ```jsx= class Example extends Component { render() { return ( <ul> {this.props.list.map(l => <li>{l}</li>)} </ul> ) } } export default Example; ``` --- ### 1.Default Props 小試身手 1. 建立 Example 組件 1. 在 App 組建中傳入 [1,2,3,4] 給 Example 組件 3. 利用 ul li 將傳入的陣列值顯示出來 4. 如果沒有 props 則預設 props 為 [4,3,2,1] --- ### 2.render 五種不同的條件渲染（Conditional Rendering） ps. 切換到程式碼 1. javascript if 2. element variables 3. conditional operator 4. preventing component from rendering 5. method --- ### 2.render 自己做做看 - 建立組件 Header - 根組件 App.js 有一個狀態叫做 login - 將根組件狀態 login 傳入 Header - 當有登入時 Header 顯示 Hello Jack - 沒登入時 Header 顯示 Welcome --- ### 二、Elements 常用元素 --- ### 二、Elements 常用元素 程式實作： 1. checkbox 2. radio 3. select ... option --- ### 二、Elements 常用元素 - 哩做跨買ㄟ拉 1. 建立 radio 男女 2. 建立 checkbox 延畢 3. 建立按鈕（判斷） 4. click 的時候 alert 是男是女,要不要延畢 --- ### 學習重點整理 - ㄧ、 Components 進階 - 二、 Elements 常用元素 --- ### 今天你都學會了嗎 - [ ] 知道怎麼用 Class 寫類別，以及屬性與方法。 - [ ] 我會在 render 方法中渲染 JSX - [ ] 我會解釋何謂 props - [ ] 我會使用 button, input, select - [ ] 我會建立父子組建，並利用 props 傳資料 --- # END