今天主要閱讀的內容，會是 React 官網裡的 快速開始 (Quick Start) 頁。但在開始閱讀之前，會想簡單介紹一下我所知道的 React。

React 簡介

React 簡單來說就是由各種大大小小的 Components 所組成產生 UI 的應用程式，而這些 Component 的寫法跟 JavaScript 裡的 函式 (function)，並且會 回傳 (return) JSX 格式，JSX 之後會再更詳細的介紹，而如果有讀者還不熟 JavaScript 的語法的話，跟 快速開始 這頁推薦的一樣，十分推薦去閱讀 MDN 上的整理，像是想知道 function 的一些資訊就可以這裡查詢：

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function

回到 Component，一個簡單的 React Component 可以寫成像是以下：

function MyFirstComponent() {
  return <div>
    <h1>Hello World!</h1>
  </div>
}

注意我們在宣告 React Component 的時候，命名一定要是第一個字大寫，另外通常會習慣用 PascalCase 來進行命名，簡單的來說就是單字連在一起的第一個字都大寫，例如有一個 Component 叫做 看更多按鈕 (watch more button)，就會命名為 WatchMoreButton。

另外我們也可以在 Component 裡面使用其他 Component，像是：

function App() {
  return <div>
    <h1>My First Component</h1>
    <MyFirstComponent />
  </div>
}

基本上用 React 的應用程式就是這樣組成，而且這些 Component 也可以重複利用，所以要如何設計這些 Component 就會是在寫 React 的時候非常重要的課題。

線上編輯器

簡單介紹完 React，接下來想介紹一下一個好用的線上編輯器，讓我們在想測試一些 React 的程式碼的時候，不用特別去為了開發環境而煩惱。
在閱讀官方文件的時候，可以發現到官網有提供很多範例程式碼，並且是可以在裡面進行修改的，而這些程式碼底下，都是使用 CodeSandbox 這個線上編輯器網站。他不但可以免費使用 React，其他的框架他也有提供，是一個十分方便的網站。此外，他也可以 fork 別人的專案再自行修改，React 官網裡就也有一個 Fork 按鍵提供使用：

我之後使用的範例也都會在 CodeSandbox 上面，大家可以多熟悉看看。React 官方文件裡也有提供其他方式使用 React 有興趣的人也可以參考看看：

• https://zh-hant.react.dev/learn/installation

小結

今天大概先到這邊，明天會繼續來讀 快速開始 這頁裡的內容，其實裡面已經包含很多平常在寫 React 會使用到的各種東西了，我看能不能跟一些平常我在工作會用到的東西做一下連結。
最後感謝大家耐心地看完這篇文章，明天見，晚安。