建立 React component

在开始写 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")
);