An Element is a plain object describing what you want to appear on the screen in terms of the 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 React Element.
const element = React.createElement(
'div',
{id: 'login-btn'},
'Login'
)
The above React.createElement() function returns an object:
{
type: 'div',
props: {
children: 'Login',
id: 'login-btn'
}
}
And finally it renders to the DOM using ReactDOM.render():
<div id='login-btn'>Login</div>
Whereas a component can be declared in several different ways. It can be a class with a render() method or it can be defined as a function. In either case, it takes props as an input, and returns a JSX tree as the output:
const Button = ({ onLogin }) =>
<div id={'login-btn'} onClick={onLogin}>Login</div>
Then JSX gets transpiled to a React.createElement() function tree:
const Button = ({ onLogin }) => React.createElement(
'div',
{ id: 'login-btn', onClick: onLogin },
'Login'
)
React Element
A React Element is an object representation of a DOM node. It is a plain old object, and not an actual DOM element.
{
type: 'h2',
props: {
className: 'heading heading-medium',
children: 'React Deep Dive'
}
}
const header = (
<h2 className="heading heading-medium">
React Deep Dive
</h2>
)
An Element has a type, props, and any children nested inside of it. The type can be either a DOM Element (like 'h2', in the above example), or a Component Element (like the Heading described below).
React Component
A React Component is composed of React Elements. It is either a class with a render function, or a stateless functional component. It takes props as an input and returns an element tree as its output. Component names start with a capital letter (Heading vs h2).
const Heading = (props) => {
return (
<h2
className={`heading heading-${props.size}`}
>
{props.children}
</h2>
)
}
Top comments (1)
React elements were replaced by jsx. In your example this is the jsx part:
jsx is basically html but with a javascript sauce on top.