如何在 Windows 上安裝 React？ 完整指南

ReactJS 是一個免費的開源 JavaScript 庫，它顯著改變了古老的前端開發技術。 React 於 2013 年公開，是 Facebook 的內部項目。 從那時起，React 就被各種組織和初創公司採用。 具備足夠的 JavaScript、HTML 和 CSS 知識的前端開發人員可以為 Web 和移動應用程序創建交互式用戶界面。 ReactJS 的最大優勢之一是其基於組件的方法。 構建具有自己獨立狀態的封裝可重用組件可以簡化複雜的用戶界面。

有趣的是，我們在 ReactJS 中編寫的任何內容都可能看起來像 HTML，但事實並非如此。 它被稱為 JSX，JavaScript XML 文件。 此 JSX 生成 React“元素”，這些“元素”被渲染到文檔對像模型中。 通俗地說，JSX 允許我們在 HTML 主體內部編寫 JavaScript 邏輯。 從而使 React 更加簡單易懂。

為了更好地發揮它的作用，讓我們深入了解如何在 Windows 中安裝 React JS。

如何在 Windows 上安裝 React JS？

Windows 的系統要求

雖然使用 ReactJs 非常輕鬆，但如何在 Windows 中安裝 React JS的過程卻非常繁瑣。 由於 ReactJS 是一個開源項目，它並不像從 Internet 下載軟件那麼簡單。 首先，在 Windows 上使用 ReactJS 有一些先決條件。

1. Windows 版本：Windows XP、Windows 7（32/64 位）或更高版本。
2. 至少需要 4 GB RAM。
3. 硬盤驅動器上至少有 10 GB 的磁盤空間。
4. Internet 瀏覽器，例如 Chrome、Microsoft Edge、Firefox 等。
5. 一個用於調試和測試用 ReactJS 編寫的代碼的編輯器。

從世界一流大學在線學習軟件開發課程。 獲得執行 PG 課程、高級證書課程或碩士課程，以快速推進您的職業生涯。

下載並安裝 Node.js

Node.js 是幫助您在系統上運行 ReactJS 代碼的服務器。 很像 ReactJS，它也是開源的。 Node.js 安裝程序包括 NPM（節點包管理器），其中包含開發人員用來在開源社區中託管和發布自己的模塊的各種節點模塊。 因此，Node 與 NPM 註冊表一起工作，這使得使用 NPM CLI 安裝任何包變得更加容易。 Node 進一步將 R​​eactJS 應用程序包裝成一個使用 web 包的單一應用程序，以便於安裝。

以下是下載和安裝 Node.js 的分步過程：

1. 要安裝 Node.js，請轉到https://nodejs.org/en/ 。
2. 根據您的 Windows 操作系統版本，您必須選擇合適的安裝程序。
3. Node.js 主頁根據您的操作系統推薦 LTS 版本。 單擊它將自動開始下載。
4. 您將在下載文件夾中找到安裝程序。 運行安裝程序。
5. 安裝嚮導將出現在屏幕上，要求提供最終用戶許可協議。 接受條款和條件以繼續安裝。
6. 然後用戶必須使用安裝程序的默認路徑選擇目標文件夾。 單擊下一步繼續。
7. 安裝程序隨後會顯示將要安裝的功能，並將環境路徑變量設置為命令提示符。 單擊下一步開始安裝。
8. 安裝完成後，使用命令提示符驗證系統中的 Node.js。
9. 在命令提示符中鍵入“node -v”以檢查安裝的 Node.js 版本。
10. 在命令提示符下鍵入“npm -v”以驗證 npm 的安裝。

安裝 React

安裝 Node.js 後，我們可以使用兩種技術在 Windows 上安裝 React JS ：

• 使用 web pack 和 Babel

1. 創建根文件夾

在安裝 ReactJS 之前，在命令提示符下使用以下命令創建一個名為“reactFile”的根文件夾。

C:\Users\用戶名\Desktop>mkdir reactFile

C:\Users\用戶名\Desktop>cd reactFile

創建目錄後，在命令提示符下使用以下命令生成 package.json 文件。 package.json 文件有助於創建模塊。

C:\Users\用戶名\Desktop>reactFile> npm init

命令提示符然後詢問有關模塊的信息； 通過選擇“-y”選項跳過它。

2.安裝React和react-dom

使用以下 npm 命令安裝 React 和 react-dom 包，並使用“-save”命令將包添加到 package.json 文件。

C:\Users\用戶名\Desktop>reactFile> npm install react –save

C:\Users\用戶名\Desktop>reactFile> npm install react-dom –save

探索我們的軟件開發免費課程

