Hello World

React 最簡單的範例看起來像是：

ReactDOM
  .createRoot(document.getElementById('root'))
  .render(<h1>Hello, world!</h1>);

在頁面上顯示「Hello, world!」。

在 CodePen 上試試看吧！

點擊上方連結開啟線上編輯器。請隨意的變更程式碼並觀察它們的輸出變化。這個指南大部分的範例都可以像這樣編輯。

如何閱讀本指南

在這份指南中，我們會研究 React 應用程式的基本組成：元素與組件。一旦理解它們之後，你可以從小巧且可覆用的 component，拼湊出複雜的應用程式。

Tip

本篇指南設計給喜歡按部就班的朋友。若喜歡動手做的朋友，請參考我們的實用指南。你可能會發現本篇指南和教學課程其實是相輔相成的。

本篇是 React 主要概念的第一章節。你可以在側邊的導航欄中找到所有章節的列表。如果你從手機裝置上瀏覽，可以透過點擊螢幕右下角的按鈕來瀏覽選單。

本篇指南的每個章節都是基於前一章節的知識。你可以按照側邊欄中顯示的順序閱讀「主要概念」指南章節，來了解 React 大部分的內容。舉例來說，這篇章節的下一章是「JSX 入門」。

需要的知識

React 是一個 JavaScript 的函式庫，而且我們假設你有一些 JavaScript 的基礎知識。如果你感到沒有自信的話，我們推薦讀過一遍這個 JavaScript 教學課程來確認你的知識水平如何，確保你可以跟上本篇指南。這需要花費大概 30 分鐘到 1 小時，但你不會覺得你在學習 React，同時又在學習 JavaScript。

注意

本篇指南偶爾會使用較新的 JavaScript 語法。若近年內沒有接觸過 JavaScript，只要看一下這三個心法即可。

馬上開始吧！

繼續滾動頁面至底部，你會在網頁的右下角找到進入下一章的連結。