One of the key features of React is its component-based architecture, which allows developers to create complex UIs by breaking them down into smaller, reusable pieces of code called components.

In this blog post, we’ll take a closer look at React components, what they are, how they work, and why they’re important.

What is a Component?

A Component is one of the core building blocks of React.

A component is an independent, reusable bit of code that represents a part of the user interface. Each component can have its own properties and state and can be composed together to create more complex UIs.

We can merge all individual components to make a parent/single component which will be the final UI for the homepage. Components in React return a piece of JSX code that tells what should be rendered on the screen.

In React we have two types of components: class and functional .

Class Components

Class components are ES6 classes that return JSX. They are also known as stateful components because of their ability to contain or manage local states.

Note**: Class components are still supported by React, but React doesn’t recommend using them in new code.**

Class components are defined using the class keyword that extends the Component constructor from React and has a render method that returns JSX.

class MyComponent extends React.Component {
  render() {
    return <h2>Hello, I am a Class Component!</h2>;
  }
}

Functional Components

A functional component is a simple JavaScript function that returns JSX . They are also known as stateless components because they do not have a state of the own.

React Hooks are used by functional components to provide the same functionality as class components.

Functional components are defined using a function keyword. You can also use the arrow function syntax.

function MyComponent() {
  return <h2>Hello, I am a Functional Component!</h2>;
}

export default MyComponent;

While class components are not obsolete, functional components have become the recommended way of building UIs in React, and many developers prefer them for their simplicity, performance and the availability of hooks.

Nested Components

React allows us to include components within other components. These included components are referred to as child components of the parent component.

To be able to use a component later, we must first export it so that we can import it elsewhere.

• Components in Components

Within the src folder of your React Project, you can create a folder named Components. Here you can create, store and manage your reusable components that can be accessed from anywhere in the project as needed.

Note: The filename must start with an uppercase character.

Let's check an example of a component nested inside a component. In the Components folder, create a folder named ParentComponent.jsx and write the following code:

import React from 'react';

function ChildComponent() {
  return (
    <div>
      <h3>Child Component</h3>
      <p>I am a Child Component.</p>
    </div>
  );
}

function ParentComponent() {
  return (
    <div>
      <h2>I am a Parent Component</h2>
      <ChildComponent />
    </div>
  );
}

export default ParentComponent

Here, the ParentComponent is a functional component that renders a div element containing a heading and the ChildComponent nested inside it. The ChildComponent is also a functional component that renders a div element containing a heading and a paragraph.

Now, you need to export the ParentComponent to App.jsx.

When ParentComponent is rendered, it will also render ChildComponent inside it.

• Components in Files

In React, it is recommended to split your components into separate files. Let's say we want to use the ParentComponent file inside another file.

To do that, create a new file GrandParent.jsx and put this code inside it:

import React from 'react'

function GrandParent() {
  return (
      <div>
          <h1>GrandParent</h1>
      </div>
  )
}

export default GrandParent

To be able to use the ParentComponent, you have to import it in your GrandParent Component.

import React from 'react'
import ParentComponent from './ParentComponent'

function GrandParent() {
  return (
      <div>
          <h1>GrandParent</h1>
          <p><ParentComponent/></p>
      </div>
  )
}

export default GrandParent

Now, remove the ParentComponent in App.jsx and import the GrandParent Component. This is the final result:

Why are React Components Important?

• Reusability

  Components can be reused in different parts of the application. This reduces code duplication and makes it easier to maintain the application.

• Nested Components

  Components allow developers to break down complex UIs into smaller, reusable pieces of code. This makes it easier to manage the complexity of large applications.

• Testability

  Components are generally small and self-contained. This makes it easier to test and debug each component independently.

• Composability

  Components can be combined to create complex UIs. This helps in building large, complex applications from small, reusable components.

In Summary

React components are a critical part of building modern web applications. They allow developers to create reusable, modular, and scalable UIs that are easy to test and maintain.

By breaking down complex UIs into smaller, self-contained pieces of code, components help to streamline the development process and reduce the risk of errors. With React components, developers can build applications that are flexible, efficient, and easy to maintain.

---

References

• react.dev

• w3schools

• simplilearn

---

Thank you for taking the time to read this blog. Hope you found it informative and enjoyable!

In the next article of this series, we'll take a look at Props.

Catch you guys on the next one. Cheers .. ✌️