React的核心就是將UI拆成不同的程式碼，以元件的方式獨立，讓元件可以在主程式中重複利用。

而要使用這些元件前我們必須將元件宣告後輸出使用。

宣告方法有兩種方法：

1.Functional Component

2.Class Component

首先介紹Create React App建立的專案中，App.js中使用的元件宣告方式Functional Component。

Functional Component:

使用一般的function函式來宣告元件，可以接受props做參數，回傳建立React元件的DOM元素。

src/App.js

//引用需要的檔案
import logo from './logo.svg';
import './App.css';

//使用一般Function建立元件
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

//輸出元件
export default App;

Functional Component有以下特點：

• 沒有自己的元件狀態（state）
• 沒有元件週期（Lifecycle）
• 不需要以this取值
• 元件傳遞屬性（props）的方式透過function參數傳入

Functional component的程式碼和Class Component比較簡潔，適合使用在功能只有顯示畫面的簡單元件。
因為沒有狀態，只負責UI呈現，不用考慮資料狀態改變的過程，更利於元件程式碼的重複利用。

React 在 16.8 版本以後出現了 React Hook 來執行Functional Component的狀態及生命週期，讓Functional元件可以處理狀態些稍微複雜的元件。