What are Components in Reactjs and how to use these components

What are Components in Reactjs:

Components are reusable piece of components in Reactjs.For example, for a chat application, we can create one component for the chat bubble that shows a message and reuse that component for each message in the chat.

Components are similar to javascript functions. We can pass data to a component using a parameter called props and based on that, components can render different UIs.

In Reactjs, components can be function or class components. function components are similar to javascript functions and class components are similar to a class. In this post, we will learn how to create Reactjs components with different examples.

Function and class components:

Below is an example of function component:

function Message(props){
  return <h3>{props.msg}</h3>;
}

Message is a functional component that accepts one single props and returns one < h3> holding the msg value of that props. This is same as any other javascript function, so it is called function component.

Similarly, below is also a valid Reactjs component:

class Message extends React.Component {
  render() {
    return <h3>{this.props.msg}</p>
  }
}

This is called a class component.

Example of using components:

Create one new Reactjs project using create-react-app. Create one new file WelCome.js in the same folder as App.js. Add the below code to this file:

import React from "react";

export default function WelCome(props) {
  return <h3>{props.msg}</h3>;
}

Now, change the App.js file as below:

import React from "react";
import WelCome from "./WelCome";

export default function App() {
  return (
    <div className="App">
      <WelCome msg="Hello" />
      <WelCome msg="World" />
    </div>
  );
}

Here, we are importing WelCome component and passing msg with different strings. We used WelCome two times. If you run the app, it will give a result as like below:

More than one value to props:

Let’s pass two props values to the component. Change the WelCome.js file as below:

import React from "react";

export default function WelCome(props) {
  return <h3 style={{ color: props.dark ? "black" : "red" }}>{props.msg}</h3>;
}

Change the App.js file as below:

import React from "react";
import WelCome from "./WelCome";

export default function App() {
  return (
    <div className="App">
      <WelCome msg="Hello" dark={true} />
      <WelCome msg="World" />
    </div>
  );
}

We are passing one extra data dark to the props. Based on that, we are changing the color of the h3 message.

It will give one output as like below:

Using a class component:

We can write the above functional component in class component as like below:

import React from "react";

class WelCome extends React.Component {
    render() {
        return (
            <h3 style={{ color: this.props.dark ? "black" : "red" }}>{this.props.msg}</h3>
        );
    }
}

export default WelCome;

Using ES6 arrow function:

We can also use ES6 arrow function :

import React from "react";

const WelCome = props => {
    return (
        <h3 style={{ color: props.dark ? "black" : "red" }}>{props.msg}</h3>
    );
}

export default WelCome;

return is not always required. It supports implicit return :

import React from "react";

const WelCome = props => <h3 style={{ color: props.dark ? "black" : "red" }}>{props.msg}</h3>

export default WelCome;

Components inside another Component:

We can have one compoent in another component. Components are used to divide the layout in small reusable parts. It is always a good idea to divide a large UI into small components. It makes the debugging easier and improves the code readability.

CodeVsColor

What are Components in Reactjs and how to use these components