反應 Javascript 教程

Michael Zippo

在過去的幾年裡，React.js 已經成為一種流行的框架，用於開發有效的 Web 應用程序。如果您曾經使用過 JavaScript，那麼您很可能在某個時候聽說過 React 這個詞。

由 Facebook 開發的 React.js 是一個 JavaScript 庫用於構建用戶界面。 React 使開發人員可以輕鬆地為網站創建美觀的交互式用戶體驗。

根據 Stack Goal 2019 年開發者調查，React.js 是開發者最喜愛的 Web 框架。 React 非常受歡迎，以至於 Facebook、Codecademy 和紐約時報等網站都是使用 React 框架構建的。

本指南討論了使用 React 在線學習編程的最佳方式。我們將介紹開始 React 學習之旅所需的知識。

什麼是 JavaScript？

在討論之前React，我們需要講兩個概念：前端開發和JavaScript

一個網站主要有兩個組成部分：前端和後端。前端是用戶在網站上看到的。後端是用戶看不到的，例如在網站的進程中編寫腳本表單。

後端和前端代碼一起創建一個網站。與 HTML 和 CSS 一樣，JavaScript 是用於前端 Web 開發的基礎技術，它允許您創建動態 Web 內容。

什麼是 React？

React.js 是一個開源 JavaScript 庫。它用於為網頁創建用戶界面和組件。 Facebook 和開源社區維護 React.js

您可以使用 React 將網站的各個部分組合成組件，這些組件是小塊的構造離子為您的應用程序。 Questo approccio alla codifica basato su componenti ti Consente di ridurre la comettizione nel tuo codice e migliorare la velocità di un`applicazione web.

La libreria React è forse la libreria JavaScript pi√π popolare al mondo grazie alla sua semplicità d `使用。 React 的業務範圍從 Facebook 到 Netflix 和 Slack。

React 使用 JSX（JavaScript Extension 的縮寫），這使得使用類似 HTML 的語法編寫高效的 Web 變得容易。其次，React 提供了一個稱為虛擬 DOM 的功能，無需過多介紹，即可加快網站加載速度。

你需要學習嗎？ React？

對於任何初露頭角的前端 Web 開發人員來說，學習在 React.js 中編寫代碼是一項巨大的時間投資。但為什麼會這樣呢？首先，從紐約時報到 Facebook，各種各樣的大型組織都在使用 React。如果您知道如何使用 React 進行編碼，那麼您將擁有可以在簡歷中列出的出色技能。

其次，React 使開發現代 Web 應用程序變得容易。 React 提供了諸如聲明式語法和廣泛的外部庫等功能，可讓您構建強大的 Web 體驗。

React 變得越來越流行，出現了越來越多的原始資源。這應該會讓您更容易上手。

React 用於前端 Web 開發。這是構建用戶看到的網站部分的 Web 開發方面。

另一方面，後端開發是網站背後的“大腦”。

React 允許開發人員為前端創建可重用的組件。這為前端網站編寫過程帶來了更多結構，並有助於減少代碼重複。

學習 ReactJS 需要多長時間?

簡而言之，精通 React 的基礎知識需要一到六個月的時間。掌握 React 的確切時間取決於您的軟件開發經驗以及您願意投入多少時間來學習。

如果您每週花 10 小時學習 React，您將更快地學會使用該庫比你花更少的時間學習。如果你花兩個小時學習 React Day，你應該能夠在幾個月內掌握基礎知識。

這些時間框架沒有考慮到如果你沒有學習你會做出反應所需的時間。沒有經驗項目。由於 React 是一個 JavaScript 框架，你需要做的第一件事就是掌握 JavaScript 的基礎知識。然後你就可以開始研究如何使用 React 編程了。

React 難學嗎？

如果只要您熟悉 HTML、CSS 和 JavaScript 編碼，您就會發現很難不學習 React 的基礎知識。

雖然 React 有自己獨特的生態系統和開發實踐，但您不需要成為專家級程序員開始。您對一般 Web 開發實踐的了解將帶您走很長一段路。

您對 Web 開發越熟悉，就越容易學習 React。如果您有使用其他框架（例如 Angular）的經驗，它會有所幫助。這是因為您將更好地了解框架與更廣泛的 JavaScript 語言之間的關係。

學會快速做出反應

您相信嗎？學習反應是一種很好的利用時間嗎？偉大的！有一個問題需要回答：你如何學會快速反應

