A React element is a plain object describing what should appear on screen, while a React component is a function or class that returns elements. Elements are the smallest building blocks of a React app, and components are the reusable pieces that produce them.
const element = <h1>Hello, World!</h1>;
JSX like this creates an element. React never changes an element after it's created, so to show something different, React calls your components again and gets new elements.
// Function component
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// Class component
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
A component accepts inputs called props and can be reused anywhere. You write <Welcome name="Sara" /> to use it, and React calls Welcome with those props to get the element to render.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