React Native: Learn & Practice

Code Play

包含廣告

關於此應用程式

透過簡潔扼要的講解、實用的程式碼範例和小挑戰來學習 React Native。探索 10 個模組共 148 個課程，在程式碼遊樂場中開啟範例並進行修改，以了解介面的工作原理。

從基礎到實踐的清晰路徑

從文字、視圖、變數、元件、圖像和樣式入手。繼續學習 Flexbox 版面配置、表單、文字輸入、按鈕、觸控互動、捲動和清單。後續模組將介紹 Hooks、可重複使用元件、狀態管理、效能最佳化概念、響應式佈局和實踐專案。

先閱讀概念再進行編輯

每個課程都包含學習目標、簡單易懂的概述、關鍵概念、程式碼、實用技巧、小挑戰和自測題。查看範例及其解釋，準備進行實驗時，再開啟可編輯版本。 「初級」、「中級」和「實踐」標籤可協助您了解每個主題在課程中的位置。

嘗試自己的修改

使用內建的 JavaScript 和 JSX 編輯器來調整文字、值、樣式和元件行為。語法高亮和行號讓範例更容易理解。撤銷和重做功能可協助您探索更改，而重置程式碼功能則可將範例還原到初始狀態。點擊「運行應用程式」即可開啟應用程式內預覽，然後返回編輯介面進行另一次嘗試。

探索實用模式

學習受控輸入、表單驗證、密碼可見性、字元計數器、清單篩選、選用項目和空狀態。練習使用計數器、計時器、即時時鐘、溫度轉換器、小費計算器、卡片、手風琴、簡易標籤頁和迷你待辦事項清單。這些學習範例可讓您了解介面各個部分是如何組合在一起的。

尋找所需課程

搜尋課程標題或按模組縮小課程庫範圍。在所有課程、學習中課程、已儲存的收藏課程和已完成課程之間切換。使用“上一課”和“下一課”控製或在課程之間滑動。從篩選後的課程庫中開啟課程時，導覽會跟隨您選擇的課程，以便您始終專注於所選主題。

記錄您的學習進度
將課程加書籤以便複習，並在準備好後將其標記為已完成。主畫面顯示課程進度、已完成和已儲存的課程數量以及學習連續天數。您可以繼續上一課或學習下一個未完成的主題。進度和書籤都儲存在您的裝置本地。

返回您的實驗

運行範例會將程式碼儲存為該課程的本機草稿。重新開啟 Playground 即可恢復草稿，或將其重設以傳回原始程式碼。這樣，即使休息一段時間後，您也可以輕鬆地重新學習某個想法，而無需替換初始材料。

選擇舒適的介面

您可以選擇淺色模式、深色模式或系統主題來設定學習介面。閱讀概念，查看程式碼，進行一次重點修改，然後利用挑戰練習應用。

專為學生、對程式設計感興趣的初學者以及正在複習行動介面概念的開發人員而設計。範例在基於 Web 的預覽中運行；特定於平台的 API 和行為可能與原生應用程式有所不同。該應用程式包含廣告。這是一個獨立的教育應用；與 React Native 計畫無關，也未獲得其認可。