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.