React Fundamentals: Understanding Virtual DOM, JSX, and Component Architecture

This article provides a comprehensive introduction to React, a JavaScript library for building user interfaces, originally developed at Facebook and open-sourced in 2013.

React's Popularity Trend: The article presents data from Google Trends and Baidu search indexes, comparing React's search volume with other technologies like jQuery, Angular, and Node.js. React's growth trajectory shows it has become a major player in the frontend ecosystem.

What is React: React is described as "a JavaScript library for building user interfaces." Unlike traditional MV* frameworks such as Backbone or Angular, React focuses solely on the View layer, making it easy to integrate into existing projects.

Key Features:

1. JSX: JSX is a pre-compiled template syntax that looks similar to HTML but is actually JavaScript. The article explains how JSX gets compiled into React.createElement() calls. Developers use the react-tools npm package for real-time compilation during development.

2. Virtual DOM: This is React's flagship innovation. Instead of directly manipulating the DOM, React maintains an abstract virtual DOM tree in memory. When data changes, React compares the new virtual DOM with the previous version, calculates the differences (patch), and then batch-updates only the affected parts of the real DOM. This approach significantly improves rendering performance by reducing unnecessary reflows and repaints. The article notes that rendering an empty DIV in the browser requires hundreds of properties, while virtual DOM only has 6.

3. Component Architecture: React promotes component-based design where applications are built from reusable, self-contained components. Each component receives data through props and manages its internal state via state . The article demonstrates this using a KM (Knowledge Management) homepage example, showing how components like <Pub/> , <Article/> , and <App/> can be composed together.

Props vs State: Props serve as the data source (like constructor parameters), while state controls the component's presentation and stores dynamic data that changes with user interaction.

The article emphasizes that React's component-based approach enables better code organization, reusability, and maintainability, making it a powerful tool for modern web development.