ReactJS Components

React components are the building blocks of a React application. They let you split the UI into independent, reusable pieces. Each component works in isolation and returns HTML via a render function.

There are two main types of components in React:

1. Functional Components
2. Class Components

1. Functional Components

Functional components are simple JavaScript functions that accept props as an argument and return React elements. They are the simplest way to write components and are often used for presentational purposes.

Example: Functional Component

import React from 'react';

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

export default Greeting;

In this example, Greeting is a functional component that takes props as an argument and returns an h1 element displaying a greeting message.

Using the Functional Component

import React from 'react';
import ReactDOM from 'react-dom';
import Greeting from './Greeting';

ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));

Here, we render the Greeting component and pass a name prop to it. The component will display “Hello, John!”.

2. Class Components

Class components are ES6 classes that extend from React.Component and include a render method. They can hold and manage their own state, and have access to lifecycle methods.

Example: Class Component

import React, { Component } from 'react';

// Class component
class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default Greeting;

import React, { Component } from 'react';

// Class component
class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default Greeting;

In this example, Greeting is a class component that extends React.Component. It has a render method that returns an h1 element displaying a greeting message.

Using the Class Component

import React from 'react';
import ReactDOM from 'react-dom';
import Greeting from './Greeting';

ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));

Here, we render the Greeting class component and pass a name prop to it. The component will display “Hello, John!”.

Stateful vs Stateless Components

• Stateless Components: These are typically functional components that do not manage any internal state.
• Stateful Components: These are components that manage their own state, typically class components, but can also be functional components using React hooks.

Example: Stateful Class Component

import React, { Component } from 'react';

// Class component with state
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;

Using the Stateful Class Component

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './Counter';

ReactDOM.render(<Counter />, document.getElementById('root'));

In this example, Counter is a class component with internal state. It has a count state that increments when the button is clicked.

Example: Stateful Functional Component with Hooks

import React, { useState } from 'react';

// Functional component with state using hooks
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Using the Stateful Functional Component with Hooks

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './Counter';

ReactDOM.render(<Counter />, document.getElementById('root'));

In this example, Counter is a functional component using the useState hook to manage internal state. The count state increments when the button is clicked.

Conclusion

React components, whether functional or class-based, are the fundamental units for building user interfaces in React applications. Functional components are simpler and are increasingly preferred with the introduction of hooks, while class components offer more traditional OOP features and are still widely used. Both types can be used to create reusable, composable UI elements.