How to add component in react – 2023

Components

Components are single line of code that can be usable in react and it is made by using multiple lines of code and it usually returns html elements. There are two types of components i.e, Class components and Function components. And we are going to learn about function component and how to add component in react using function.

How to add component in react –

To add component in react we need to create a new file in our react folder.And there is two criteria in creating a new file that is- 1} The first letter of the file name should be in capital letter. 2} The file name should end with .jsx

Now after sucessfully creating .jsx file you need to import React from “react”👇

import React from "react";

Now after importing react module you need to create a function that returns an html code or jsx 👇👇👇Follow the code below👇👇

import React from "react";
function Heading(){
   return   <h1>My Name is Alpha<br></br></h1>;
}
export default Heading;

Here i have created a Heading.jsx file and I have inserted Heading inside the function and inside the function i have returned some html element and i have ended exporting Heading. Now you can add any html element using same code that i have shown above just by adding html element.

So this is It above i have succesfully createad a react component. Now we can use the component in index.js file.

How to add component in react index.js file using React module?

You have created a component but it is not visible in the server because you have not imported this component in your index.js file.To import component in your index.js file you need to use React module codes. Just follow the code that i have shown below👇

import Heading from "./Heading";

This is how you can add component in React using React module.

Now after writing React module inside index.js you can use the component very easily.

How to use component in React?

To use component in react you can simply add your component name inside opening and closing tag <></>. For example-

const root=ReactDOM.createRoot (document.getElementById('root'));
 root.render(
  <>
  <div className="container">
 <Heading></Heading>
  </div>
  

  </>

As you can see i used component Heading that i have created before and i have added this component inside root.render.

The whole code will look like this-👇

import React from "react";

function Heading(){
   return   <h1>My Name is Alpha<br></br></h1>;
}
export default Heading;

Inside Heading.jsx file

import React from "react";
import  ReactDOM  from "react-dom";
import Heading from "./Heading";

const root=ReactDOM.createRoot (document.getElementById('root'));
 root.render(<><Heading></Heading></>);

Inside index.js file

Thats it guys I have you ubdersatand the concept of How to add component in react – 2022 by simply creating a different file of jsx.

Learn How to install React.js using npm.