In this blog post, we'll dive into the inner workings of React, one of the most popular frontend frameworks for building web applications. We'll explore how React works behind the scenes and how it's different from other frontend frameworks like Angular and Vue. We'll also cover some of the key features and benefits of using React, and provide some helpful resources for learning more. Whether you're new to React or have some experience with it, this post will give you a better understanding of how it works and how it fits into the world of frontend development.
"In traditional JavaScript, we would have to manually write every piece of HTML tag and its corresponding functionality. However, in large applications like Netflix, we want smooth transitions without having to fetch and load new HTML files every time a user makes a request. To solve this problem, React introduces custom HTML components. These components can be written in a declarative rather than imperative style, allowing us to create reusable and modular code for our application."
"React JS allows us to build single page applications (SPAs). This means that when a user clicks on a link, rather than fetching a new HTML file from the server, React can dynamically update the JavaScript code to change what is displayed on the screen. Only the initial request needs to be made to the server, and subsequent actions do not require additional requests to be made."
"In a React application, there is typically only one index.html file located in the public folder. This file is the only one that is loaded because React is a single page application. The index.html file contains a root <div> element, which can be accessed in the index.js file located in the src folder. This JavaScript file is only loaded when the application is initially loaded and it renders the <App> component, which serves as the root of all the other components in the application. The App.js file contains the code for the App component and any other components that are attached to it. These components are typically located in a separate components folder."
Behind the scenes, React uses a system called the "virtual DOM" to efficiently update the DOM and minimize the number of actual DOM manipulations that need to be performed. When the state of a component changes, React will compare the virtual DOM representation of the updated component to the previous version, and only make the necessary changes to the actual DOM.
"React is a component-based framework that relies on community libraries to provide additional features. Angular is also component-based, but it has a larger feature set built into the framework itself and uses TypeScript. Vue.js is a component-based framework that falls somewhere in between React and Angular in terms of its reliance on external libraries and features."