Yakim shu Hi, 這是我擴充腦內海馬體的地方。

[第二十一週] React 基礎:Component、JSX 語法、事件機制

在 React 中所有元素皆為 Component

React 基本元素就是 Component,一整個網頁就是由不同的 Component 組成。

ReactDom.render(<App />, document.getElementById('root')); // => 將 APP render 到 #root 元素

像之前的範例,App 就是一個 Component,會渲染到 #root 這個 DOM 物件裡面。

import React, {Component} from 'react';

class App extends Component {
  render() { // => 每個 Component 都要有 render function
    return (
      <h1>hello React</h1>
    )
  }
}

export default App;

render function 是 Component 很重要的一環,每一個 Component 都一定要有 render(),沒有加上 render() 的話會報錯誤訊息。


Component <App />

<Component /> 這樣是一個 Component 的既定寫法,有點像 HTML 的 tag 寫法。

所以也可以在 render() 裡面放另一個 Component,像以下範例就是在 <App /> render 裡面放 <Title /><Text /> 的 Component。

( 要注意定義 Class 的時候一定要 extends Component,不然會報錯 )

class Title extends Component {
  render() {
    return <h2>title</h2>
  }
}

class Text extends Component {
  render() {
    return <p>text</p>
  }
}

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

JSX

而像這樣 <Component /> 有點像 HTML 的語法叫做 JSX,有點像是 HTML 跟 JavaScript 的混合體。

所以寫 JSX 就像是在寫 HTML 般很好上手,但還是有些微小差異:

class App extends Component {
  render() {
    const name = 'title';
    const style = {
      color: 'grey',
      fontSize: '30px', // => Camel-Case
    }
    return (
      <div className={name + '1'} style={style} data-id='1'> // => className
        <Title />
        <Text />
      </div>
    )
  }
}

React 的事件機制

傳統寫網頁的時候,想要對按鈕添加事件監聽會像以下範例:

function sayHi() {
  alert('hi!');
}
document.querySelector('.button').addEventListener('click', sayHi);

但因為寫 React 是把 DOM 跟 JavaScript 寫在一起,所以我們可以直接事件監聽寫在 DOM 上面:

class Title extends Component {
  render() {
    function sayHi() {
      alert('hi!');
    }
    return <h2 onClick={sayHi}>title</h2>
  }
}

/* 或者把上面範例改寫,簡化成箭頭函式 */
class Title extends Component {
  render() {
    return <h2 onClick={() => alert('hi')}>title</h2>
  }
}

結論


( 以上內容大部分是 程式導師實驗計畫第三期 的學習筆記,如有錯誤歡迎糾正,非常感謝 🤓 )