What is a Build Process in React ( or in any framework for that matter? )-JS Tutorial-php.cn

What is a Build Process in React ( or in any framework for that matter? )

[ Technology ]: ReactJS – Article #1

The Frameworks simplify the Development for Engineers and this is my attempt to simply the Behind-The-Scenes functioning of the ReactJS.

Story time

I've started out with ReactJS. Yup, I really have. It's like a dream being delay by 2 years when I was passionate about UI / UX Designing and Front-End Development before I dived into Data Science. ( I still am as passionate as I was 2 years ago.)

I'm now an Intern at a company ( that call themselves a startup because, its culture is more of a start-up's than that of company's ) and today, on my first day, I literally had nothing to do since, my TL ( Team Lead ) was not coming to the office as he was occupied with some meeting.

Did I let he time slip off my hands. Absolutely not.
The probability of me getting a task / project to put my Data analytics skills to test was fairly low. Hence I resorted to get my hands dirty in development. I could sense that this might be the best time to started with ReactJS.

What is React?

React is a verb ( pun intended ). But in the context of development technologies,"The library for web and native user interfaces", claims the official website of ReactJS.

Now if you've been around the development ecosystem, you must have heard about other 2 competitors or rather the siblings of ReactJS, which are Angular and VueJS.

Here's a short comparison of the 3 of the most popular Front-End technologies.

Core Concept	Library focused on UI	Full-fledged framework	Progressive framework
Data Binding	One-way data flow	Two-way data binding	Two-way data binding (optional)
Component Structure	Custom components	Directives and components	Components
Learning Curve	Moderate	Steep	Gentle
Performance	High (Virtual DOM)	Can be slower due to two-way data binding	High (Optimized rendering)
Scalability	Excellent, suitable for large-scale apps	Strong support for large-scale enterprise apps	Good scalability, but might require additional libraries for complex projects
Community and Ecosystem	Largest community, rich ecosystem	Large community, strong ecosystem	Growing community, good ecosystem
Flexibility	High, can be used with other libraries/frameworks	Less flexible due to rigid structure	Flexible, can be used incrementally

當我們有純 HTML 和 JS 時，為什麼還要使用 ReactJS？

純 HTML 和 JS 的缺點。

以下是您使用時會遇到的問題：

維護大型應用程式的困難：

純 HTML 和 JS 缺乏組織程式碼的結構化方法。
複雜的應用程式可能會導致事件偵聽器和腳本檔案中邏輯和 UI 操作錯綜複雜。
隨著應用程式的增長，這使得理解、修改和調試程式碼變得困難。

低效率的 DOM 操作：

直接在 JS 操作 DOM 效率很低。
每次狀態變更都可能觸發 HTML 結構的完全重新渲染，即使是小的 UI 更新也是如此。
隨著應用程式複雜性的增加，這可能會導致效能瓶頸。

有限的可重複使用性：

使用純 HTML 和 JS 建立可重複使用的 UI 元件可能很麻煩。
您最終可能會在應用程式的不同部分複製和貼上程式碼片段。
這使得保持一致性和高效實施變更變得困難。

複雜的狀態管理：

使用純 HTML 和 JS 來管理應用程式的狀態（控制 UI 行為的資料）變得很困難。
追蹤資料變更及其相應的 UI 更新可能會變得混亂且容易出錯，尤其是對於複雜的資料流。

ReactJS 如何來救援。

ReactJS 透過提供基於元件的架構、用於高效更新的虛擬 DOM 以及用於管理複雜 UI 和應用程式狀態的豐富生態系統來解決這些限制。

提高了可維護性：

React 基於元件的架構和聲明式方法可以帶來更乾淨、更易於維護的程式碼庫，特別是對於大型應用程式。

增強的性能：

React 中的虛擬 DOM 和高效的渲染機制有助於實現更流暢、更快的使用者體驗，即使對於複雜的 Web 應用程式也是如此。

程式碼可重複使用性：

React 的元件模型提高了程式碼的可重複使用性，讓您可以建立可以在應用程式中輕鬆共享和組合的模組化 UI 元件。

差異帶來差異。

當我創建第一個組件時，我問自己，「這到底是什麼」？是 HTML 還是 JS？

我透過

我嘗試在非 React 專案的 JS 檔案中編寫 HTML，猜猜結果不太順利。

然後我了解到這種特殊的語法（類似於 JS 檔案內部的 HTML）被稱為 JSX JavaScript XML，是JavaScript 的擴充功能。

如果瀏覽器能理解的程式碼最終是純HTML和JS，那就意味著在我們寫的JSX（輕鬆建立複雜應用程式的語法糖）上進行了一些操作。

