React (またはさらに言えば他のフレームワーク) におけるビルド プロセスとは何ですか?

[ テクノロジー ]: ReactJS – 記事 #1

---

フレームワークはエンジニアの開発を簡素化します。これは ReactJS の舞台裏の機能を単純化する私の試みです。

---

お話の時間

私は ReactJS から始めました。はい、本当にそうです。データサイエンスに飛び込む前に、UI / UX デザインとフロントエンド開発に情熱を注いでいた私が 2 年遅れるのは夢のようです。 (私は2年前と同じくらい情熱を持っています。)

私は今、ある企業（自らをスタートアップと呼んでいます。その企業の文化は会社の文化というよりもスタートアップの文化であるため）でインターンをしていますが、初日の今日は文字通り何もすることがありませんでした。 (チームリーダー) は会議に忙しいためオフィスに来ませんでした。

私は彼を私の手からタイムスリップさせてしまったのでしょうか。絶対に違います。
私のデータ分析スキルを試すタスクやプロジェクトをもらえる可能性はかなり低かったです。そこで、私は自らの手を汚して開発することにしました。今が ReactJS を始めるのに最適な時期かもしれないと感じました。

---

リアクトとは何ですか?

React は動詞です (ダジャレです)。しかし、開発テクノロジーの文脈では、「Web およびネイティブ ユーザー インターフェイス用のライブラリ」が ReactJS の公式 Web サイトに主張されています。

さて、開発エコシステムに携わったことがある人なら、他の 2 つの競合他社、あるいは ReactJS の兄弟である Angular と VueJS について聞いたことがあるはずです。

ここでは、最も人気のある 3 つのフロントエンド テクノロジーを簡単に比較します。

---

Why should we use ReactJS when we have plain HTML and JS?

Demerits of Plain HTML and JS.

Following are the problem you're going to face if you use:

Difficulty Maintaining Large Applications:

• Plain HTML and JS lacks a structured approach to organizing code.

• Complex applications can lead to a tangled mess of logic and UI manipulation within event listeners and script files.

• This makes it challenging to understand, modify, and debug code as the application grows.

Inefficient DOM Manipulation:

• Directly manipulating the DOM in JS can be inefficient.

• Every state change might trigger a complete re-rendering of the HTML structure, even for minor UI updates.

• This can lead to performance bottlenecks as the application complexity increases.

Limited Reusability:

• Building reusable UI components with plain HTML and JS can be cumbersome.

• You might end up copying and pasting code snippets across different parts of your application.

• This makes it difficult to maintain consistency and implement changes efficiently.

Complex State Management:

• Managing the state of an application (data that controls UI behavior) becomes difficult with plain HTML and JS.

• Keeping track of data changes and their corresponding UI updates can become messy and error-prone, especially for complex data flows.

---

How ReactJS comes to the Rescue.

ReactJS addresses these limitations by offering a component-based architecture, virtual DOM for efficient updates, and a rich ecosystem for managing complex UIs and application state.

Improved Maintainability:

• React's component-based architecture and declarative approach lead to cleaner and more maintainable codebases, especially for large-scale applications.

Enhanced Performance:

• The virtual DOM and efficient rendering mechanisms in React contribute to smoother and faster user experiences, even for complex web applications.

Code Reusability:

• React's component model promotes code reusability, allowing you to build modular UI components that can be easily shared and combined across your application.

---

The Difference makes the Difference.

When I created my first components, I asked myself, "What exactly" is this? Is it HTML or JS?

I've embedded JS into the HTML via element orelement. But writing HTML inside a JS file feels weird or rather different.

I tried and writing the HTML inside the JS file of a non-React project and guess what it didn't go well.

Then I learned that this special syntax ( HTML like inside of JS file ) is called as JSX JavaScript XML and isan extension of JavaScript.

If the code that browsers understand is ultimately the plain HTML and JS, it means that there are some operations performed on the JSX ( syntactic sugar for building complex applications with ease ) that we write.

This Behind The Scenes Operations itself is called a Build Process.

