React elements

React elements are the fundamental building blocks of React applications. They describe the user interface, i.e. what will appear on the screen. When you program React applications, you never write actual HTML that the web browser can run, even though it may seem like it with JSX. Instead, you are writing Javascript code with React elements that are essentially Javascript representations of HTML elements. When using the JSX syntax extension, we rarely need to work with React elements directly because it’s easier to write HTML in our React code and let JSX compile it to Javascript for us. See this example below to understand how JSX is compiled into React elements by calling createElement().

Code example: createElement()

The two statements below are identical. In fact, when the JSX on the first line is transpiled, it turns into the Javascript code on the second line.

Copy
const element = <h1>Hello, world!</h1>
const element = React.createElement('h1', {}, 'Hello, world!')

React elements are immutable meaning that once a React element is created, you cannot change its attributes or children. This means that when the UI is changed the React elements are deleted and then created again.