這個幕後操作本身稱為建造過程。

建置流程的高階想法是將您的開發程式碼轉換為準備在生產環境中部署的最佳化版本。

雖然具體的工具和配置可能會根據技術堆疊的不同而有所不同，但建置過程的一般概念和目標普遍適用於前端 Web 開發。

ReactJS 中的建置流程是什麼？

我們了解到，高階思想保持不變，但 React 建置過程中的幾個階段如下：

捆綁：
- 想像一下您的 React 應用程式由大量 JavaScript 檔案、CSS 樣式表和潛在的圖像資源組成。

像 Webpack 這樣的打包器會取得所有這些單獨的文件，並將它們組合成數量較少的最佳化套件。

翻譯：
- 轉譯涉及將這種現代程式碼 (JSX) 轉換為可以在更廣泛的瀏覽器上運行的純 JavaScript（ES5 或相容版本）。
縮小：
- 縮小透過刪除不必要的字元（如空格、註解和長變數/函數名稱）來縮小捆綁程式碼的檔案大小。
優化：
- 建置過程可能涉及額外的最佳化，例如 tree-shaking，它會從最終套件中刪除未使用的程式碼。
生產模式：
- 開發模式提供了來源映射（以便於偵錯）和詳細錯誤訊息等功能。

相較之下，生產模式著重於透過啟用縮小、tree-shaking 和其他效能增強來進行最佳化。

React-scripts：React 專案之狼

react-scripts 是 Create React App (CRA) 使用的內部套件，用於處理 React 專案中的幕後功能。

大多數時候開發者不會直接交互，但是對於開發效率來說卻至關重要

這是react-scripts 的職責：

捆綁和轉譯
開發伺服器和熱重載
測驗
生產建造

react-scripts 執行的 3 個最重要的任務如下，我們將詳細了解：

捆綁：
- 想像一下您的 React 應用程式由大量 JavaScript 檔案、CSS 樣式表和潛在的圖像資源組成。
- 像 Webpack 這樣的打包器會取得所有這些單獨的文件，並將它們組合成數量較少的最佳化套件。
- 這減少了瀏覽器需要發出的 HTTP 請求數量，提高了網站載入速度。
翻譯：
- 舊版瀏覽器可能無法理解現代 JavaScript 功能，例如 React 中使用的 JSX 語法。
- 轉譯涉及將這種現代程式碼轉換為可以在更廣泛的瀏覽器上運行的純 JavaScript（ES5 或相容版本）。
- Babel 等工具通常用於 React 中的轉譯。
縮小：
- 縮小，也稱為最小化，是一種應用於程式碼以減少其檔案大小而不影響其功能的技術。
- 這對於部署到生產環境的 React 應用程式特別有利，因為較小的檔案大小可以轉換為更快的網頁載入時間。

這是縮小的工作原理：

刪除不需要的字元：
- 縮小器消除了程式碼中的空白字符，例如空格、換行符和製表符。這對於小檔案來說似乎微不足道，但在大型 React 專案中，它可以導致大小顯著減少。
縮短變數和函數名稱：
- 縮小器通常用更短的單字母名稱來取代描述性變數和函數名稱。雖然這使得程式碼對人類來說可讀性較差，但它顯著減小了檔案大小。
刪除評論：
- 註解對於開發過程中記錄和理解程式碼至關重要。但是，在生產中，程式碼運行並不需要它們。壓縮器通常會刪除註解以進一步最小化檔案大小。

結論

這是僅1天的學習總結。

如果我使用 GenAI 工具，我就能建構出更多的東西。我以任何方式使用 GenAI 工具，但都是為了學習目的。

我相信提出這組正確的問題，然後真正深入地理解這些概念將使您與自動化開發人員區分開來。

在面試中，我們尋求的是對概念的理解和清晰度，而不是你的編碼速度，因為無論哪種方式，它都會在一定程度上實現自動化。

因此，你成為一名優秀的軟體工程師的唯一 X 因素在於你的知識，至少能夠驗證和驗證 GenAI 模型的結果是否滿足你的技術需求。

如果您覺得我的內容有價值或有任何回饋，
請聯絡我的以下社交媒體帳號，您可以在我的個人資料和以下內容中找到這些帳號：

領英：https://www.linkedin.com/in/shrinivasv73/

推特（X）：https://twitter.com/shrinivasv73

Instagram：https://www.instagram.com/shrinivasv73/

電子郵件：shrinivasv73@gmail.com

？我是 Shrinivas，結束了！

The above is the detailed content of What is a Build Process in React ( or in any framework for that matter? ). For more information, please follow other related articles on the PHP Chinese website!