什么是 ReactJS，它可以用來做什么？
如果您想為您的 Web 應用程序創建快速、動態的用戶界面，那么您需要學習如何使用 ReactJS。
React 是一個客戶端 JavaScript 庫，這意味著它在瀏覽器中的客戶端/用戶機器上運行，而不是在服務器上運行。
它由科技巨頭 Facebook 于 2011 年創建。React 庫用于構建動態用戶界面，并通過將用戶界面的各個方面分離為所謂的“組件”來進行操作。
在本教程文章中，您將了解有關 React 及其組件的所有知識。
什么是 ReactJS？
React（也稱為 ReactJS）是一個開源 JavaScript 庫，通常被錯誤地稱為框架。這是因為 React 是 AngularJS 和 VueJS 等頂級 JavaScript 框架的直接競爭對手。
React 是一個庫，因為它在其他特定于框架的功能中沒有路由機制。但是，可以安裝一些工具，例如 react-router 并與該庫一起使用以實現框架功能。
與 jQuery 等語言中的其他庫相比，React 與 Angular/Vue 等框架的關系更密切。
使用 ReactJS 有什么好處？
許多開發人員出于多種不同的原因使用 React。有些人使用它是因為它的速度和性能，而另一些人使用它只是因為它很受歡迎。但是，所有開發人員都可以欣賞使用該框架的三個主要好處。
- 它允許您使用所謂的具有狀態和數據的“可重用組件”來構建您的界面。
- 它使用允許用戶編寫動態 HTML 的 JavaScript 語法擴展 (JSX)。
- 它使用虛擬文檔對象模型 (VDOM)，它允許開發人員更新網頁的特定部分，而無需重新加載頁面。
什么是 ReactJS 組件？
React 將用戶界面的每個部分都視為一個組件。組件具有狀態、方法和功能。
它們允許開發人員將用戶界面分成特定的部分，這些部分很容易組合以創建復雜的用戶界面。因此，如果要創建客戶經理，用戶界面的一個組件可以專門用于添加新客戶，而同一用戶界面的另一個組件可以專門用于顯示客戶列表。
在最簡單的形式中，組件是 JavaScript 類或函數。它們接受稱為“道具”的輸入值，并以 React 元素的形式返回用戶界面的特定方面。對于一些開發人員來說，將組件定義為函數比將其定義為類更簡單；但是，在 React 中使用任何一種方法都可以實現相同的輸出。
使用函數示例創建組件
function Customer() {
return (
<div>
<h3>Paul Wilson</h3>
<ul>
<li>Phone: 222-222-2222</li>
<li>Email: Wilsonp@email.com</li>
<li>Balance: $0.00</li>
</ul>
</div>
);
}
export default Customer;
使用類示例創建組件
import React from 'react';
class Customer extends React.Component {
render() {
return (
<div>
<h3>Paul Wilson</h3>
<ul>
<li>Phone: 222-222-2222</li>
<li>Email: Wilsonp@email.com</li>
<li>Balance: $0.00</li>
</ul>
</div>
);
}
}
export default Customer;
正如您從上面的示例中看到的那樣，當您使用類創建組件時會發生更多事情。首先要注意的是，在創建類組件時必須使用render()函數。
如您所知，您不能直接從課程中返回；因此，render()函數有助于實現這一點。
開發人員可能選擇使用類而不是函數的主要原因是類具有狀態，但是由于引入了鉤子，React 函數現在也可以具有狀態。
什么是 JavaScript 語法擴展？
JavaScript 語法擴展 (JSX) 是組件返回的 React 元素。它描述了特定部分/組件在用戶界面中的外觀。它的外觀類似于 HTML，但實際上是 JavaScript。
JSX 示例
<div>
<h3>Paul Wilson</h3>
<ul>
<li>Phone: 222-222-2222</li>
<li>Email: Wilsonp@email.com</li>
<li>Balance: $0.00</li>
</ul>
</div>
上面的 JSX 示例是從客戶組件中提取的。代碼看起來是 HTML，但它是 JSX。盡管從上面的示例中兩者之間的差異不是很明顯，但還是有一些明顯的差異。例如，在 HTML 中，您使用class屬性對相似的元素進行分組，但在 JSX 中，您使用className屬性。
什么是虛擬 DOM？
虛擬文檔對象模塊 (VDOM) 是真實 DOM 的副本。通常，當對真實 DOM 進行更新時，更改的用戶界面將需要刷新以顯示更改。但是，使用虛擬 DOM，對用戶界面的更改是即時的。然后，虛擬 DOM 的狀態用于在稱為“協調”的過程中更新真實 DOM。
探索 React 項目文件
當創建一個新的 React 項目時，會自動生成幾個不同的文件和文件夾。其中一個文件夾標記為public。public 文件夾包含 React 樣板文件中唯一的 HTML 文件，名為index.html。
index.html 文件有一個帶有根 id 的<div>標記，這很重要，因為這是主要的 React 組件被渲染的地方（這是給你的 React 組件轉換為可以顯示的 DOM 節點的過程的名稱在瀏覽器中）。
但是，渲染過程發生在另一個文件index.js中，React 應用程序根文件（即App.js文件）在該文件中被渲染，然后傳遞給index.html文件。
從index.html文件中，您可以更改 Web 應用程序的標題；但是，對 React 應用程序的所有其他調整（包括創建新組件）都是從另一個文件夾（即src文件夾）進行的。src文件夾包含index.js和App.js文件。
App.js文件是根react組件，它負責在第一個 React 應用程序啟動時最初在 Web 瀏覽器中顯示的內容。App.js文件包含一個名為App的函數，該函數返回 JSX。在此處了解有關 React 樣板以及如何安裝 React 應用程序的更多信息。
創建組件
創建組件時，您需要了解兩件事。第一個也是最重要的是，新創建的組件永遠不會顯示在您的用戶界面中，除非它被導入并在App組件（App.js文件）中使用。
第二件事是通常的做法是每個組件文件名都以大寫字母開頭。如上所述，可以使用函數或類來創建組件。然而，React 正在遠離類組件，現在主要使用函數。
創建新組件示例
function Customer() {
return (
<div>
<h3>Paul Wilson</h3>
<ul>
<li>Phone: 222-222-2222</li>
<li>Email: Wilsonp@email.com</li>
<li>Balance: $0.00</li>
</ul>
</div>
);
}
export default Customer;
上面的代碼創建了一個新的客戶組件并導出函數，這樣客戶組件就可以被App組件導入。
使用 App 組件示例
import Customer from './components/Customer';
function App() {
return (
<div>
<h1>Customer Manager</h1>
<Customer/>
</div>
);
}
export default App;
正如您在上面的示例中看到的那樣，應用程序組件導入客戶組件，并按照它應該出現在用戶界面中的順序排列它（在本例中位于customer manager標簽之后）。然后App組件被導出，并由index.js文件導入，在 DOM 中呈現和顯示。
關于App組件要記住的重要一點是只能有一個父元素（在上面的示例中是<div>標簽）。因此，該父元素之外的任何元素都不會顯示在 UI 中。
渲染 App 組件示例
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
上面的代碼顯示了index.js文件的內容，該文件使用上面代碼中的document.getElementById('root')方法使用 render 函數將App組件渲染到 DOM 。這可以通過index.html文件使用的根 ID 在瀏覽器中顯示以下輸出來實現：
現在您可以在 ReactJS 中創建組件
本文為您提供了 React 庫的全面視圖，以及如何利用它來創建令人驚嘆的用戶界面。使用 React，您的用戶界面不僅會表現良好并且看起來完全符合您的要求，而且它們也很容易維護（感謝組件）。
現在您可以使用 React 庫創建專業的用戶界面。但是沒有必要停留在 React 上。還有一系列其他工具可用于補充您的前端開發過程。
