Hello World Component

React 元件可以定義為擴充套件基礎 React.Component 類的 ES6 類。在其最小形式中,元件必須定義 render 方法,該方法指定元件如何呈現給 DOM。render 方法返回 React 節點,可以使用 JSX 語法將其定義為類似 HTML 的標記。以下示例顯示如何定義最小元件:

import React from 'react'

class HelloWorld extends React.Component {
    render() {
        return <h1>Hello, World!</h1>
    }
}

export default HelloWorld

元件也可以接收 props。這些是由其父級傳遞的屬性,以指定元件本身無法知道的某些值; 屬性還可以包含在某些事件發生後可以由元件呼叫的函式 - 例如,按鈕可以接收其 onClick 屬性的函式,並在單擊它時呼叫它。編寫元件時,可以通過元件本身的 props 物件訪問其 props

import React from 'react'

class Hello extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>
    }
}

export default Hello

上面的示例顯示了元件如何呈現由其父級傳遞到 name prop 的任意字串。請注意,元件無法修改它接收的道具。

元件可以在任何其他元件中呈現,或者如果它是最頂層元件則直接呈現在 DOM 中,使用 ReactDOM.render 併為其提供元件和 DOM 節點,你希望在其中呈現 React 樹:

import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'

ReactDOM.render(<Hello name="Billy James" />, document.getElementById('main'))

到現在為止,你知道如何製作一個基本元件並接受 props。讓我們更進一步,介紹 state

為了演示,讓我們製作我們的 Hello World 應用程式,如果給出了全名,則只顯示第一個名稱。

import React from 'react'

class Hello extends React.Component {

    constructor(props){

        //Since we are extending the default constructor,
        //handle default activities first.
        super(props);

        //Extract the first-name from the prop
        let firstName = this.props.name.split(" ")[0];
        
        //In the constructor, feel free to modify the
        //state property on the current context.
        this.state = {
            name: firstName
        }

    } //Look maa, no comma required in JSX based class defs!

    render() {
        return <h1>Hello, {this.state.name}!</h1>
    }
}

export default Hello

注意: 每個元件都可以擁有自己的狀態,或者接受父元件作為道具的狀態。

Codepen 連結到示例。