React Component in 5 easy steps

A React component is a reusable piece of UI that encapsulates logic and renders functions. Components allow you to break down a complex UI into smaller, independent, and reusable parts. That is why in React, a component is a self-contained piece of code that renders a specific part of a user interface. These are the building blocks of React applications, and they can be reused throughout an application.

1. React Component types

Components are defined using JavaScript, a component can be written in two ways in React.

Class based Component
Functional Component

Class components are the older style of component, and they are defined using the class keyword. Functional components are the newer style of component, and they are defined using the function keyword.

2. Class-based Component

Class-based components are created using the class keyword and extends the React.Component, which will then be able to use the functionality of React Component such as its lifecycle methods, state, and render(). Class-based components can be written in more complex stateful manners.

3. What extends React.Component

When you extend React.Component, you are inheriting from the React library’s base component class. This gives your component access to all of the methods and properties that are defined in React.Component, including:

lifecycle methods: These methods are called at specific points in the component’s lifecycle, such as when it is first created or when it is updated.
state: This object is used to store data that can change over time.
render(): This method is responsible for returning the HTML that should be rendered for the component.

Extending React.Component is a good practice because it makes your components more reusable and easier to maintain. It also gives you access to the powerful features that are built into the React library. Here is a class based component code example:

App.js

import React from "react";

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>This is my class component</h1>
      </div>
    );
  }
}

function App() {
    return (
      <div>
        <MyComponent />
      </div>
    );
}

-----------------------

OUTPUT:

This is my class component

4. Functional Component

Functional components are simple JavaScript fucntions that take in ‘props’ as an argument and return a React element. They are defined using the ‘function’ keyword and can be written in a concise stateless manner. Here is a class based component code example:

import React from "react";

const MyComponent = () => {
  return (
    <div>
      <h1>This is my functional component</h1>
    </div>
  );
};

function App() {
    return (
      <div>
        <MyComponent />
      </div>
    );
}

-----------------------

OUTPUT:

This is my functional component

5. Comparison of React Component Types

Class-based React Component

Advantages

They are more established and have been around for longer.
They have more features, such as state and lifecycle methods.
They are more familiar to developers who are used to working with other frameworks that use classes.

Functional React Component

Advantages

They are more concise and easier to read.
They are easier to test.
They can be more performant than class components.

Disadvantages

They can be more difficult to understand and learn, especially for beginners.
They can be more difficult to test.
They can be less performant than functional components.

Disadvantages

They are less established and have less documentation and support available.
They are less powerful and cannot do things that class components can, such as have state and lifecycle methods.
They are less flexible and cannot be used in a wider variety of situations.

6. When choosing between class and functional components

There is a situation after learning both types of React Component that which we should use while writing a code, Here are some additional considerations when choosing between class and functional components:

Complexity: Functional components are generally simpler than class components, which can make them easier to understand and maintain.
Testing: Functional components are easier to test than class components, which can help to improve the quality of your code.
Performance: Functional components can be more efficient for performance than class components, especially when used with React Hooks.
Compatibility: Some third-party libraries may only support class components. If you are using one of these libraries, you may need to use class components.

The component lifecycle is an important part of React, and one needs to understand it in order to be a good developer of React, to know What is Component Lifecycle, check out “React Component Lifecycle“.

Also checkout One-way data flow in ReactJS in 5 easy step

I hope this content will be enough to understand what is JSX and how it works with multiple examples. If your want to learn more about ReactJS, you can follow all the ReactJS tutorials starting from “Introduction to React” on devcribe.com. Happy Coding!