What is a React component?

In React, a component is one of the core building blocks of the framework. Components allow you to split the UI into independent, reusable pieces, and think about each piece in isolation. There are two main types of components in React: functional components and class components.

1. Functional Component

A functional component is a JavaScript function that returns React elements (which are basically just descriptions of the UI).

Example:

import React from 'react';

function Welcome() {
  return <h1>Hello, World!</h1>;
}

export default Welcome;

Explanation:

  • This component is a function called Welcome.
  • It returns a simple <h1> element with the text "Hello, World!".
  • When rendered, this component will display the heading on the page.

Output:

Hello, World!

2. Class Component

A class component is an ES6 class that extends from React.Component and must have a render() method that returns React elements.

Example:

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

export default Welcome;

Explanation:

  • The Welcome class extends React.Component and contains a render method.
  • Inside the render method, it returns the same <h1> element with "Hello, World!".
  • The output will be the same as the functional component.

Output:

Hello, World!

Using Props in Components

Both functional and class components can receive props (short for properties) to customize them.

Example (Functional Component with Props):

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Welcome;

Usage:

<Welcome name="John" />

Output:

Hello, John!

In this case, the Welcome component is reusable and accepts a name prop, dynamically updating the greeting message.

Stateful Class Component

A class component can also hold state, which makes it more powerful for dynamic UIs.

Example:

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 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

Explanation:

  • This class-based component maintains an internal state (count).
  • It provides a button to increment the count value by 1 every time it's clicked.

Output:

Count: 0
[ Increment Button ]

(After clicking the button: Count: 1)

Conclusion

React components help in building the UI by dividing it into smaller, reusable parts. Functional components are simpler and often used for presentational purposes, while class components provide more features like state and lifecycle methods.



twitter-white sharing button
keyboard_arrow_leftPrevious
Nextkeyboard_arrow_right

Online Learner

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

twitter-white sharing button

Disclaimer About Us

Copyright 2023-2024 © All rights reserved.

logo
Frontend
Backend