Introduction to ReactJS: Virtual DOM, Component Architecture, and Practical Code Examples

ReactJS, originally created by Facebook to power Instagram, was open‑sourced in May 2013 and has since become one of the most popular front‑end frameworks alongside AngularJS and Bootstrap, praised for its revolutionary virtual DOM and component‑based approach.

The virtual DOM works by keeping an in‑memory representation of the UI; when data changes, React rebuilds the virtual tree, diffs it against the previous version, and updates only the changed parts of the real DOM, greatly improving performance and simplifying UI logic.

React promotes componentization: UI pieces are encapsulated as reusable, composable, and maintainable components. Components can be nested to build complex interfaces, and each component manages its own logic, making development more modular than traditional MVC.

To start, create an HTML file that loads <script src="build/react.js"></script> and <script src="build/JSXTransformer.js"></script> , then add a container div and a <script type="text/jsx"> block where JSX code is written.

Example – Hello World:

React.render(
  <h1>Hello, world!</h1>,
  document.getElementById('container')
);

JSX allows HTML inside JavaScript without quotes. An array‑mapping example:

var names = ['Jack', 'Tom', 'Alice'];
React.render(
  <div>
    {names.map(function (name) {
      return <div>Hello, {name}!</div>;
    })}
  </div>,
  document.getElementById('container')
);

Components are defined with React.createClass . A simple component that receives a name prop:

var Greet = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});
React.render(
  <Greet name="Jack" />,
  document.getElementById('container')
);

Stateful components use getInitialState and this.setState . Example of toggling an input’s disabled attribute:

var InputState = React.createClass({
  getInitialState: function() { return {enable: false}; },
  handleClick: function() { this.setState({enable: !this.state.enable}); },
  render: function() {
    return (
      <p>
        <input type="text" disabled={this.state.enable} />
        <button onClick={this.handleClick}>Change State</button>
      </p>
    );
  }
});
React.render(
  <InputState />,
  document.getElementById('container')
);

React components have a lifecycle with methods such as componentWillMount , componentDidMount , componentWillUpdate , componentDidUpdate , and componentWillUnmount , plus special hooks like componentWillReceiveProps and shouldComponentUpdate . An example that animates opacity using componentDidMount :

var Hello = React.createClass({
  getInitialState: function() { return {opacity: 1.0}; },
  componentDidMount: function() {
    this.timer = setInterval(function() {
      var opacity = this.state.opacity - .05;
      if (opacity < 0.1) opacity = 1.0;
      this.setState({opacity: opacity});
    }.bind(this), 100);
  },
  render: function() {
    return <div style={{opacity: this.state.opacity}}>Hello {this.props.name}</div>;
  }
});
React.render(
  <Hello name="world" />,
  document.body
);

Component nesting enables reuse. The following defines a Search component and a Page component that uses it twice with different props:

var Search = React.createClass({
  render: function() {
    return <div>{this.props.searchType}:<input type="text" /><button>Search</button></div>;
  }
});
var Page = React.createClass({
  render: function() {
    return <div><h1>Welcome!</h1><Search searchType="Title" /><Search searchType="Content" /></div>;
  }
});
React.render(
  <Page />,
  document.getElementById('container')
);

In summary, ReactJS encourages building UIs from small, reusable components, passing data via props, managing dynamic data with state, and leveraging lifecycle hooks for side effects, all while delivering high performance through its virtual DOM diffing algorithm.