React：使用 ReactJS 的完整初學者指南

您是否聽說過 ReactJS 但不知道從哪裡開始？ 您是否已經開始使用 ReactJS，但不確定如何在日常工作中使用它？ 本文將指導您學習和掌握 React JavaScript 庫，這是當今開發人員使用的最流行的庫。 我將向您確切展示如何開始使用 ReactJS 以及如何將其集成到您的工作流程中，以便您可以創建更多動態用戶界面，而不必通過其他框架或庫進行不必要的繞路。 讓我們開始吧！

什麼是 ReactJS？

React 是一個前端開發庫，鼓勵您構建可重用的組件。 如果您正在尋找一種創建用戶界面的有效方法，那麼 React 可能正是您所需要的。 使用 Vanilla JavaScript 或 jQuery 創建用戶界面時，您的代碼會很快變得非常複雜和笨拙。 通過使用 React 及其首選的基於組件的開發方法，您的代碼將更易於重用和維護。

事實上，一旦你構建了一些組件，你團隊中的其他開發人員就可以相對容易地加入並貢獻代碼，而無需任何 React 經驗（或知識）！

為您推薦：優化 React Native App 性能的 5 個有價值的技巧。

為什麼使用 ReactJS？

首先，當談到 JavaScript 框架時，你有一個選擇。 那麼，你為什麼會選擇 React？ 好吧，對於初學者來說，當涉及到幫助開發人員創建易於最終用戶理解和參與的大型應用程序時。

對於到目前為止只使用 jQuery 或 Vanilla JavaScript 的開發人員來說，學習如何使用新技術可能會令人沮喪。 在某些情況下，開發人員可能需要數百行代碼才能創建一個簡單的模態框或導航欄。 因為 React 使用虛擬 DOM 而不是每次狀態發生變化時都編寫和重寫真實的 DOM 元素（在 Angular 中經常這樣做），所以使用 React 可以通過減少代碼行來節省寶貴的時間，同時還可以使您的應用程序比以前更快前。

在瀏覽器中安裝

在瀏覽器中使用 React 之前，您需要先安裝它。 幸運的是，由於 npm 和 Browserify，這是一個簡單的過程。 使用 Node 或其他服務器端環境？ 您也可以為此使用 npm 和 Browserify。 安裝完所有內容後，使用您喜歡的文本編輯器創建一個 HTML 文件。 否則，使用像 Create-React-App 這樣的樣板生成器為您創建一個已經設置了所有這些東西的基本入門項目。

將 App.js 轉換為使用 ReactJS

我們所有的代碼目前都在一個名為 App.js 的文件中。 但這使得測試變得困難。 所以，讓我們把它分成多個文件。 我們將從將一個組件從用 ES6 編寫成用 JSX 編寫開始。 如果我們將所有 React 組件保存在一個目錄中（你應該這樣做），這是最簡單的。 因此，讓我們創建一個空的 src/components 目錄並將 App.js 移入其中：mv app/App.js src/components/app-react.js。 然後將其重命名為 app-react.js。

要使用 React 而不僅僅是 ES6，請更改 use strict； 在文件頂部使用 babel； 您還需要通過 npm install –save babel-CLI babel-preset-es2015 babel-preset-react 安裝 Babel，這將使 Babel 編譯您的新 JSX 語法。

使用我們的示例應用程序開始構建

有很多方法可以開始使用 React，但我們最喜歡的方法之一是構建一個簡單的待辦事項列表應用程序。 為了讓您快速行動並避免許多常見錯誤，我們構建了一個示例應用程序，您只需在其中交換後端代碼和前端組件。 它配備了您需要的一切——包括圖像——以確保它看起來和它一樣好用。

不想自己編碼？ 沒問題！ 您實際上可以按照這些簡單的步驟複製我們所有的組件。 將它們複製到項目中後，只需修改它們即可滿足您的目的！ 這是你的選擇！ 在此處查看所有三個入門選項。

使用組件的基本示例

如果您查看任何 Web 應用程序，您會注意到的第一件事就是每個元素都是獨立的。 在一個典型的頁面上，有不同的頁眉、頁腳、徽標和按鈕。 但是，在使用 React.js 時，您可以使用單個 HTML 元素來表示所有組件，而不是為頁面上的每個組件使用多個 HTML 元素。 這聽起來可能違反直覺； 畢竟，這不是我們多年來一直在做的事情嗎？

您可能喜歡： Facebook JavaScript 引擎 (Hermes) 提升 Android 上的 React Native。

