React Elements

React Elements

React Elements — Are the smallest building blocks of React apps.

React Elements — Are plain objects, and are cheap to create.

Describes what you want to see on the screen.

React elements are immutable. Once you create an element, you can’t change its children or attributes.

Rendering an Element into the DOM

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

To render a React element into a root DOM node, pass both to ReactDOM.render().

Updating the Rendered Element

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

The only way to update the UI is to create a new element, and pass it to ReactDOM.render().

React Elements — Structure map

Clickable & Draggable!

React Elements — Related pages: