Component是構建用戶界面的基本單元，每個React應用程式都是由多個component組成的樹狀結構。

其中App.js可以被視為最初的Root component。

我們可以撰寫新的component，在最上方import進App.js，並且在下面的function寫上標籤，去組成自己想要的槽狀結構。

import React from "react";
import "./App.css";
import Navbar from "./Navbar";
import Home from "./Home";

function App() {
  const title = 'Welcome to the new blog';
  return (
    <div className="App">
      <Navbar/>
      <div className="content">
        <Home/>
      </div>
    </div>
  );
}
export default App;

要寫新的Component，我們可以先在visual stduio下載Simple React Snippets套件。

新增一個javascrip檔案，打上sfc按enter，就會自己寫好一個像是函示的模板。

Navbar.js

const  Navbar = () => {
    return ( 
        <nav className="navbar">
            <h1>The Dojo Blog</h1>
            <div className="links">
                <a href="/">Home</a>
                <a href="/create">New Blog</a>
            </div>
        </nav>
    );
}
export default Navbar ;

Home.js

const Home = () => {
    return ( 
        <div className="home">
            <h2>Homepage</h2>
        </div>
     );
}
 
export default Home;

寫好內容後，再import至App.js。

參考資料

Net ninja