運用官方範例，改寫自己的 Hello World。

建立 .jsx

建立檔案：HelloWorld.js 檔案做為我們的範例檔，內容為：

function HelloWorld() {
    return (
      <div id="root">
        <h1>Hello, world...</h1>
      </div>
    );
  }
  
  export default HelloWorld;

把範本從 React 預設的，改成我們的 Hello, world，這邊把div 取個 id 為 root。接著把我們要的 「Hello, world...」寫上去。

• .js 執行渲染入口

接著修改index.js，讓網頁可以讀取這份範例檔：

...（省略）...
import HelloWorld from './day5/HelloWorld';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <HelloWorld />
  </React.StrictMode>,
);

這邊在 import 中把建立的 HelloWorld.js 匯入，並且渲染這份檔案的 HelloWorld：

root.render(
  <React.StrictMode>
    <HelloWorld />
  </React.StrictMode>,
);

然後執行 React，打開瀏覽器的 http://localhost:3000/，就會出現我們的 Hello world。

後記

本來想要更複雜的運用，結果發現jsx不熟悉，只好先一步一步的前進。