We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev

Hello World

These docs are old and won’t be updated. Go to react.dev for the new React docs.

See Quick Start for an introduction to React.

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

const root = ReactDOM.createRoot(document.getElementById('root'));
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,只要看一下這三個心法即可。

馬上開始吧!

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

Is this page useful?Edit this page