The element

The React element is the smallest component that makes up the React application. It is the content that is viewed on the page. The React element is a common object that can be created with minimal overhead. The React DOM takes care of updating the DOM to be consistent with the React element.

const element = <h1>Hello, world</h1>;
Copy the code

Render elements into the DOM of the page

// Render elements into the page DOM using reactdom.render ()
const element = <h1>What the page needs to display</h1>
ReactDOM.render(
    element,
    // This step indicates where the element is mounted on the page
    document.getelementbyId("app")})Copy the code

Update rendered elements

React elements are immutable objects. Once created, you can’t change its child elements or attributes, so to update an element you need to create a new element and use reactdom.render ()

// Re-render the page DOM by executing the getTime function every second via a timer to reach the updated page element
function getTime() {
  const ele = (
    <div>
      <h2>Current time {new Date().tolocaletimeString ()}</h2>
    </div>
  );
  ReactDOM.render(ele, document.getElementById('root'));
}
setInterval(getTime, 1000);
Copy the code

The React update only updates the necessary DOM