This year, I'm reading through the React docs and taking notes as I go.
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. In essence, it is a description of what you want to appear on the screen (oh, and it's declarative!).
{
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>
)
}
I found this blog post (from 2015!) very helpful in understanding the differences.
Top comments (0)