Component - ly-yuan-kai/Demo GitHub Wiki

在 React 的中最基本的單元為元件(Component),每個元件也可以包含一個以上的子元件,並依照需求組裝成一個組合式的元件。

以下是一般 React Component 撰寫的主要兩種方式:

1.使用 ES6 的 Class

class HelloComponent extends React.Component {
// render 是 Class based 元件唯一必須的方法(method)
    render() {
	return (
		<div>Hello World!</div>
	);
    }
}

// 將 <HelloComponent /> 元件插入 id 為 root的 DOM 元素中
ReactDOM.render(<MyComponent/>, document.getElementById('root'));    

2.使用 Functional Component 寫法(沒有內部state):

const HelloComponent = () => (
 <div>Hello World!</div>
);

// 將 <HelloComponent /> 元件插入 id 為 root的 DOM 元素中
ReactDOM.render(<HelloComponent />, document.getElementById('root'));
⚠️ **GitHub.com Fallback** ⚠️