Practice
An element is a plain object , describing what , you want , to appear on the screen in terms of DOM nodes or other components. Elements can contain other elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated.
The object representation of a React element looks like this:
const element = React.createElement(
'div',
{id: 'login-btn'},
'Login'
)
The above
{ type: 'div', props: { children: 'Login', id: 'login-btn' } }
And finally, it is rendered to the DOM using
<div id='login-btn'>Login</div>
Whereas a component can be declared in several different ways. It can be a class with a
const Button = ({ onLogin }) =>
<div id={'login-btn'} onClick={onLogin}>Login</div>
The JSX is then transpiled into a
const Button = ({ onLogin }) => React.createElement(
'div',
{ id: 'login-btn', onClick: onLogin },
'Login'
)
Comments