延續昨天 [Day 34] [React] React components 簡單介紹 (上) 的練習，繼續把 <li> 也變成 components：

在 components 資料夾中加入 List.jsx 檔案，把昨天做 heading 的方式拿來做 <li> components：

import React from "react";

function List() {
  return (
    <ul>
      <li>Bacon</li>
      <li>Jamon</li>
      <li>Noodles</li>
    </ul>
  );
}

export default List;

這樣我們的 index.js 檔案裡面又可以變得更簡潔了：

ReactDOM.render(
  <div>
    <Heading></Heading>
    <List/>
    <ul>
      <li>Bacon</li>
      <li>Jamon</li>
      <li>Noodles</li>
    </ul>
  </div>,
  document.getElementById("root")
);

目前有了 Heading 和 List components，我們可以合併在一個檔案，為了好分辨所以將新檔案取名為 App.jsx，並打入程式碼：

import React from "react";

import Heading from "./Heading";
import List from "./List";

function App() {
  return (
    <div>
      <Heading />
      <List />
      <List />
    </div>
  );
}

export default App;

如此，整個 index.js 畫面就會變得更簡潔！只要一行就可以插入所有的 components 了：

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

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

React 的 components 簡單介紹就到這～

明天課程會是課堂作業，練習 React Componenets。