[React 02] Component 、 JSX、事件機制

React 的核心概念之一叫做 component

React 中所有元素皆為 Component ，一整個網頁就是由不同的 Component 組成。
寫出這個 component 有兩種方式 :
一個是透過 class，一個是透過 function
前者就叫做 class component，後者叫做 function component

早期的 function component 沒有 state ，但到了 2019 年 2 月，多了一個叫做 hooks，讓 function componnent 也能擁有 state，這個改動改變很多東西，很多新文件會改成用 function component 加 hooks 來寫

Component

在網頁開發角度， Component 更像是切版，因為切板就是一塊塊來切，每個 Component 也是可以自成一塊的區塊

• 每一個 Component 都一定要有 render()，沒有加上 render() 的話會報錯誤訊息
• <Component /> 這樣是一個 Component 的既定寫法，像 HTML 的 tag 寫法

下面是 function component 寫法，import 那些先不寫

function Hello() {
    return <h1>這是 function component</h1>
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Hello />, rootElement);

下面是 class component 寫法 :

class Text extends Component {
  render() {return <p>這是 class component</p>}
}

class App extends Component {
  render() {return (<div><Text /></div>)}
}

JSX

• <Component /> 有點像 HTML 的語法叫做 JSX，是一個 JavaScript 的語法擴充，有點像是 HTML 跟 JavaScript 的混合體
• custom attribute 必須要用小寫
• <div class=""> 的寫法要換成 <div className="">
• 用大括號 { } 裡面可以放 JavaScript 語法，例如:

  const name = 'tzu'
  <div className={name + 123}></div>
  

• style 裡面是放 object，且用 - 連接的 CSS 屬性名稱都會轉成駝峰式命名，要注意 JSX 只能支援 CSS 行內樣式(Inline styles) 就像是在 HTML 元素的 style 屬性設定 CSS 一樣程度

  <div style={{color: 'red', fontSize: '20px'}}>
  

• return 後面要有東西，不然會 undefind

  return <div className={name + 123}></div>
  

  return (
    <div className={name + 123}>
    </div>
  )
  

  上面兩種都可以，但就是不能用下面這種

  return 
    <div className={name + 123}>
    </div>
  

在 React17 之前，有用到 JSX 的地方，檔案都要 import React from 'react' ，在 React17 之後，Babel 會自動幫你做這些事情，所以就不用加 import React from 'react'

事件機制

js 原生寫法對按鈕添加事件監聽會像：

document.querySelector('.button').addEventListener('click', sayHi);

React 是把 DOM 跟 JavaScript 寫在一起，所以我們可以直接事件監聽寫在 DOM 上面

class Title extends Component {
  render() {
    return <h2 onClick={() => alert('hi')}>hello</h2>
  }
}

其實和使用 HTML 的 onclick 屬性差不多

<input type = 'button'  onclick = "sayHi()"></input>