在 Mac 上安裝 React.js

已發表: 2022-04-29

該軟件是一個免費的開源前端 JavaScript 庫。 2013 年，React.JS 由 Facebook 創立。

它是一個用戶界面 (UI) 庫，用於創建和操作 UI 組件。 它是一個包，允許開發人員創建高效的數據驅動 SPA 應用程序。

它以函數式編程為基礎，依託不變性的概念，提倡基於Single可重用性原則的基於組件的架構。

在本文中，我們將介紹如何在 mac 上安裝 react 的過程。 完成安裝階段後，我們強烈建議您在線參加 React 培訓。

讓我們先探討一些術語-

內容

  • 1 NodeJS 和 NPM
  • 2在 MacOS 上安裝 ReactJS
  • 3創建 ReactJS 項目
  • 4 React-簡介
  • 5 Node.js 和 npm
  • 6總結

NodeJS 和 NPM

  • 您首先需要安裝 NodeJS 和 NPM 才能在 Mac 上安裝 React。
  • 它是一個 JavaScript 引擎，允許您在瀏覽器之外運行它。
  • NPM（節點包管理器）用於命令行。 就是安裝 ReactJS 之類的庫。
  • 您可以通過他們的官方網站安裝 NodeJS。 當你安裝 NodeJS 時，它也會為你下載 NPM。
  • 從他們的網站下載 NodeJS 後，找到“.pkg”文件。 只需雙擊它。 它將啟動一個彈出窗口進行安裝。
  • 您將被引導至安裝過程。 單擊“安裝”或“修改安裝位置”
  • 該過程完成後，系統將提示您最後一條消息。 您的 NodeJS 和 NPM 已安裝。

在 MacOS 上安裝 ReactJS

安裝 NodeJS 和 NPM 後，就可以安裝 ReactJS。 它是通過執行 npm install-save react-dom 來完成的。

創建 ReactJS 項目

由於我們已經安裝了 ReactJS，我們可以創建一個新的 react 項目目錄。 它是通過運行 npx create react 項目來完成的。 創建反應應用程序。

React-簡介

在繼續將 React-Lib 安裝到 Mac 之前，我們必須首先對 React 有一個基本的了解。

  • React 是一個包，可幫助 Web 開發人員和架構師滿足在數據上下文中需要高數據流和快速響應 UI 的客戶的期望。
  • 它建立在基於組件的架構之上。 網頁可以由 Parent 和 Child 組件表示。
  • 它在很大程度上依賴於虛擬 DOM，虛擬 DOM 作為 DOM 操作的性能優化器。
  • HTML 網頁有一個 DOM 樹，瀏覽器使用它來呈現網頁。

當用戶與頁面交互時，它需要根據用戶的操作添加和插入信息。 如用戶已將商品添加到購物車中。 由於用戶的決定，購物車現在顯示更改的項目。

在幕後，HTML 文檔經歷了允許共享修改後的頁面的轉換。

如前所述，DOM 樹表示 HTML 文檔。 在前面的例子中，DOM 需要一些調整，包括插入和刪除特定的 HTML 節點。

這有助於顯示象徵用戶在修改他的上下文中試圖做什麼的基本信息

購買決定。

我們可以將 DOM 視為一棵樹，以便更好地理解它。

這棵樹有根，也有樹枝。 同樣，HTML 元素位於 DOM 的頂部，其下方的節點連接到父節點。 在樹的類比方面，父節點可以表示為樹幹，其他節點連接到樹幹。 並且 React 用於改進這些節點上的插入和刪除操作。

與 HTML DOM 上的此插入和刪除操作相關的內存損失。 在 DOM 更新操作方面，虛擬 DOM 起到了性能優化器的作用。

它保留兩份副本：一份是真實的 DOM（react DOM），一份是要進行的更新。 作為協調過程的一部分，還研究了最小化對 react DOM 的修改的過程。

Node.js 和 npm

Node.js 執行 JavaScript 的代碼。 它是一個開源和跨平台的 JavaScript 運行時環境。 它由 Chrome V8 引擎提供支持。 Chrome V8 引擎是用 C++ 編寫的。 Node 與 Windows、Mac 和 Linux 兼容。

安裝 Node.js 後，我們可以在開發過程中在我們的系統上本地執行基於 React 的應用程序。 這也允許我們將程序部署到生產服務器。

Node.js 包括以下功能：

  • 使用 JavaScript 作為其核心語言
  • 非阻塞 I/O
  • 支持異步編程
  • 可以使用單個服務器管理大量連接請求。

Npmjs.org 是一個包含數千個模塊 (npm) 的在線代碼存儲庫，它允許我們使用簡單的命令安裝節點模塊。

有些模塊是自包含的，而有些則需要相互依賴才能正常運行。Node.js 允許我們在服務器上進行讀寫操作。 它還允許您使用數據庫。

我們可以尋找一個模塊並重用和擴展它的功能，而不是從頭開始創建功能。

開發人員計劃通常涉及時間和預算限制。 說到節點。 基於 js 的開發，npmjs.org 是開發者社區的生命線。

總結一下

在本教程中，我們了解了 React.js 和 React.js 中基於組件的架構方法。 我們還獲得了虛擬 DOM 的高級概述。

我們討論了協調的概念、Node.js 在 JavaScript 世界中的使用，以及它管理非阻塞 I/O 輸出以同時滿足客戶端連接請求的能力。

我們測試了兩種安裝 Node.js 的技術：一種使用包管理，另一種使用命令行。

為了快速開始使用 React.js，我們使用了 create-react-app 模塊。 我們也可以使用命令行來安裝 React.js。

為避免過多的細節導致過載，我們在本教程中使用了 create-react-app 技術。 我們看到我們的第一個 react 應用程序在開發後運行。 我們快速評估了運行應用程序的重要文件，以便從開發的角度熟悉代碼。

另請閱讀：

  • Mac 病毒還活著 殺死它們並安居在寧靜中！