react 的設計方式採用了元件化的方式，將UI 分割成一個個元件便於更好的實現和重複利用。

元件分為函式式元件和類元件，函式式元件主要用來做為頁面渲染使用（僅僅作為頁面渲染，不附帶其他初始化功能）

函式式元件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root'
 
)
);

Welcome 作為一個函式元件的名稱，引用時必須大小寫相等， 程式碼中將 name =“Sara” 作為元件的屬性傳遞給Welcome，在Welcome中能夠獲得屬性。

構成元件

例如，我們可以建立一個 App 元件，並在其內部多次渲染 Welcome：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function
 
 App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

渲染結果如下圖：

在呼叫APP 元件的時候，其內部會進行多次的渲染。從而實現了通過不同的元件來實現一個效果。

警告：
元件必須返回一個單獨的根元素。這就是為什麼我們新增一個