近年來，網路開發行業出現了穩定的增長；隨著這種增長的繼續，不斷有新的技術出現，以幫助開發人員建立使用者友好的網站和網路應用。
多年來，我們看到網路程式語言產生了額外的功能，更多的程式語言被用於建立網路技術，甚至還有框架和庫被建立在現有技術的結構上。
在本教程中，我們將談論React–最流行的基於元件的JavaScript庫，用於建立使用者介面。雖然本教程將完全適合初學者，但它也可以作為有經驗的React開發者的參考指南。
我們將討論React的特點、優點和缺點，為什麼你應該使用它，以及如何安裝和使用React。我們還將用實際的程式碼例子來看看React的一些核心功能。
在本教程結束時，你應該明白什麼是React，它是如何工作的，並且能夠在構建超強專案時使用它。
什麼是React？
React.js，通常被簡稱為React，是一個用於構建使用者介面的JavaScript庫。每個React網路應用都是由可重複使用的元件組成的，這些元件構成了使用者介面的一部分–我們可以為我們的導航欄準備一個單獨的元件，為頁尾準備一個，為主要內容準備一個，等等。當我們到了必須使用元件的部分時，你會更好地理解這一點。
有了這些可重複使用的元件，開發就更容易了，因為我們不必重複重複的程式碼。我們只需要建立它的邏輯，並將該元件匯入到需要它的任何部分的程式碼中。
React也是一個單頁應用程式。因此，每次要渲染一個新的頁面時，不是向伺服器傳送請求，而是直接從React元件載入頁面內容。這導致了更快的渲染，而不需要重新載入頁面。
在大多數情況下，用於構建React應用程式的語法被稱為JSX（JavaScript XML），它是對JavaScript的一種語法擴充套件。這使我們能夠以一種獨特的方式將JavaScript邏輯和使用者介面邏輯結合起來。有了JSX，我們就不需要使用 document.getElementById, querySelector 和其他DOM操作方法與DOM進行互動。
雖然使用JSX不是強制性的，但它使開發React應用程式更容易。
以下是我們如何在React中使用JSX的示例：
function App() {
const greetings = "Hello World";
return (
<div className="App">
<h1> {greetings} </h1>
</div>
);
}
}
在上面的程式碼中，我們使用了React函式元件來向瀏覽器呈現一段文字。元件的名稱為 App。我們在 render() 函式之前建立了一個變數。
然後，我們使用大括號將此變數傳遞給標記。這不是HTML，而是使用JSX編寫程式碼的語法。
在下一節中，我們將討論使用React的一些原因。
為什麼是React？
許多開發人員和組織選擇了React而不是其他庫/框架；原因如下：
- 容易學習： React很容易學習和理解，只要你對前提條件有很好的掌握。React有紮實的文件和大量由其他開發者通過React的非常活躍的社羣線上建立的免費資源。
- 可重複使用的元件：React的每個元件都有自己的邏輯，可以在應用的任何地方重複使用。這減少了多次重寫同一段程式碼的需要。
- 工作機會：目前，有較大比例的前端網路開發機會將React作為所需技能之一。因此，瞭解React的工作原理並能夠使用它，可以增加你找到工作的機會。
- 提高效能：有了React的虛擬DOM，渲染頁面的速度就會加快。當使用像React Router這樣的路由庫時，你會有不同的頁面被渲染，而不需要任何頁面過載。
- 廣泛的可擴充套件性：React是一個只渲染我們應用程式的使用者介面的庫。這取決於開發者選擇哪些工具來工作，比如渲染不同頁面的庫、設計庫等等。
誰在使用React？
React已經被許多初創公司和成熟公司的前端工程師使用，如Facebook、Netflix、Instagram、雅虎、Uber、紐約時報等。
雖然上面列出的所有公司都沒有使用React構建他們的整個產品，但他們的一些頁面是使用React構建的。這是因為React的高效能、易用性和可擴充套件性。
React的使用案例
React一般用於構建Web應用程式的使用者介面（前端）。它具有快速渲染頁面和提高效能的特點。React可以用來構建任何在網路上執行的產品。
以下是React常用於構建的一些東西：
- 音樂播放器應用程式
- 社交媒體應用
- 實時聊天應用
- 全棧式網路應用程式
- 電商應用
- 天氣應用
- 待辦事項列表應用
React的特點
React有大量驚人的功能，使它繼續成為開發者的熱門選擇。
以下是React的一些核心功能：
- JSX：這是一個JavaScript語法擴充套件，擴充套件了ES6（ECMAScript 2015）的功能。這使我們能夠在一個元件中結合JavaScript邏輯和標記。
- 虛擬DOM：這是一個DOM物件的副本，當發生變化時，它首先更新並重新渲染我們的頁面；然後將當前狀態與原始DOM進行比較，使其與變化保持同步。這導致了更快的頁面渲染。
- 元件：React應用程式是由不同的可重複使用的元件組成的，它們有各自的邏輯和使用者介面。這使得它能夠有效地擴充套件應用程式並保持高效能，因為你不會像其他框架那樣經常重複程式碼。
React的優點和缺點
React可能是一個用於構建我們的使用者介面的流行工具，但仍有一些原因使一些開發者或初學者選擇不使用它。
在本節中，我們將討論React的優點和缺點。
以下是使用React的優點：
- React很容易學習和理解。
- React有一個非常活躍的社羣，你可以在那裡做出貢獻，並在需要時獲得幫助。
- React開發者有很多工作機會。
- React可以提高應用程式的效能。
以下是使用React的一些缺點：
- 對JavaScript（尤其是ES6）沒有紮實瞭解的初學者可能會發現很難理解React。
- React沒有一些常見的功能，如單一狀態管理和路由；你必須安裝並學習如何使用外部庫來實現這些功能。
開始使用React
在本節中，我們將首先討論使用React的先決條件，然後深入到設定React應用程式，建立元件，處理事件，並在React中使用狀態、鉤子和道具。
使用React的先決條件
在使用React之前，你應該對JavaScript有一個很好的理解和經驗。以下是我們建議在使用React之前重新整理的一些JavaScript主題：
- 箭頭函式
- 休止符
- 擴充套件運算子
- 模組
- 去結構化
- 陣列方法
- 模板字詞
- 承諾
let和const關鍵字
上面的這些主題大多屬於ES6。你還應該有使用HTML的經驗，因為標記構成了JSX語法的一部分。
如何安裝React
在安裝React之前，確保你的電腦上安裝了Node.js。
一旦你成功地安裝了它，在終端執行以下命令：
node -v
如果一切順利的話，上面的命令應該會告訴你目前在你的電腦上安裝了哪個版本的Node.js。
接下來，我們要執行另一個命令來開始安裝React。
首先，建立一個資料夾或導航到你想要安裝React應用程式的位置，然後在終端執行下面的命令：
npx create-react-app react-kit
上面的命令將把React安裝在一個叫做react-kit的資料夾中。
一旦安裝完成，在你選擇的程式碼編輯器中開啟你新安裝的React資料夾。在本教程中，我們將使用Visual Studio Code。Visual Studio Code帶有一個整合終端。如果你要使用不同的終端，如Git Bash或CMD，那麼只要導航到你的React應用目錄並執行以下命令：
npm run start
這個命令啟動了你的開發伺服器。過了一會兒，你應該在你的瀏覽器中看到下面這個頁面在localhost:3000上呈現：
安裝後的React開發伺服器
如果你跟進到這一點，那麼你已經成功地安裝了你的第一個React應用。祝賀你
當你看一下你的資料夾結構，你會看到一個叫public的資料夾。這個資料夾有一個index.html檔案，我們的程式碼將被注入並提供給瀏覽器。
src資料夾是我們所有邏輯、樣式和標記的地方；這是我們的開發資料夾，其中的App.js檔案是根元件。這個檔案中的程式碼就是我們上圖中的內容。
開啟App.js檔案，對該檔案進行一些修改，然後儲存，可以看到它在瀏覽器中自動反映出來。
都準備好了？現在讓我們來寫一些程式碼吧!
React中的元件
React中主要有兩種型別的元件：類和功能元件。React文件目前正在使用Hooks重寫，這是功能元件中的一個特性。我們將在本教程中也使用功能元件，因為它們已經成為React應用中最廣泛使用的元件。
在大多數情況下，元件會返回一些HTML程式碼，其中夾雜著用JavaScript建立的動態值。元件的建立就像JavaScript中的函式。
建立一個React類元件
讓我們看一下React中類元件的例子。
每個類元件都必須包括 React.Component 語句和 render() subclass。
class Student extends React.Component {
constructor() {
super();
this.state = {language: "JavaScript"};
}
render() {
return <p>I am learning {this.state.language} </p>;
}
}
在上面的元件中，我們建立了一個名為 language 的狀態變數，字串值為 “JavaScript”。然後我們在我們的標記中使用這個變數。這個例子展示了我們如何在不引用任何DOM方法的情況下混合使用JavaScript和HTML。
當這個東西被渲染到瀏覽器上時，我們會看到 “I am learning JavaScript”被渲染到頁面上。
建立一個React功能元件
在這一節中，我們將使用一個功能元件重新建立上一節中的例子。
把這個函式新增到你的檔案中：
function Student() {
const language = "JavaScript";
return (
<div>
<p>I am learning { language } </p>
</div>
);
}
我們元件的名稱是一樣的：Student。總是以大寫字母開始你的元件的名稱。這個變數也被傳遞到了標記中，就像我們在上一節中所做的那樣，沒有使用vanilla JavaScript DOM方法來操作DOM。
這個元件也有一個被渲染的 Student 變數，但是隨著我們在教程中的進展，我們將使用一個叫做 useState 的Hook來建立我們的狀態變數。
處理React中的事件
React中使用的事件與我們在HTML中使用的事件完全相似。唯一的區別是，React的事件是用camelCase語法編寫的。所以 “onclick “在React中是 “onClick”，”onchange “是 “onChange”，以此類推。
當把事件作為HTML標籤中的一個屬性傳遞時，我們使用大括號：onClick={changeName}，而不是引號： onClick=”changeName”
下面是一個例子（在App.js檔案中）：
import { useState } from "react";
function App() {
const [name, setName] = useState("John");
const changeName = () => {
setName("James");
};
return (
<div className=”App”>
<p>His name is {name}</p>
<button onClick={changeName}> Click me </button>
</div>
);
}
export default App;
在上面的程式碼中，我們建立了一個函式，在瀏覽器中提示一個資訊。我們還建立了一個按鈕，在點選時呼叫這個函式。這裡使用的事件處理程式是 onClick 事件處理程式。
你會注意到，函式名是用大括號包裹的，而不是引號。這就是在使用JSX時，如何將變數和函式名這樣的動態值傳遞到標記中。
另外，我們沒有像使用HTML時那樣使用 “class”，而是使用 “className”。這是因為 “class “是JavaScript中的一個保留詞。
我們在最後一行匯出了我們的元件。這使我們能夠將它們匯入到其他元件中。
在React中使用狀態
當我們在React中管理應用程式的狀態時，我們使用一個叫做 useState 的鉤子。Hooks允許我們訪問額外的React功能，而無需編寫一個類。
通過Hooks，我們可以管理我們元件的狀態，甚至在我們的狀態變數第一次呈現或改變時執行某些效果。
如果在功能元件中沒有 useState 鉤子，對我們的狀態變數的任何改變都不會反映到DOM中，所以狀態將保持不變。
讓我們來看看一個例子。
import { useState } from "react";
function App() {
const [name, setName] = useState("John");
const changeName = () => {
setName("James");
};
return (
<div className=”App”>
<p>His name is {name}</p>
<button onClick={changeName}> Click me </button>
</div>
);
}
export default App;
現在，讓我們來看看我們剛剛做了什麼。
我們首先從React匯入了 useState 鉤子。然後我們建立了一個名為name的狀態變數和一個函式–setName–它將被用來更新name變數的值。name變數的初始值在 useState 鉤子中被儲存為 “John”。
接下來，我們建立了一個名為changeName的函式，它使用setName 函式來更新name 變數的值。
在我們的標記中，一旦按鈕被點選，”John”就被改為 “James”。
在下一節，我們將看到如何在React中使用另一個鉤子。
在React中使用鉤子
在上一節中，我們看到了如何使用 useStatet 鉤子來管理我們應用程式的狀態。在本節中，我們將看到如何使用 useEffect 鉤子。
useEffect 鉤子在每次狀態發生變化時執行一個效果。預設情況下，這個Hook會在第一次渲染和狀態更新時執行，但我們可以配置並將效果附加到各自的狀態變數上。
讓我們來看看一些例子：
import { useState, useEffect } from "react";
function App() {
const [day, setDay] = useState(1);
useEffect(() => {
console.log(`You are in day ${day} of the year`);
});
return (
<div>
<button onClick={() => setDay(day + 1)}>Click to increase day</button>
</div>
);
}
export default App;
我們在這裡做的第一件事是匯入 useEffect 鉤子。
每次我們點選按鈕，name變數就會增加一個，name值的變化會使 useEffect 鉤子向控制檯記錄一條資訊–每次name變數變化都會發生這種情況。
在下一節中，我們將討論Props和元件之間的資料流。
在React中使用Props
Props允許我們將資料從一個元件傳遞到另一個元件。這使得我們的應用程式中的資料流變得動態和可維護。Props是屬性的簡稱。
讓我們看一個如何使用Props的例子。
這就是我們的App.js檔案的樣子：
function App() {
return (
<div>
</div>
);
}
export default App;
我們建立另一個名為Bio.js的元件，看起來像這樣：
function Bio() {
return (
<div>
<p>My name is John</p>
<p>I am a JavaScript developer</p>
</div>
);
}
export default Bio;
接下來，我們將像這樣把Bio元件匯入我們的App元件：
import Bio from "./Bio";
function App() {
return (
<div className="App">
<Bio/>
</div>
);
}
export default App;
第一行是我們匯入Bio元件的地方。然後我們把這個元件放在我們的App元件的 div 標籤之間。當你在瀏覽器中檢視時，你會看到我們在Bio元件中建立的程式碼被呈現出來。
現在您瞭解瞭如何在React中重用程式碼。但這段程式碼是靜態的；它在所用的任何元件中都是相同的。在我們希望使用相同的元件但資訊不同的情況下，這不會有效。
讓我們用道具來解決這個問題。
在Bio.js元件，執行以下操作：
function Bio({name, language}) {
return (
<div>
<p>My name is { name }</p>
<p>I am a { language } developer</p>
</div>
);
}
export default Bio;
我們首先對結構進行分解，並將 name 和 language 作為引數傳入。然後，這些引數在我們的標記中被動態地使用。
我們在最後一行程式碼中匯出了該元件： export default Bio; ，以便讓我們將其匯入任何需要其邏輯的其他元件中。
目前，我們看不到它們的任何值被顯示出來。我們將在App元件中做到這一點；下面是方法：
import Bio from "./Bio";
function App() {
return (
<div className="App">
<Bio name="James" language="Python"/>
</div>
);
}
export default App;
我們在Bio標籤上新增了與我們之前建立的道具相對應的屬性。我們在這些屬性中傳遞的任何值都將在瀏覽器上呈現。這對於那些將在多個元件中使用但需要各自不同資料的元件很重要。
哪裡可以學到更多
本教程為你提供了開始用React構建Web應用所需的基本知識，但並不是關於React的全部知識。使用React構建一個高效的應用程式還需要其他功能，比如在有多個頁面的應用程式中進行路由，以及使用Redux等工具進行單一狀態管理。
開始探索更多關於React的資訊的最好地方是React文件。你也可以檢視正在使用Hooks重寫的測試版文件。
小結
與開發者社羣的其他庫/框架相比，React作為一個前端庫一直在大規模增長，並且沒有停止的跡象。你可以在每個現代Web開發者的路線圖上找到React。
隨著目前越來越多的開發者採用web3技術，React仍然是構建去中心化應用程式（DApps）前端的最愛工具。
你可以用React構建各種應用，從簡單的待辦事項網路應用到市場、儀表盤等等。
React可以和很多技術一起使用，比如Bootstrap、Tailwind CSS、Axios、Redux、Firebase等等。我們還可以將React與Node.js和其他後端語言一起使用，建立全棧式的應用程式和網路應用程式，以閃電般的速度執行。
評論留言