The high-level idea of a build process is to transform your development code into an optimized version ready for deployment in a production environment.

While specific tools and configurations may vary depending on the technology stack, the general concepts and goals of the build process apply universally across frontend web development.

---

What is a Build Process in ReactJS?

We've learnt that the high-level idea remain the same but the several phases in the Build Process of React are as follows:

1. Bundling:
   • Imagine your React application consists of numerous JavaScript files, CSS stylesheets, and potentially image assets.

A bundler like Webpack takes all these separate files and combines them into a smaller number of optimized bundles.

1. Transpilation:

   • Transpilation involves converting this modern code (JSX) into plain JavaScript (ES5 or a compatible version) that can run on a wider range of browsers.

2. Minification:

   • Minification shrinks the file size of your bundled code by removing unnecessary characters like whitespace, comments, and long variable/function names.

3. Optimization:

   • The build process might involve additional optimizations like tree-shaking, which removes unused code from your final bundles.

4. Production Mode:

   • The development mode offers features like source maps (for easier debugging) and detailed error messages.

In contrast, the production mode focuses on optimization by enabling minification, tree-shaking, and other performance enhancements.

---

react-scripts: The Wolf of React Project

react-scripts is an internal package used by Create React App (CRA) to handle the behind-the-scenes functionalities in a React project.

It's not directly interacted with by developers most of the time, but it's essential for development efficiency.

Here's what react-scripts is responsible for:

• Bundling and Transpilation
• Development Server and Hot Reloading
• Testing
• Building for Production

The 3 of the most significant tasks the react-scripts does is as follows which we'll understand in much detail:

1. Bundling:

   • Imagine your React application consists of numerous JavaScript files, CSS stylesheets, and potentially image assets.
   • A bundler like Webpack takes all these separate files and combines them into a smaller number of optimized bundles.
   • This reduces the number of HTTP requests a browser needs to make, improving website loading speed.

2. Transpilation:

   • Modern JavaScript features like JSX syntax used in React might not be understood by older browsers.
   • Transpilation involves converting this modern code into plain JavaScript (ES5 or a compatible version) that can run on a wider range of browsers.
   • Tools like Babel are commonly used for transpilation in React.

3. Minification:

   • Minification, also known as minimization, is a technique applied to code to reduce its file size without affecting its functionality.
   • This is particularly beneficial for React applications deployed to production, as smaller file sizes translate to faster loading times for web pages.

Here's how minification works:

1. Removing Unnecessary Characters:

   • Minifiers eliminate whitespace characters like spaces, newlines, and tabs from the code. This might seem insignificant for small files, but in large React projects, it can lead to a noticeable reduction in size.

2. Shortening Variable and Function Names:

   • Minifiers often replace descriptive variable and function names with shorter, single-letter names. While this makes the code less readable for humans, it significantly reduces file size.

3. Removing Comments:

   • Comments are essential for documenting and understanding code during development. However, in production, they're not required for the code to function. Minifiers typically remove comments to further minimize file size.

---

Conclusion

This is the learning of only 1 day summarized.

I would have been able to build much more than this, if I utilized GenAI tools. I did GenAI tools either way but for learning purpose.

I believe asking this right set of questions and then understanding the concepts in true depth will set you apart from the one's who automate the development.

In the interviews it is the understanding and clarity of the concept that is sought, rather than your coding speed because, either way it's going to be automated to an extent.

Thus the only X-Factor of you being a great software engineering lies in your knowledge to at least validate and verify whether the outcome of GenAI model caters to your tech needs or not.

If you think that my content is valuable or have any feedback,
do let me by reaching out to my following social media handles that you'll discover in my profile and the follows:

LinkedIn: https://www.linkedin.com/in/shrinivasv73/

Twitter (X): https://twitter.com/shrinivasv73

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

Email: shrinivasv73@gmail.com

? This is Shrinivas, Signing Off!

---

以上がReact (またはさらに言えば他のフレームワーク) におけるビルド プロセスとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。