React Foundations

In this lecture, Harkirat explores the essential React Jargons, focusing on React Props, their properties, and the concept of destructuring props for efficient pass-downs. It's worth noting that this session adopts a slower pace, revisiting topics covered previously. If you're already familiar with these concepts, feel free to skip ahead to more advanced material covered later in the lecture.

Diving into React

As developers encountered challenges with traditional DOM manipulation, various libraries emerged to ease the process, with jQuery being one of them. However, even with such libraries, handling extensive applications remained complex.

Subsequently, Vue.js and React introduced a new syntax for front-end development. Behind the scenes, the React compiler transforms your code into HTML, CSS, and JavaScript, streamlining the development of large-scale applications.

Understanding DOMs

In React, there is a virtual DOM and a real DOM.

1] Virtual DOM

• React uses a virtual DOM to optimize updates and improve performance. The virtual DOM is an in-memory representation of the actual DOM elements. It's a lightweight copy of the real DOM.
• When you make changes to the state of a React component, React creates a new virtual DOM tree representing the updated state.
• React then compares the new virtual DOM with the previous virtual DOM to determine the differences (diffing).
• The differences are used to compute the most efficient way to update the real DOM.

2] Real DOM

• The real DOM is the actual browser's Document Object Model, representing the structure of the HTML document.