A Comprehensive Introduction to ReactJS: Virtual DOM, Component Architecture, and Hands‑On Examples

ReactJS, originally created by Facebook to power Instagram, has become one of the most popular front‑end frameworks alongside AngularJS and Bootstrap, attracting developers with its virtual DOM and component‑based development model.

React was open‑sourced in May 2013 after internal use proved its performance and simplicity, and it is now considered a potential mainstream tool for web development.

Official resources: React website and GitHub repository .

Common misconceptions : React is not a full MVC framework (it mainly provides the View), server‑side rendering is optional, it does not replace Web Components, and JSX is merely syntactic sugar, not a new template language.

Background and principle : To keep the UI in sync with changing data, React introduces a Virtual DOM that creates an in‑memory representation of the UI. On each data change, React rebuilds the virtual tree, diffs it against the previous tree, and updates only the changed parts of the real DOM, allowing batch updates and high performance.

Compared with traditional full‑page refreshes, React treats every UI update as a virtual full refresh while efficiently applying only the necessary DOM mutations.

Componentization : React promotes building UI as independent, reusable components. Components can be composed, reused across different screens, and are easier to maintain because each encapsulates its own logic.

To get started, download React from the official site, include react.js and JSXTransformer.js in an HTML file, and write a simple React.render call to display <h1>Hello, world</h1> . Note that JSX scripts must use type="text/jsx" .

JSX syntax : JSX allows HTML markup directly inside JavaScript without quotes, enabling expressions like {names.map(name => <li>Hello, {name}</li>)} . Arrays are automatically expanded, and JavaScript variables can be embedded within the markup.

React components : Define components with React.createClass . Component attributes are accessed via this.props , and component state via this.state . The initial state is set with getInitialState() , and updates are performed with this.setState() . Example code shows a text box whose disabled attribute toggles when a button is clicked.

Component lifecycle : Three phases – Mounting, Updating, Unmounting – each with hooks such as componentWillMount() , componentDidMount() , componentWillUpdate() , componentDidUpdate() , and componentWillUnmount() . Additional hooks include componentWillReceiveProps() and shouldComponentUpdate() . An example demonstrates using componentDidMount to start a timer that repeatedly changes component opacity.

Component nesting and reuse : By nesting components, developers can build complex UIs from simple building blocks, passing data via props (e.g., searchType ) and reusing components multiple times within a parent component.

Summary :

React is fundamentally component‑based; pages consist of many small components assembled into larger ones.

Data is passed to components via props, while mutable UI state resides in state .

When styling components, use className instead of class and provide inline styles as objects, e.g., style={{opacity: this.state.opacity}} .

Component names must start with an uppercase letter.

Wrap JavaScript expressions in curly braces {} without additional quotes.

References :

React Chinese Documentation: http://reactjs.cn/

React tutorial by Ruan Yifeng: http://www.ruanyifeng.com/blog/2015/03/react.html

InfoQ article on React: http://www.infoq.com/cn/articles/subversion-front-end-ui-development-framework-react