首先，我們將討論你在反應時需要知道的主要技能。接下來，我們將討論如何實際學習這些技能

發展你的技能

學習使用 React.js 編程與學習語言編程有點不同。這是因為與 CSS 或 HTML 等技術不同，React 是一個庫，它是另一種編程語言的一部分： JavaScript

為了在您的旅程中為您提供幫助，我們編制了一份您擁有的最佳技能列表。我必須構建。

學習 HTML、CSS 和 JavaScript

在你可以使用 React 編程之前，你需要學習 HTML、CSS 和 JavaScript。

雖然 HTML 和 CSS 不是必需的，但 React 使用的 JSX 語法是基於 HTML 的。您需要對 HTML 有很好的了解才能理解它是如何工作的。說到 JavaScript，React 是基於 JavaScript 的，所以沒辦法學習 JavaScript 編程。

你需要了解 JavaScript 的基礎知識，並且對 HTML 和 CSS 有很好的理解才能開始使用 React .最好的選擇是專注於學習 JavaScript ES6 或更高版本。這將為您提供建立 JavaScript 技能的良好基礎。這應該是學習 HTML 和 CSS 基礎知識的補充

這裡有一些資源可以用來學習 HTML、CSS 和 JavaScript 的基礎知識。

Introduction Karma HTML、CSS 和 JavaScript 指南
Codecademy Web 開發教程
如何在 Digital Ocean JavaScript 中編碼
W3Schools 的 HTML、CSS 和 JavaScript 教程
Mozilla JavaScript Basics

JSX

