Introduction to React Components
In this second article of our React Learning Series, we’ll explore the heart of React development — components. Components are the building blocks of any React application, and understanding how to use them effectively is key to mastering React.
By the end of this article, you’ll have a clear understanding of both functional and class-based components, how they work, and when to use them. We’ll also create some basic examples to solidify these concepts.
What is a React Component?
A React component is like a function that returns UI elements. Components let you split the UI into independent, reusable pieces, making the development process more organized. React components come in two main types: functional and class-based.
Functional Components
Functional components are the simplest way to write components in React. They are simply JavaScript functions that return JSX (React’s HTML-like syntax). These components are stateless, meaning they don’t manage internal state unless using React Hooks (which we will cover in a future article).
Example of a Functional Component:
javascriptCopy codeimport React from 'react';
function Greeting() {
return <h1>Hello, welcome to React!</h1>;
}
export default Greeting;
In this example, the Greeting component is a simple function that returns a h1 tag with a welcome message.
Class-Based Components
Before hooks were introduced, class-based components were the primary way to handle state and lifecycle methods in React. Class components are ES6 classes that extend React.Component and contain a render method that returns JSX.
Example of a Class-Based Component:
javascriptCopy codeimport React, { Component } from 'react';
class Welcome extends Component {
render() {
return <h1>Welcome to React, {this.props.name}!</h1>;
}
}
export default Welcome;
Here, we have a class-based component named Welcome. It extends React.Component, and inside the render method, it returns a greeting message. Notice that we access this.props.name, allowing us to pass data from a parent component to this one.
Differences Between Functional and Class Components
When to Use Functional vs. Class Components?
- Functional Components are now preferred for most use cases, especially with the introduction of Hooks, which allow you to add state and other features to these simple components.
- Class-Based Components may still be used in legacy code or in cases where developers prefer the class structure. However, the React community is moving towards functional components for better readability and simplicity.
Example: Passing Props to Components
Props (short for properties) are a way to pass data from parent components to child components in React. Both functional and class components can receive props.
Functional Component with Props:
javascriptCopy codefunction User(props) {
return <h2>Hello, {props.name}!</h2>;
}
Class Component with Props:
javascriptCopy codeclass User extends React.Component {
render() {
return <h2>Hello, {this.props.name}!</h2>;
}
}
In both examples, we’re using props to pass a name to the User component and display it in the UI.
State in React Components
In React, state is used to manage data that changes over time. Functional components use Hooks to manage state, while class-based components use this.state and this.setState().
Example: Class Component with State:
javascriptCopy codeclass Counter extends React.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>
);
}
}
In this example, the Counter class component manages a count state and provides a button to increment the value.
Conclusion
Understanding the differences between functional and class components is crucial as you continue to build React applications. With the rise of React Hooks, functional components have become the go-to approach for modern React development, but class components still hold relevance, particularly in legacy applications.
In the next article, we’ll dive deeper into React Hooks and show how to manage state and side effects in functional components.
Interview Questions and Answers
1. What are React components, and why are they important?
Answer:
React components are the building blocks of a React application. They help break down the UI into reusable, independent pieces, making the development process more organized and scalable. Components can be functional or class-based.
2. What is the difference between functional and class-based components in React?
Answer:
Functional components are simple JavaScript functions that return JSX. They are stateless unless using React Hooks. Class components are ES6 classes that extend React.Component and have more complex syntax with methods like render and state management via this.state.
3. What are props in React? How are they used in functional and class components?
Answer:
Props (short for properties) are a way to pass data from one component (parent) to another (child). In functional components, props are passed as function arguments, while in class components, they are accessed via this.props.
4. Can functional components manage state in React?
Answer:
Yes, with the introduction of React Hooks, functional components can now manage state using the useState hook, which was previously only possible in class components.
5. How do you manage state in class-based components?
Answer:
State in class-based components is managed using this.state, and updates to the state are made using this.setState().
6. What are the benefits of using functional components over class components?
Answer:
Functional components are simpler, more readable, and easier to maintain. With Hooks, they can manage state and side effects, making them the preferred approach in modern React development.
7. What lifecycle methods are available in class components that are not available in functional components?
Answer:
Class components can use lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount. Functional components can achieve similar behavior using Hooks like useEffect.