這邊我用CRA的環境來說

建立好之後你知道直接npm start可以直接啟動頁面，可是當你想開始寫的時候卻發現，我寫在哪?

首先是唯一的html檔案

1. index.html - 應用的入口文件

這個文件是一個簡單的 HTML 文件，其中最重要的是這一行：
<div id="root"></div>
這是我們應用的容器，React 會將所有內容渲染到這個 div 裡面。

基本上我們會讓他靜靜地躺在那，除了引入全局資源外基本不會動他

2. index.js - 渲染邏輯的入口點

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

這段代碼是應用的實際渲染邏輯，它做了以下幾件事情：

• ReactDOM.createRoot 找到 index.html 裡的 <div id="root"></div>，並告訴 React 應該在哪裡渲染內容。
• root.render 方法實際上是將 React 組件渲染到這個 div 裡面。
• React.StrictMode 是 React 提供的一種開發模式包裝，它會在開發過程中幫助檢測潛在問題。它只會在開發環境中運行，在生產環境中它並不會啟用。

所以我們捕抓到了要渲染的框root，接下來就是將我們要渲染的畫面渲染進root中

3. App.js - 組件

上面說到要將我們想渲染的畫面渲染進root中，而這些我們會稱為組件。

也就是說 index.js 內部的 App 組件會被渲染到 #root 裡面。App 組件內部定義了一些基本的 HTML 結構（使用 JSX），並通過 props、state 來管理和顯示數據。在這裡，當用戶修改 App.js 並保存時，React 應用會自動重新加載頁面，這是 CRA 提供的開發便利。

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

所以return當中就會直接寫html的語法，你可以把這個想像成innerhtml

然後最後的export default App則是js封裝元件，使得其他的js檔能夠引入

所以才會在index.js看到import App from './App';

4. app.test.js - 測試文件

啟動方式為npm test

我們拿預設的來說明

import { render, screen } from "@testing-library/react";
import App from "./App";

test("renders learn react link", () => {
    render(<App />);
    const linkElement = screen.getByText(/learn react/i);
    expect(linkElement).toBeInTheDocument();
});

• 使用 screen.getByText(/learn react/i) 查找 DOM 中包含 "learn react" 文字的元素。
• 使用 expect(linkElement).toBeInTheDocument() 確認該元素是否存在於 DOM 中。

雖然看似都在做同一件事情，但這就是在確認該組件的DOM是否有照著預期走，這跟單元測試pytest是很相近的概念

如果用Vite

如果你是用Vite的環境就會發現少了app.test.js，也印證了前幾篇所說的，CRA是針對React啟一個專門的完整環境，可是Vite為了做到輕量化則只保有必要的檔案只要能跑動就好，其餘的就要自己再安裝

今天就這樣囉