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 連結到示例。