JSX 或 JavaScript 表達式，是一個`為 JavaScript 編寫的語法擴展使用與反應。 JSX 技術允許您描述用戶界面應該是什麼樣的網站。你應該從探索 JSX 的工作原理開始學習 React。了解如何使用 JSX 在用戶界面中創建元素。

以下是您應該探索的一些主題，以加深您對 JSX 的理解：

什麼是 JSX
什麼是JSX元素？
如何使用屬性
嵌套元素和外部 JSX
使用 JSX 渲染元素
使用 REACT DOM 渲染元素
虛擬 DOM

路由

路由，用外行的話來說，顯示用戶如何訪問你的網站。它是一個鏈接 URL 和你的應用程序的工具。考慮這個例子。你在你的主頁上，你有單擊並轉到您的簡歷頁面。這就是路由。

React Router 允許創建單頁 Web 應用程序而無需刷新用戶當前正在瀏覽的頁面。路由器使用構成調用組件的結構，它包含並顯示適當的信息。

組件

組件是構建所有基於 JS React 的應用程序的構建塊。所有使用 React 組件的網頁用於聲明站點的每個部分。例如，導航欄可以是一個組件，或者網頁上的一篇文章可以是一個組件。反過來，文章 c 組件可以由一個 co 組成mment 組件或文本組件。

組件允許您開發更易於維護和快速加載的用戶界面。以下是您在響應組件時應掌握的主要主題：

如何創建組件類
如何製作組件
如何實例化組件
如何與組件交互
如何在渲染函數中使用組件
如何從另一個文件中引用組件
已註冊和未註冊的組件

渲染列表

列表是任何網站 Web 的重要組成部分。在 React 中構建列表是熟悉 React 編碼基礎的好方法。隨著您了解 React，您應該花時間學習如何在網頁上顯示數據列表。

狀態和道具管理 < /h4>
State 指的是每個對像在網頁上的顯示方式。 React 應用程序中的每個組件都可以有自己的狀態，它是稱為 ce 的對象的一部分。
另一方面，Props 用於在組件之間共享代碼。要使用 React，您需要對狀態和道具都有很好的理解。以下是您需要了解的主要主題：

React 的狀態是什麼

this 關鍵字

如何在React中使用props

PropTypes

Redux

Redux 是一個 JavaScript 庫，可以輕鬆管理應用程序的“狀態”。根據您目前對組件的了解來考慮狀態。

組件的狀態就像傳遞給組件的 props，就像一個簡單的 JavaScript 對象。這個對象包含影響組件呈現方式的信息。

Is -what ? 這讓你感到困惑看起來 Redux 是它可以幫助您。管理數據並查看您對用戶操作的反應 Redux 使狀態管理變得更容易；但是，在啟動時有一點學習曲線。

下一步

我們只是觸及了 React for JS 概念的皮毛。因為庫 i如此受歡迎，經常更新可用。這些更新繼續添加更多功能，使使用 React 的體驗更加愉快。

我們上面介紹的主題將讓您了解 React 的基本功能。一旦掌握了這些主題，就可以繼續探索 React 生態系統的更高級概念：

高階組件
React 上下文
React hook
React components render prop
React icons
React form
React native
應用操作API正如你所看到的 React

，一旦你掌握了基礎知識，你可以學到很多東西！當您了解基礎知識時，這些論點就會自然而然地出現在您身上。它們都基於用於創建 REACT 庫的相同基本原則。

免費學習 React 的最佳方式

React 擁有龐大的開發者社區來支持該庫。這意味著可以用來學習 React 的資源並不短缺。雖然這是一件好事，但它也有可能很難找到值得你花時間的資源

在你開始學習 React 之前，問問自己。怎樣才能學得最好？是 - 你喜歡什麼教程？還是您更喜歡在線視頻？是 - 你喜歡在交互式項目上工作，還是你使用理論，然後構建你自己的項目？ .通過提前回答這個問題，你將能夠在尋找教育材料時縮小你的注意力

為了幫助你入門，這裡有一些你可以學習 React 的地方：

React 在線資源

查看 React 文檔

React 官方文檔是學習 React 的最佳內容來源之一。文檔隨著庫的每次更改而更新。這意味著您在網站上閱讀的所有內容都應反映最新版本的 React。

React 文檔由 React 核心團隊和熱情的 React 開發人員社區編寫。它被認為是高質量內容的來源。

由於文檔是由 React 團隊編寫的，因此您無需擔心任何商業利益。編寫文檔純粹是為了幫助人們更好地理解 React。你可以找到 React 文檔維護者。 <

h4 id = "h-reaction-resources"> 資源反應< /a>

REACT 資源是一個資源目錄，供使用 React 的人使用。在此過程中，您會發現大量可幫助您的指南，分為播客、書籍和講座等類別。

React 簡介

這個 freeCodeCamp 指南涵蓋了 React 的基礎知識。您將按照本指南學習如何創建一個從 API 檢索數據的小項目。

其他資源

除了官方 < a href="https://reactjs.org/tutorial/tutorial.html" target="_blank" rel="noopener"> React介紹 教程，有很多很多很棒的指南和教程，你可以用來學習 React。使用教程來教授 React 是磨練技能的好方法，因為作者通常會逐步處理他們的反思。

這意味著您可以輕鬆地了解所討論的內容。 .如果需要，如果遇到困難，您可以隨時回到教程中的前一點

這裡有一些適用於 React 的最佳教程和指南：

react 在線課程

另一種學習方式是通過在線課程 React 。在線課程就像你在大學裡上的一門課。但是你可以控制你在球場上行走的速度。如果卡住了，您可以隨時倒帶視頻。

React Starter Kit

React Starter Kit 是一個五部分的課程，沒有任何你反應的禮物。本課程附有說明課程所涵蓋概念的代碼片段。

Codecademy: 101 React

Codecademy 有一個關於 React 開發的在線課程。您將學習 JSX、生命週期方法、鉤子以及使用 React 構建 Web 應用程序所需了解的一切。

Scrimba：免費學習反應

Learn to react 是一個免費在線課程有 48 個視頻教程。您將深入了解 ReactDOM 和條件渲染等主題。

如果您正在尋找更多課程，請查看官方社區 React 課程列表。

React 教程

網上有很多 React 滿足的教程任何草根 React 開發者。除了幫助你練習的 React 編程課程和挑戰之外，教程通常會通過逐步說明或流程來磨練你的 React 開發技能。如果你想更好地進行前端開發，學習基本的 React 概念通過任何可用的方式可能會給您帶來優勢

! "PLUS: 什麼是數據庫模式？即使是高級學習者也很幸運，因為有很多 YouTube 頻道和網站提供有關更困難主題的 React 知識。其中一些教程使用流行的網站或移動應用程序通過分解元素來教授這些概念。在其他情況下，您可能需要與教程中的開發人員同時構建您的應用程序以實時練習您的技能。

這些教程中的大部分都可以在網絡上免費獲得，因此它們迫不及待地等待其中之一的結業證書。但是，經驗豐富的專業人士和軟件開發人員會指導這些教程。作為學習過程的一部分，您還將有機會參與具體項目