JSX 語法介紹

JSX 不是像 JavaScript 或 TypeScript 這樣的編程語言，而是一種設計為 JavaScript 擴展的語法。 因此，對於新開發人員來說，了解它的工作原理以及可以在何處使用它非常重要。 JSX 代碼的編寫方式看起來與 HTML 非常相似，這使得 JSX 代碼成為同時學習兩種語言的新開發人員的重要第一步。 有關 JSX 的獨特之處以及如何輕鬆掌握它的更多信息，請閱讀我們完整的 ReactJS 教程！

要開始構建您的第一個 React 項目，請在終端中輸入 mkdir react_tutorial 來創建一個新目錄。 完成運行後，通過鍵入 cd react_tutorial 導航到新創建的目錄。 然後打開您的終端並通過鍵入 node -v 啟動 Node.js。

如果您成功安裝了 Node，您應該會在 Node 旁邊看到 v10.x。 如果沒有，如果您使用的是 macOS 或 Linux，請嘗試使用 nvm install 10。 如果這也不起作用，那麼谷歌應該能夠幫助找出那裡出了什麼問題！ 一旦 Node 正確安裝了 10+ 版本，我們就可以繼續從頭開始創建我們的項目了！

靜態 vs 動態 vs PureComponent

在使用現代 JavaScript 構建 Web 應用程序時，您可以通過三個主要選項來創建 UI 組件。 這些包括靜態 HTML（react-markup）、動態 AJAX 請求（react-data）和重用現有的 DOM 元素（react-pure）。 每種方法都有自己的優點，可以根據您的具體用例以不同方式應用。

例如，如果您知道某些元素將始終可用，那麼您可以將它們放在靜態 HTML 標記中。 但是，如果您需要從可能尚不存在的數據庫中獲取內容，使用 react-data 是更好的選擇。 在決定哪種組件創建方法最適合您的項目時，重要的是要考慮應用程序每個部分的穩定性和永久性。

ReactJS 組件中的生命週期方法

您可以在組件中使用一些生命週期方法來控制組件生命週期的不同部分。 componentWillMount() 方法在第一次渲染組件之前立即被調用。 在其中，您可以添加組件所需的任何初始化，例如使用 localStorage 保存信息。 componentDidMount() 方法也會在組件掛載和渲染後立即調用。 在這裡，您可以添加應該在組件完全初始化後運行的代碼（例如，創建新的網絡請求）。

在組件中處理狀態

Reacts 處理狀態管理的方式有些獨特。 要理解為什麼我們必須首先考慮大多數框架如何處理狀態。

傳統上，開發人員會認為組件的狀態存儲在自身內部。 這會導致很多問題。 如果一個組件想要更新另一個組件的狀態，它需要一個對該另一個組件的引用（props）才能這樣做。 如果您希望您的狀態對像或數組在組件之間保持同步，您需要某種所有組件都可以訪問的集中式數據存儲或事件發射器。

雖然對於只有兩個或三個不同狀態的小型應用程序中的組件來說可能足夠簡單，但是當您的應用程序具有數十種不同狀態時會發生什麼？ 你如何管理它們？

將數據從父組件傳遞到子組件

有兩種方法可以將數據從父組件傳遞到子組件：通過 props 或狀態。 通過 props 傳遞數據對於為組件定義變量很有用，例如定義數組中有多少項。 另一方面，如果你想傳入大對象（這可能會降低你的應用程序的速度）或定義你想從子組件中調用的函數，通過狀態傳遞數據會很有用。 讓我們回顧一下這兩種方法，看看什麼時候適合在我們的代碼中使用它們！

您可能還喜歡： React JS 在 Headless WordPress 中提供了哪些改進？

結論

當您聘請 ReactJS 開發人員時，請確保您選擇的自由職業者在使用 JavaScript、CSS、HTML 和 Node.js 方面經驗超過 5 年。 重要的是，您的開發人員可以通過提供示例項目和設計與您的特定要求相關的項目來展示他們的專業知識。 這將幫助他們輕鬆了解您的業務目標。

任何專家在開始任何工作之前總是會先問問題。 因此，在使用 React 框架構建網站時，聘請專家在適當的時候提出問題是必須的。 ReactJS 開發人員的平均招聘成本在每小時 40-100 美元之間。 但專家收費高於正常水平。 因此，在為使用 ReactJS 開發框架建立網站制定預算時，請記住這一點。

 本文由 Tagline Infotech LLP 的 Rahul Kalsariya 撰寫。