學到這裡，相信大家已經完全了解react的寫法與原理，如果有上過我的課的，第一堂的時候，我都會跟大家說react實際是怎麼渲染的(透過codeSandBox講的)，是被編譯成DOM節點後渲染到瀏覽器裡的，所以我們之前用codeSandBox創建的檔案，實際上是純React專案，而不是中心的Next.js專案喔!!

Next.js專案比較常出現在大公司以及規模比較大的專案，是屬於比較專業的一種形式，但如果今天你只是想自己簡單練習，或者做一些小專案，那其實用Next.js是大材小用，而且專案設定檔案太多了，容易混亂。

這時候就要來使用純React專案 也就是CRA專案了!!

建立純React專案

with TypeScript

npx create-react-app 專案名稱 --template typescript

專案架構應該會像這樣

my-app/
  public/
    index.html
  src/
    App.js
    index.js
  package.json

執行的指令是

npm start

觀念釐清 (2/28/26更新)

到這裡或許有人已經混亂了，一下react一下next.js的，簡單來說我們現在寫的前端結構都是SPA (Single Page Application) 一種 Page router (頁面導向)的結構**，**而要產生這種架構的專案有兩種方式，一種就是透過Next.js的npx create-next-app@latest，另一個則是透過Node.js的npx create-react-app 。

這篇就是來針對這個Node.js下的CRA專案來做討論，既然都是同個結構(SPA)，為什麼我常說demo時比較適合用CRA這個工具。

檔案結構

my-app/
  public/
    index.html      ← React 自動掛載處
  src/
    App.js          ← 入口 UI
    index.js        ← 程式入口，負責 render <App />
    pages/          ← 網頁放這兒
      Home.js
      About.js
      Login.js
    components/     ← components與pages同層
      NavBar.js
    App.css
    index.css
  package.json

App.tsx

是整個 React 應用程式的「根元件」(root component)。也就是DOM樹的最上層。