在開始寫 React 之前，先做這些設定會較方便～

• 在 vscode 安裝 ES7 React/Redux/GraphQL/React-Native snippets
• 到 vscode 的 settings.json 加入這些設定

    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "files.associations": {
        "*.js": "javascriptreact"
    }

1. 第一個設定是為了讓 react 支援 prettier
2. 第二個設定是為了讓 React 支援 jsx，就不用每次都要手動更改成 react，成功後會看到右下角的語言顯示 JavaScript React

React component

Class Component - 有自己的生命周期，有自己的 state，要用 this。

Function Component - 沒有自己的生命周期，沒有自己的 state，也沒有自己的 this，所以要用 Hook 來執行狀態和生命週期。

• React 將應用程式拆分成可以重複使用的 component，再透過這些 component 去 render 出介面。
• 每個 function 代表一個獨立的 component，function 名稱開頭要是大寫，才會被當成一個 component，否則會被瀏覽器當成 HTML tag。
• component 有很多種寫法，一般 function, arrow function 或是 class 都可以，沒有固定寫法。

一般 function：

import React from 'react'
function App() {
  return (
    <div>

    </div>
  )
}
export default App

arrow function：

import React from 'react'
const App = () => {
  return (
    <div>  
    </div>
  )
}
export default App

class ：

import React, { Component } from 'react'
export default class App extends Component {
  render() {
    return (
      <div>
      </div>
    )
  }
}

以 function component 為例：
假如 index.js 裡面包含了 Nav.js 和 App.js

• App.js
  定義完 App 這個 function 後將 App export 出去

import React from "react";
const App = () => {
  return(
    <div>
      <h1>My Profile.</h1>
      <p>Welcome</p>
      <button>Check my profile.</button>
    </div>
  );
};
export default App;

• Nav.js
  定義完 Nav 這個 function 後 export 出去

import React from "react";
const Nav = () => {
  return (
    <nav>
      <ul>
        <li>
          <a href="#">Home Page</a>
        </li>
        <li>
          <a href="#">My Profile</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
      </ul>
    </nav>
  );
};
export default Nav;

• 將 component 顯示到網頁的方式：

1. import（引入） component
2. 將 component 放到 ReactDOM.render() 裡面，第一個參數是 <React.StrictMode></React.StrictMode>，並將要引入的 component 放到裡面，第二個參數是引入的 component 要放到 HTML 的指定位置。

• index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import Nav from "./Nav";

ReactDOM.render(
  <React.StrictMode>
    <Nav />
    <App />
  </React.StrictMode>,
  document.querySelector("#root")
);