Previously I discussed about creating your first react app, in this post, we'll learn more about, props, states, creating your first react component and many things.
So,
What exactly are Components in React?
Components are important in React because they allow you to create reusable, modular UI elements that are easy to manage and update. They provide a powerful way to structure and organize your UI code, making it easier to build and maintain complex applications.
HTML elements and React components
Usually in HTML, you might use different types of elements like div, p, or span to organize and design your webpage. However, these elements can be limited in how you can reuse or customize them, which can lead to a lot of redundant or repetitive code.
On the other side React components are a powerful way to build and design your user interface. You can create your own components and use them as pieces to develop more advanced and reusable elements in your UI.
Creating a basic React component
Creating a basic component in React is quite simple, and there are a few different ways you can do it. One way is to use the React.createElement function, which allows you to create a virtual DOM element that shows your component.
Example of how you might use React.createElement :
import React from 'react';
const MyComponent = () => {
return React.createElement('div', {className: 'my-component'}, 'Hello, World!');
};
This example, we have used the React.createElement function to create a div element with a class name of my-component. The final argument to the function is the content of the element, you can see'Hello, World!' above.
Let's look at another way to create components in React, that is by using a functional components.
So,
what is a functional component?
A functional component is a simpler way to define a component that doesn't have any internal state or lifecycle methods(I have covered them below). Example:
import React from 'react';
const MyComponent = () => {
return (
<div className="my-component">Hello, World!</div>
);
}
Above we have used JSX to create a div element with a class name of my-component. The content inside the element is'Hello, World!'.
In addition to functional components, in React you can also create class-based components using the class syntax.
So,
What is class-based component?
A class-based component is a type of React component that is defined using a class😉. Class-based components have more features(internal state and lifecycle method) and capabilities than functional components.
import React from 'react';
class MyComponent extends React.Component {
render() {
return (
<div className="my-component">Hello, World!</div>
);
}
}
Above we have used the class syntax to create a component called MyComponent that extends the React.Component base class. The render method is a required method in a class-based component that returns the JSX that should be rendered for the component.
props and states
props and state are two important stuff that are used to manage data within a component.
Props means properties, they are a way to pass data from a parent component to a child component. They are read only, it means that the child component cannot modify the props it receives instead of that child component can only use the props to render its UI.
Props Example:
import React from 'react';
const MyComponent = (props) => {
return (
<div className="my-component">{props.message}</div>
);
}
Above we have used the props argument to access the message prop that is passed to the component. Then we have rendered the value of the message prop within the component's UI.
States means states, they are used to manage data within a component that can change over time. Unlike props, state is private to the component, and can only be modified using special methods provided by the React.Component base class.
Example of using state in class-based component:
import React from 'react';
class MyComponent extends React.Component {
state = {
message: 'Hello, World!'
}
render() {
return (
<div className="my-component">{this.state.message}</div>
);
}
}
What is lifecycle method?
Lifecycle methods are special methods that are called at specific points(read next para) in the lifecycle of a component. They can be useful for performing tasks such as fetching data, setting up subscriptions, or updating the component's state. However, they should be used only when necessary.
There are a few different lifecycle methods that you can use in a class-based component, and they are called at different points in the component's lifecycle.
Most common ones are:
-
componentDidMount: You can use this method to perform tasks such as fetching data or setting up subscriptions. -
componentDidUpdate: You can use this method to perform tasks such as updating the component's UI or making API calls. -
componentWillUnmount: You can use this method to perform tasks such as cleaning up subscriptions or cancelling network requests.
Example:
import React from 'react';
class MyComponent extends React.Component {
state = {
data: null
}
componentDidMount() {
fetch('https://my-api.com/data')
.then(response => response.json())
.then(data => this.setState({ data }));
}
componentDidUpdate(prevProps, prevState) {
if (prevState.data !== this.state.data) {
console.log('Data has changed!');
}
}
componentWillUnmount() {
console.log('Component is about to be unmounted!');
}
render() {
return (
<div className="my-component">
{this.state.data ? this.state.data.message : 'Loading...'}
</div>
);
}
}
Above we have used the componentDidMount method to fetch data from an API when the component is first mounted to the DOM. We have used the componentDidUpdate method to log a message when the data changes. And we are using the componentWillUnmount method to log a message when the component is about to be unmounted.
Mostly you can achieve the same results using other techniques such as state or by using useEffect hook. (You'll learn them later)
Till now, this much only. We'll learn more things soon. Thank you for reading.
Top comments (0)