In React, elements and components are the building blocks for your user interface, but they serve different purposes:
Element
A plain object describing what you want to see on the screen.
Think of it as a blueprint for a UI element.
Contains properties like:
type: The type of element, like an HTML tag (div, p, etc.) or a custom component.
props: Additional attributes to customize the element (e.g., text content, styling).
Immutable: Once created, an element’s properties cannot be changed.
Simple and lightweight.
Component
A reusable piece of code that defines how a part of your UI looks and behaves.
Can be a function or a class.
Takes input through props (similar to element props) and optionally manages its own internal state.
Returns a React element describing the UI it represents. This element is then used by React to update the DOM.
Can have lifecycle methods that respond to events like creation, updates, or destruction.
More complex and powerful than elements.
Analogy:
Think of elements as Lego bricks. They are the individual pieces that come in various shapes and colors.
Components are like Lego instructions. They tell you how to assemble the bricks to create a specific structure (a car, a house, etc.).
Here are code examples illustrating elements and components in ReactJS:
Element:
const myHeading = <h1>Welcome to my React app!</h1>;
// Rendering the element to the DOM:
ReactDOM.render(myHeading, document.getElementById(‘root‘));
Component:
function WelcomeMessage(props) {
return <h2>Hello, {props.name}!</h2>;
}
// Class component:
class Greeting extends React.Component {
render() {
return <h3>Greetings, {this.props.user}!</h3>;
}
}
// Using the components:
ReactDOM.render(
<div>
<WelcomeMessage name=“Bob“ />
<Greeting user=“Alice“ />
</div>,
document.getElementById(‘root‘)
);
Key points:
Elements are simple objects, often created using JSX, describing UI parts.
Components are reusable code blocks that can return elements, manage state, and handle events.
Functional components: Just a JavaScript function returning elements.
Class components: Extend React.Component with lifecycle methods for deeper control.
Props: Pass data to components for customization.
In summary:
Elements are the what (the UI structure).
Components are the how (how to render the UI and manage its behavior).
More info:
ReactJS Interview Questions
Passing data in React
