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
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().
Related concepts
→
React Elements
→
- React Elements: Rendering an Element into the DOM
- Render Prop
- React Top-Level API: React.createElement()
- React Top-Level API: React.cloneElement()
- React Top-Level API: React.isValidElement()
- React.Children: React.Children.only
- ReactDOM: render()
- ReactDOMServer: renderToString()
- ReactDOMServer: renderToNodeStream()
- ReactTestUtils: renderIntoDocument()
- ReactTestUtils: isElement()
- ReactTestUtils: isElementOfType()
- Test Renderer: TestRenderer.create()
- React Elements: Updating the Rendered Element