建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
React 是一個(gè)客戶(hù)端 JavaScript 庫(kù)，這意味著它在瀏覽器中的客戶(hù)端/用戶(hù)機(jī)器上運(yùn)行，而不是在服務(wù)器上運(yùn)行。
成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括曾都網(wǎng)站建設(shè)、曾都網(wǎng)站制作、曾都網(wǎng)頁(yè)制作以及曾都網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，曾都網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶(hù)以成都為中心已經(jīng)輻射到曾都省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶(hù)的支持與信任！
它由科技巨頭 Facebook 于 2011 年創(chuàng)建。React 庫(kù)用于構(gòu)建動(dòng)態(tài)用戶(hù)界面，并通過(guò)將用戶(hù)界面的各個(gè)方面分離為所謂的“組件”來(lái)進(jìn)行操作。
在本教程文章中，您將了解有關(guān) React 及其組件的所有知識(shí)。
什么是 ReactJS？
React（也稱(chēng)為 ReactJS）是一個(gè)開(kāi)源 JavaScript 庫(kù)，通常被錯(cuò)誤地稱(chēng)為框架。這是因?yàn)?React 是 AngularJS 和 VueJS 等頂級(jí) JavaScript 框架的直接競(jìng)爭(zhēng)對(duì)手。
React 是一個(gè)庫(kù)，因?yàn)樗谄渌囟ㄓ诳蚣艿墓δ苤袥](méi)有路由機(jī)制。但是，可以安裝一些工具，例如 react-router 并與該庫(kù)一起使用以實(shí)現(xiàn)框架功能。
與 jQuery 等語(yǔ)言中的其他庫(kù)相比，React 與 Angular/Vue 等框架的關(guān)系更密切。
使用 ReactJS 有什么好處？
許多開(kāi)發(fā)人員出于多種不同的原因使用 React。有些人使用它是因?yàn)樗乃俣群托阅埽硪恍┤耸褂盟皇且驗(yàn)樗苁軞g迎。但是，所有開(kāi)發(fā)人員都可以欣賞使用該框架的三個(gè)主要好處。
- 它允許您使用所謂的具有狀態(tài)和數(shù)據(jù)的“可重用組件”來(lái)構(gòu)建您的界面。
- 它使用允許用戶(hù)編寫(xiě)動(dòng)態(tài) HTML 的 JavaScript 語(yǔ)法擴(kuò)展 (JSX)。
- 它使用虛擬文檔對(duì)象模型 (VDOM)，它允許開(kāi)發(fā)人員更新網(wǎng)頁(yè)的特定部分，而無(wú)需重新加載頁(yè)面。
什么是 ReactJS 組件？
React 將用戶(hù)界面的每個(gè)部分都視為一個(gè)組件。組件具有狀態(tài)、方法和功能。
它們?cè)试S開(kāi)發(fā)人員將用戶(hù)界面分成特定的部分，這些部分很容易組合以創(chuàng)建復(fù)雜的用戶(hù)界面。因此，如果要?jiǎng)?chuàng)建客戶(hù)經(jīng)理，用戶(hù)界面的一個(gè)組件可以專(zhuān)門(mén)用于添加新客戶(hù)，而同一用戶(hù)界面的另一個(gè)組件可以專(zhuān)門(mén)用于顯示客戶(hù)列表。
在最簡(jiǎn)單的形式中，組件是 JavaScript 類(lèi)或函數(shù)。它們接受稱(chēng)為“道具”的輸入值，并以 React 元素的形式返回用戶(hù)界面的特定方面。對(duì)于一些開(kāi)發(fā)人員來(lái)說(shuō)，將組件定義為函數(shù)比將其定義為類(lèi)更簡(jiǎn)單；但是，在 React 中使用任何一種方法都可以實(shí)現(xiàn)相同的輸出。
使用函數(shù)示例創(chuàng)建組件
function Customer() {
return (
);
}
export default Customer;使用類(lèi)示例創(chuàng)建組件
import React from 'react';
class Customer extends React.Component {
render() {
return (
);
}
}
export default Customer;
正如您從上面的示例中看到的那樣，當(dāng)您使用類(lèi)創(chuàng)建組件時(shí)會(huì)發(fā)生更多事情。首先要注意的是，在創(chuàng)建類(lèi)組件時(shí)必須使用render()函數(shù)。
如您所知，您不能直接從課程中返回；因此，render()函數(shù)有助于實(shí)現(xiàn)這一點(diǎn)。
開(kāi)發(fā)人員可能選擇使用類(lèi)而不是函數(shù)的主要原因是類(lèi)具有狀態(tài)，但是由于引入了鉤子，React 函數(shù)現(xiàn)在也可以具有狀態(tài)。
什么是 JavaScript 語(yǔ)法擴(kuò)展？
JavaScript 語(yǔ)法擴(kuò)展 (JSX) 是組件返回的 React 元素。它描述了特定部分/組件在用戶(hù)界面中的外觀。它的外觀類(lèi)似于 HTML，但實(shí)際上是 JavaScript。
JSX 示例
上面的 JSX 示例是從客戶(hù)組件中提取的。代碼看起來(lái)是 HTML，但它是 JSX。盡管從上面的示例中兩者之間的差異不是很明顯，但還是有一些明顯的差異。例如，在 HTML 中，您使用class屬性對(duì)相似的元素進(jìn)行分組，但在 JSX 中，您使用className屬性。
什么是虛擬 DOM？
虛擬文檔對(duì)象模塊 (VDOM) 是真實(shí) DOM 的副本。通常，當(dāng)對(duì)真實(shí) DOM 進(jìn)行更新時(shí)，更改的用戶(hù)界面將需要刷新以顯示更改。但是，使用虛擬 DOM，對(duì)用戶(hù)界面的更改是即時(shí)的。然后，虛擬 DOM 的狀態(tài)用于在稱(chēng)為“協(xié)調(diào)”的過(guò)程中更新真實(shí) DOM。
探索 React 項(xiàng)目文件
當(dāng)創(chuàng)建一個(gè)新的 React 項(xiàng)目時(shí)，會(huì)自動(dòng)生成幾個(gè)不同的文件和文件夾。其中一個(gè)文件夾標(biāo)記為public。public 文件夾包含 React 樣板文件中唯一的 HTML 文件，名為index.html。
index.html 文件有一個(gè)帶有根 id 的
但是，渲染過(guò)程發(fā)生在另一個(gè)文件index.js中，React 應(yīng)用程序根文件（即App.js文件）在該文件中被渲染，然后傳遞給index.html文件。
從index.html文件中，您可以更改 Web 應(yīng)用程序的標(biāo)題；但是，對(duì) React 應(yīng)用程序的所有其他調(diào)整（包括創(chuàng)建新組件）都是從另一個(gè)文件夾（即src文件夾）進(jìn)行的。src文件夾包含index.js和App.js文件。
App.js文件是根react組件，它負(fù)責(zé)在第一個(gè) React 應(yīng)用程序啟動(dòng)時(shí)最初在 Web 瀏覽器中顯示的內(nèi)容。App.js文件包含一個(gè)名為App的函數(shù)，該函數(shù)返回 JSX。在此處了解有關(guān) React 樣板以及如何安裝 React 應(yīng)用程序的更多信息。
創(chuàng)建組件
創(chuàng)建組件時(shí)，您需要了解兩件事。第一個(gè)也是最重要的是，新創(chuàng)建的組件永遠(yuǎn)不會(huì)顯示在您的用戶(hù)界面中，除非它被導(dǎo)入并在App組件（App.js文件）中使用。
第二件事是通常的做法是每個(gè)組件文件名都以大寫(xiě)字母開(kāi)頭。如上所述，可以使用函數(shù)或類(lèi)來(lái)創(chuàng)建組件。然而，React 正在遠(yuǎn)離類(lèi)組件，現(xiàn)在主要使用函數(shù)。
創(chuàng)建新組件示例
function Customer() {
return (
);
}
export default Customer;上面的代碼創(chuàng)建了一個(gè)新的客戶(hù)組件并導(dǎo)出函數(shù)，這樣客戶(hù)組件就可以被App組件導(dǎo)入。
使用 App 組件示例
import Customer from './components/Customer';
function App() {
return (
Customer Manager
);
}
export default App;
正如您在上面的示例中看到的那樣，應(yīng)用程序組件導(dǎo)入客戶(hù)組件，并按照它應(yīng)該出現(xiàn)在用戶(hù)界面中的順序排列它（在本例中位于customer manager標(biāo)簽之后）。然后App組件被導(dǎo)出，并由index.js文件導(dǎo)入，在 DOM 中呈現(xiàn)和顯示。
關(guān)于App組件要記住的重要一點(diǎn)是只能有一個(gè)父元素（在上面的示例中是
渲染 App 組件示例
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(,
document.getElementById('root')
);
上面的代碼顯示了index.js文件的內(nèi)容，該文件使用上面代碼中的document.getElementById('root')方法使用 render 函數(shù)將App組件渲染到 DOM 。這可以通過(guò)index.html文件使用的根 ID 在瀏覽器中顯示以下輸出來(lái)實(shí)現(xiàn)：
現(xiàn)在您可以在 ReactJS 中創(chuàng)建組件
本文為您提供了 React 庫(kù)的全面視圖，以及如何利用它來(lái)創(chuàng)建令人驚嘆的用戶(hù)界面。使用 React，您的用戶(hù)界面不僅會(huì)表現(xiàn)良好并且看起來(lái)完全符合您的要求，而且它們也很容易維護(hù)（感謝組件）。
現(xiàn)在您可以使用 React 庫(kù)創(chuàng)建專(zhuān)業(yè)的用戶(hù)界面。但是沒(méi)有必要停留在 React 上。還有一系列其他工具可用于補(bǔ)充您的前端開(kāi)發(fā)過(guò)程。
當(dāng)前標(biāo)題：什么是ReactJS，它可以用來(lái)做什么？
文章起源：http://m.fisionsoft.com.cn/article/codphjj.html
