What is a React Component?

Hey there! In this article, we are going to see what is a Component in React.js.

If you prefer video, then check it out

In short, React components are a function or a class that returns Html.

Components come in two types Class component and Functional component.

Just like a function component takes an argument called props.

Here's an example of a Functional Component:

import React from 'react';

function FunctionalComponent(props) {
  return (
    <div>
      <h2>{props.greeting} world form functional component</h2>
    </div>
  );
}

export default FunctionalComponent;

A Functional component is just a plain old JavaScript function. It could also be an arrow function. In a functional component, we access props from the props argument.

Here's an example of a Class Component:

import React, { Component } from 'react';

 class ClassComponent extends Component {
  render() {
    return (
      <div>
        <h2 className='class'>
          {this.props.greeting} world form Class component
        </h2>
      </div>
    );
  }
}

export default CassComponent;

Here we created a simple Class component. To create a Class Component we need to first import the "Component" component from React. Then extends it to create a Class Component. In a class component, we access props from "this.props".

To render these components, import them inside the app.js file and call them like this:

function App() {
  return (
    <div className='App'>
         <ClassComponent greeting={"Hello" }/>
         <FunctionalComponent greeting={"Hello" }/>
    </div>
  );
}

Conclusion:

That's it for today. If you liked it don't forget to give it a like. And if you want to add anything to it please leave a comment below.

Thanks for reading.