匯入react 

    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
   （渲染react使用）

import React from "react";
import ReactDOM from "react-dom/client";

function App() {
  return <h1> hello </h1>;
}

// react 18
const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(<App />);

// react before 17

// React.render(<App />);
// 並且 import ReactDOM from "react-dom/client"; 
// 改成 import ReactDOM from "react-dom"; 

另外一個是
// <React.StrictMode>
    <App />
  </React.StrictMode>

//用於debug跟渲染兩次找出bug

接下來用return 渲染出要的html效果

import React from "react";
import ReactDOM from "react-dom/client";

function App() {
  return (
    <div>
      <h1> hello </h1>
      <Pizza />
    </div>
  );
}

function Pizza() {
  return (
    <div>
      <h2>Pizza</h2>
      <p>Tomato orange seafood</p>
    </div>
  );
}

//記住 return 不能夠放超過兩種element，需要加()在外面來進行

// react 18
const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// react before 17
// React.render(<App />);