React Road – Element rendering

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