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

---

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 <script> </script> element or <script src="index.js"> </script> element. 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 is an 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: [e-mail]

🫡 This is Shrinivas, Signing Off!

---