React Element - Simplified
2 min read
A React element is like a blueprint for something you want to show on a web page. It's a simple JavaScript object that describes what you want to display, like text or components.
For example, you can create a React element to show a heading with the text "Hello, React!" like this:
const element = <h1>Hello, React!</h1>;
This element is just a plan; it's not the actual thing on the web page. To put it on the web page, you use React to render it. Here's how you do it:
const element = <h1>Hello, React!</h1>;
const container = document.getElementById('root');
ReactDOM.render(element, container);
In this code, ReactDOM.render takes your plan (the React element) and shows it on the web page inside the HTML element with the ID "root." render() is the function that converts that JavaScript Object into an HTML Element.
The important thing to remember is that React elements are like sketches, and React turns them into the real web content you see.