Understand Components In React/Next Js ?

Tips : In React/Next JS application everything is components. So basically React App is a collection of functions in some customized Hierarchy (Parent and Child)

 

1. Functional Components: Functional components are simple and purely presentational. They receive props (data) and return React elements, describing what should appear on the screen.

   

   import React from 'react';

	-------- User.jsx-----------

   const UserComponent = (props) => 	{

     return <div>Hello, {props.name}!</div>;
   };

   export default UserComponent;


   ----- Calling from home.jsx ------

   <UserComponent name="mmantratech" />

2. Class Components: Class components are ES6 classes that extend `React.Component`. They can hold and manage local state and have access to component lifecycle methods.

 

-------------User.jsx-------------------

   import React, { Component } from 'react';

   class UserClassComponent extends Component {
     constructor(props) {
       super(props);
       this.state = {
         count: 0
       };
     }

     render() {
       return (
         <div>
           Count: {this.state.count}
           <button onClick={() => this.setState({ count: this.state.count + 1 })}>
             Increase Count
           </button>
         </div>
       );
     }
   }

   export default UserClassComponent;

------------ Calling from home.jsx--------------

   <UserClassComponent />

 

In these examples, `UserComponent` and `UserClassComponent` are React components. `UserComponent` is a functional component that displays a greeting message based on the `name` prop. `UserClassComponent` is a class component managing a `count` state and providing a button to increase the count.

Practical Example using VITE react App ( Not CRA)

Create React App

npm create vite@latest

 

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>
        <p>Examples of components</p>
        <UserInfo />
        <ProductInfo />
      </div>
    </>
  );
}

function UserInfo() {
  return (
    <>
      <p>User Details</p>
    </>
  );
}
function ProductInfo() {
  return (
    <>
      <p>Product Details</p>
    </>
  );
}

export default App;

So, in the above example it is very clear that "UserInfo" and "ProductInfo" are components which are wrapped in parent component which is "App" itself.

To Run the App:

npm run dev

Modern React development favors functional components with Hooks, enabling them to manage state and utilize other React features without the need for class components.

NOTE : React official documents suggest to avoid Class Components over functional Components