React Components

Introduction

React components are the fundamental units of React Application. Components are independents and reusable part of code that returns HTML.
Components, like JavaScript functions, return HTML (as JSX) and simplify the creation and management of complicated user interfaces by splitting them into more manageable, and smaller chunks. They let you divide the user interface into separate, reusable sections.

Why React Components.

In web development, components help to improve efficiency and scalability.
Components allows multiple UI element to be constructed, integrated and customized independently.
Developers can work on individual components of a user interface (UI) independently and then combine them into a parent component to create the final UI.

Types of React Components

There are two types of components in react functional component and class component

Class components

These are more complex than functional components and can handle more advanced features like state and lifecycle methods. They use ES6 classes
A class component is defined by extending the React.Component class and implementing a render method which returns the JSX to be rendered.

They date back to the early days of React and are considered more conventional than functional components. But since React 16.8 introduced hooks, functional components have gained popularity.
Example:

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return (
      <div>
        <h1>Hello, Joi !</h1>
      </div>
    );
  }
}

export default Greeting;

Functional components
Functional components are JavaScript functions that return JSX. They are the simplest way to create a component. Prior to React 16.8 when Hooks were introduce to react functional components can not manage state nor have lifecycle method but with the introduction of Hooks, functional components can now manage state and side effects.
Example:

import React from 'react';

function Greeting(){
  return <h1>Hello, Joi!</h1>;
}

export default Greeting;

Rendering React Components

To render a component, initialize an element with the component and pass it to ReactDOM.render().

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

ReactDOM.render(
    <Greeting />,
    document.getElementById("root")
);

Props

Props are arguments passed into React components which stands for properties and are accessed using this.props in class components or directly in functional components.

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

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

then render like this

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Greeting name="Jason"/>);

Output:

State and Lifecycle

Functional components can use hooks to manage state and lifecycle events, while class components use state and lifecycle methods.

Functional Component with Hooks:

import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  },[]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

Class Component:

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

export default Counter;

Output:

Components Within Components

Components can be nested inside other components to create more complex UIs.

import React from "react";
import ReactDOM from "react-dom";

const Greet = () => {
    return <h1>Hello Jason</h1>;
};

const Welcome = () => {
    return <Greet />;
};

ReactDOM.render(
    <Welcome />,
    document.getElementById("root")
);

Output:

Conclusion:

React components enable developers to break down the UI into smaller, reusable parts that function independently. This modular approach simplifies the development and maintenance of complex web applications. Generally, people prefer functional components because of their simplicity and hook-using capabilities. However, class components can still be useful, especially in legacy codebases or when working with certain patterns. This guide has introduced the concept of components, their types, and their role in building visually appealing web UIs.