3.安裝網絡包

使用以下命令安裝 webpack、webpack-dev-server 和 webpack-cli。

C:\Users\用戶名\Desktop>reactFile> npm install webpack webpack-dev-server webpack-cli –save

4. 安裝巴別塔

Babel 是一個轉譯器，可將 JavaScript 代碼轉換為瀏覽器可以理解的內容。 因此安裝 Babel 及其後續插件 babel-loader、babel-preset-env、babel-preset-react 和 html-webpack-plugin 非常重要。

使用以下命令一次安裝所有 babel 插件。

C:\Users\用戶名\Desktop\reactFile>npm install babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin –save-dev

5. 創建 ReactJS 文件

要完成安裝過程，我們必須使用命令提示符手動創建某些文件。

C:\Users\用戶名\Desktop\reactFile>鍵入 nul > index.html

C:\Users\用戶名\Desktop\reactFile>類型 nul > App.js

C:\Users\用戶名\Desktop\reactFile>鍵入 nul > main.js

C:\Users\用戶名\Desktop\reactFile>類型 nul > webpack.config.js

C:\Users\用戶名\Desktop\reactFile>類型 nul > .babelrc

6. 設置編譯器、服務器和加載器

在“reactFile”文件夾中創建這些 ReactJS 文件後，您可以準備部署服務器，將其設置在端口 8001 或 webpack.-config.js 中您想要的任何端口。

在 webpack-config.js 文件中使用以下代碼，

const path = require('路徑');

const HtmlWebpackPlugin = require('html-webpack-plugin');

模塊.exports = {

條目：'./main.js'，

輸出： {

路徑：path.join(__dirname, '/bundle'),

文件名：'index_bundle.js'

},

開發服務器：{

內聯：真實，

端口：8001

},

模塊： {

規則：[

{

測試：/\.jsx?$/,

排除：/node_modules/，

裝載機：'babel-loader'，

詢問： {

預設：['es2015', 'react']

}

}

]

},

插件：[

新的 HtmlWebpackPlugin({

模板：'./index.html'

})

]

}

7. 設置index.html

在 index.html 中以 div id="app" 為根元素編寫一個常規的 HTML 代碼，然後在 HTML 正文中進一步添加 index_bundle.js 腳本。

需求軟件開發技能

8. 設置 App.js 和 main.js

在 App.js 中編寫 React 組件來渲染類或函數。 將您希望在組件中呈現的文本插入，編譯後將顯示在瀏覽器中。 然後將組件導入到 main.js 中的根 App 元素，以便結果顯示在瀏覽器上。

創建一個文件“.babelrc”並插入以下代碼行，

{

“預設”：[“環境”，“反應”]

}

9. 顯示網頁內容

設置終於完成，一旦您在命令提示符下鍵入以下命令，服務器就會啟動並運行。

C:\Users\用戶名\Desktop\reactFile>npm 啟動

只要您按下回車鍵，瀏覽器就會顯示您在組件內呈現的消息。

• 使用 create-react-app 命令

1. 安裝 create-react-app

打開命令提示符並編寫以下代碼以安裝 create-react-app。

C:\Users\用戶名\Desktop>npx create-react-app my-app

此命令將所有必需的文件和文件夾安裝到桌面的“my-app”文件夾中。 這一行代碼在幾分鐘內完成了系統中 React 的安裝。

2. 運行服務器

轉到命令提示符並鍵入

C:\Users\用戶名\Desktop>cd my-app

C:\Users\Tutorialspoint\Desktop>我的應用> npm 啟動

你的 React 項目在 localhost 的幫助下在你的瀏覽器上啟動並運行，它在可用的端口上託管你的項目。

探索我們的熱門軟件工程課程

結論

ReactJS 自發布以來改變了前端開發遊戲，並已發展成為最受歡迎的開源 JavaScript 庫之一。 Meta、Netflix 和 Slack 等多家公司都在使用 ReactJS。 最大的優勢之一是組件的可重用性以將更改呈現到網頁中。 使用 Azure DevOps 將多個 React 應用程序部署到 Azure Web App。 這是現在 IT 行業最搶手的技能之一。

如果您是 React 開發人員，您可以通過upGrad 的班加羅爾 IIIT DevOps 高級證書計劃了解 Azure DevOps 來增強您的技能。 該課程提供超過 250 小時的學習模塊以及面試準備指南。 您還可以參加 DevOps 專家的職業指導會議，他們可以為您提供行業期望的清晰路線圖。 您將在課程結束時獲得證書和 IIITB 校友身份，這使它成為您簡歷中的一個特別補充！