Components in React

Components are the heart of any React Application. You can think of components as building blocks. You can make a beautiful structure using these building blocks. The same thing applies to components in React. It’s a piece of UI. You can make a whole UI merging these components. You can think of them as custom HTML elements. They are independent and isolated from each other and because of that, they can be maintained and managed very easily. But the most important thing is, they are reusable. So, you can create a React component once and use it as many times as you want. That gives the flexibility to React applications and that’s why React is trending in the market. You can also customize the application according to your needs.

The below picture shows different components in the React app.

Figure 1: Components in react visualization. Source: https://www.techdiagonal.com/

The component is basically JavaScript class or function that can have arguments called properties or props. Each component must return only one React element that can be rendered in the browser. Now that you understood what components are, let me show you how to create these components.

As I mentioned above there are two ways to create components in a React application. Functional component and Class component. Let’s see what are the differences are and how to create them.

Functional Components

Functional components as the name describes are functions in JavaScript. They may or may not take arguments called props and they return React elements that are rendered in a browser. These components are for presentation purposes only. That is why they are called stateless, dumb or presentational components. They don’t have any state or they don’t manage state.

If possible use functional components as they are predictable and give the same output for the same given props because they don’t have any state.

Below is an example of a Functional Component. Here member is the Functional component that accepts props from the parent component and returns a react element wrapped in <div></div>

import React from "react";
const member = props => {
   return (
            <div>
              <p>{props.name}</p>
              <p>{props.role}</p>
            </div>
          );
};
export default member;

In the previous example, you can see that component returned only one react element <div>. If you remove <div></div> then you will get an error as shown below.

Figure 2: Error message while trying to return two react elements.

This message shows that you can’t return two react elements <p></p>. You have to wrap both <p> in one parent element <div> as shown below

<div>
    <p>{props.name}</p>
    <p>{props.role}</p>
</div>

Class Components

Class components are classes that extend React.Component in JavaScript. They are more complex than the functional components. They have states. They are called stateful, smart or containers. They can hold and manage state, contain logic and also contain other functional components.

The Class component starts with the class keyword followed by the name starting with an uppercase letter. It also extends React.Component class that gives the created component access to its functions. A class component must have render() method and must return a React element.

Below is the example of a Class component named App.

import React, { Component } from "react";
import Member from "./Member/Member";
class App extends Component {
   render() {
       return (
          <div>
              <h1>Team members</h1>
              <Member name="Travis" role="Frontend Developer" />
              <Member name="Leo" role="Android Developer" />
              <Member name="Adrian" role="Backend Developer" />
              <Member name="Layla" role="Database Developer" />
         </div>
        );
   }
}
export default App;

In the above example <Member /> is the custom Functional component created earlier. Name and role are attributes that we pass as props in a member component. This member component we use in the App class component.

Functional components are used for presentation purposes only. If you have too much logic for event handlers or lifecycle methods or states to manage, then use Class components.

References:

· https://medium.com/the-andela-way/understanding-react-components- 37f841c1f3bb
· https://www.geeksforgeeks.org/reactjs-components/
· https://www.w3schools.com/react/react_components.asp
· https://www.techdiagonal.com/wp-content/uploads/2019/08/React-components-blog-image.jpg
· https://www.name-generator.org.uk/