In my previous blog, I talked about “How you can set up your development environment for React”. If you haven’t read that one then go and check it out. In this blog, I will be explaining React Components by using some real-life analogy. Read this blog till the end and you will get familiar with react components.
As you all know React is a popular JavaScript library for building user interfaces. React allows us to create reusable pieces of UI called components. Components are like Lego bricks that we can use to build complex and interactive web pages.
But what are components exactly? And how can we relate them to real-life examples? In this blog post, I will try to answer these questions by using an analogy of a house.
What is a component?
A component is a function or a class that returns some HTML code (also known as JSX) that describes how a part of the UI should look like. A component can also have some logic and state that determines its behavior and appearance.
For example, let’s say we want to create a component that represents a button. We can write something like this:
function Button(props) {
return (
<button onClick={props.onClick}>
{props.text}
</button>
);
}
This component takes two props (properties): onClick and text. The onClick prop is a function that defines what should happen when the button is clicked. The text prop is a string that defines the label of the button.
We can use this component in another component like this:
function App() {
function handleClick() {
alert("Hello, world!");
}
return (
<div>
<h1>Welcome to React!</h1>
<Button onClick={handleClick} text="Click me" />
</div>
);
}
This component is called App and it represents the whole web page. It uses the Button component that we defined earlier and passes it two props: handleClick and "Click me". The handleClick function shows an alert message when the button is clicked. The "Click me" string is the label of the button.
What are the types of components?
There are two main types of components in React: class components and function components.
Class components are defined using ES6 classes and have some special features such as state, lifecycle methods, and hooks. Class components look something like this:
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
increment() {
this.setState(prevState => ({
count: prevState.count + 1
}));
}
render() {
return (
<div>
<h2>Counter</h2>
<p>The current count is {this.state.count}</p>
<button onClick={() => this.increment()}>+1</button>
</div>
);
}
}
This component is called Counter and it represents a simple counter that can be incremented by clicking a button. It has some state that stores the current count value. It also has a method called increment that updates the state by adding one to the previous count. The render method returns the JSX code that describes how the component should look like.
Function components are defined using plain JavaScript functions and have no special features. Function components look something like this:
function Greeting(props) {
return (
<div>
<h2>Greeting</h2>
<p>Hello, {props.name}!</p>
</div>
);
}
This component is called Greeting and represents a simple greeting message that takes a prop called name. It returns the JSX code that describes how the component should look like.
How can we relate components to real-life examples?
To make this analogy more concrete, let’s imagine that we want to build a house using React components. How would we do that?
First, we would need to define some components that represent different parts of the house, such as walls, windows, doors, roofs, etc. For example, we could write something like this:
function Wall(props) {
return (
<div className="wall" style={{width: props.width, height: props.height}}>
{props.children}
</div>
);
}
function Window(props) {
return (
<div className="window" style={{width: props.width, height: props.height}}>
<div className="glass"></div>
<div className="frame"></div>
</div>
);
}
function Door(props) {
return (
<div className="door" style={{width: props.width, height: props.height}}>
<div className="handle"></div>
<div className="panel"></div>
</div>
);
}
function Roof(props) {
return (
<div className="roof" style={{width: props.width, height: props.height}}>
<div className="shingles"></div>
</div>
);
}
These components are all function components that take some props that define their dimensions and appearance. They also use some CSS classes and styles to make them look more realistic. The Wall component also accepts some children components that can be nested inside it, such as Window or Door.
Next, we would need to compose these components together to form the structure of the house. For example, we could write something like this:
function House(props) {
return (
<div className="house">
<Wall width="10m" height="3m">
<Window width="1m" height="1m" />
<Door width="1m" height="2m" />
</Wall>
<Wall width="10m" height="3m">
<Window width="1m" height="1m" />
<Window width="1m" height="1m" />
</Wall>
<Wall width="10m" height="3m">
<Window width="1m" height="1m" />
<Window width="1m" height="1m" />
</Wall>
<Wall width="10m" height="3m">
<Window width="1m" height="1m" />
<Door width="1m" height="2m" />
</Wall>
<Roof width="10m" height="2m" />
</div>
);
}
This component is called House and it represents the whole house. It uses the Wall, Window, Door, and Roof components that we defined earlier and pass them some props that define their dimensions. It also arranges them in a way that forms a rectangular house with four walls, eight windows, two doors, and one roof.
Finally, we would need to render the House component to the browser. For example, we could write something like this:
ReactDOM.render(
<House />,
document.getElementById("root")
);
This code uses the ReactDOM.render function to render the House component to an HTML element with an id of "root".
Conclusion
In this blog post, I have tried to explain what are React components and their types by using an analogy of a house. I hope this analogy helped you to understand the concept of components better and how they can be used to create complex and interactive web pages.
If you want to learn more about React, you can visit the official website or read some of the tutorials and documentation available online.
So in my next blog, I will explain what is rendering in React. So, Stay tuned. And thanks for reading this blog. I hope this blog helped you to get an idea of react components.