React is one of the most popular JavaScript libraries used to build modern user interfaces. React is designed to create reusable UI components, which is very useful for managing and maintaining complex structures in large applications. In this article, we will provide a deep understanding of React components by detailing the concept of components, types, how to create them, and practical examples.
1. What is a Component?
A component is a building block of the UI, a piece of code that is independently reusable. Each component can have its own state and lifecycle, and can be combined with other components to create complex UIs. Using components enhances code readability and maximizes reusability.
1.1 Advantages of Components
- Reusability: Already written components can easily be reused in other projects or within the same project.
- Modularity: Each component functions independently, making code maintenance easier.
- Ease of Testing: Since each component operates independently, testing them individually is also convenient.
2. Types of Components
In React, components can mainly be divided into two types: class components and functional components.
2.1 Class Components
Class components are defined using the ES6 class syntax. They can have state and use lifecycle methods to control the component’s lifecycle.
import React, { Component } from 'react';
class MyClassComponent extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
increment = () => {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
export default MyClassComponent;2.2 Functional Components
Functional components are defined as simple JavaScript functions. After the introduction of React Hooks, functional components can also manage state.
import React, { useState } from 'react';
const MyFunctionalComponent = () => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
};
export default MyFunctionalComponent;3. Creating a Component
Creating a React component is not a difficult process. Below, we will look at the process of making components through basic examples of class and functional components.
3.1 Creating a Class Component
We will create a counter component named ‘Counter’.
import React, { Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
increment = () => {
this.setState({ count: this.state.count + 1 });
}
decrement = () => {
this.setState({ count: this.state.count - 1 });
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
<button onClick={this.decrement}>Decrement</button>
</div>
);
}
}
export default Counter;3.2 Creating a Functional Component
Below is a functional component named ‘Counter’ that has the same functionality.
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count - 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
};
export default Counter;4. Props and State
Components may appear similar, but each component shows significant differences in how it handles data. In this section, we will explain props and state in detail.
4.1 Props
Props are the means by which a parent component passes data to a child component. Props are read-only, so they cannot be directly modified within the component. The rendering result of the component changes based on the data passed from the parent component.
const Welcome = (props) => {
return <h1>Hello, {props.name}</h1>;
};
const App = () => {
return (
<div>
<Welcome name="Alice" />
<Welcome name="Bob" />
</div>
);
};4.2 State
State is the data managed within the component, representing dynamic data such as user input or the result of an API call. When the state is updated, React re-renders the component to update the UI.
import React, { useState } from 'react';
const Toggle = () => {
const [isOn, setIsOn] = useState(false);
const toggleSwitch = () => {
setIsOn(!isOn);
};
return (
<div>
<p>Switch is {isOn ? 'On' : 'Off'}</p>
<button onClick={toggleSwitch}>Toggle</button>
</div>
);
};5. Component Lifecycle
The lifecycle of a React component can be divided into three main stages: mounting, updating, and unmounting. There are specific lifecycle methods called at each stage.
5.1 Mounting
This is the method called when a component is added to the DOM. Prominent examples include constructor and componentDidMount.
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = { data: null };
}
componentDidMount() {
// Initial tasks like API calls
}
render() {
return <div>My Component</div>;
}
}5.2 Updating
This is the method called when the component’s props or state change. componentDidUpdate is a key example.
componentDidUpdate(prevProps, prevState) {
if (this.state.data !== prevState.data) {
// Handle data change
}
}5.3 Unmounting
This is the componentWillUnmount method called when a component is removed from the DOM. It is primarily used to perform cleanup tasks.
componentWillUnmount() {
// Cleanup like clearing timers
}6. Advanced Component Patterns
In React, advanced component patterns can simplify the structure of complex UIs. Here are some advanced component patterns.
6.1 Higher-Order Components (HOC)
A HOC is a component that takes a component as an argument and returns a new component. This helps reduce code duplication and increases reusability.
const withLogging = (WrappedComponent) => {
return class extends Component {
componentDidMount() {
console.log('Component mounted');
}
render() {
return <WrappedComponent {...this.props} />;
}
};
};6.2 Render Props
The Render Props pattern is a pattern in which a component passes a function as a prop to determine what to render. This helps separate data-processing logic from the UI.
class DataProvider extends Component {
render() {
return this.props.render(data);
}
}
7. Conclusion
React components are a core component of modern web development, providing a powerful tool that facilitates reusability and maintainability. In this course, we learned the basic concepts of components, various types, how to create them, and advanced patterns. With this knowledge, we hope your React applications can advance even further.
If you would like more information about React components, please refer to the official documentation. Thank you!