Facebook initially struggled with delays in displaying notifications, prompting the creation of React to enhance user experience
React was developed by Jordan Walke a Facebook engineer (in 2013), who created it as a solution to efficiently update and render UI components in real-time
Websites vs. Web Applications
A website is a collection of linked web pages that can be accessed through a web browser. Websites typically offer static or minimally interactive content.
A web application is a dynamic software application that runs on a web server and is accessed via a browser. It often includes:
Presentation layer (web browser) – the user interface.
Application layer (server) – where application logic resides.
Storage layer (database) – where data is stored and retrieved.
Single Page Applications (SPAs)
Single Page Applications (SPAs) load only a single HTML file initially, and dynamic content is updated asynchronously without page reloads. This allows for seamless, fast interactions.
SPAs provide a more app-like, responsive experience, which is ideal for modern web applications that require frequent updates to the UI.
While SPAs can be built using Vanilla JavaScript, frameworks such as React, Vue, Angular, Ember, and Meteor are commonly used because they offer tools and patterns that streamline SPA development.
SEO Considerations: SPAs face SEO challenges, as the initial HTML doesn’t contain full content, relying on JavaScript for rendering. Techniques like server-side rendering (SSR) and prerendering can improve SEO for SPAs by generating content on the server side.
Virtual DOM
The React’s Virtual DOM re-renders websites smartly, meaning that it only changes the part on DOM that is actually updated
It is done by a process called diffing. React creates an in-memory representation of the actual DOM and then it compares it with the real DOM whenever any changes are made (state updates) or event is occurred.
It then compares the actual DOM with the Virtual DOM (by a process called diffing) and then it only updates the part on the screen that are actually changed. Rather than updating the entire DOM only updates the part needed
The process of keeping storing UI in Virtual DOM is called reconciliation
