How to create components in react js

How to create components in ReactJS?
• React uses this JSX format so that we can put HTML and JavaScript
together. So, in this article, we will see how to create components in
ReactJS.
• React components can be defined anywhere in your ReactJS project.
Also, it can be used anywhere in your ReactJS project. There are two
ways to define components in ReactJS. Both are used by a wide range
of programmers. But with the APIS/HOOKs like useState, use context
the functional components are becoming more and more popular.
There are two types of components:

• React functional components
• React class-based component
1) React Functional Components:
This component can be any JavaScript function that returns the HTML.
These functional components can also accept “props”, meaning
properties or data. As these are JavaScript functions or extensions of
JavaScript functions, they can also be created from the ES6 convention
of the arrow function. These functional components can also accept
the props that we can use using JSX syntax and you can also put your
normal JavaScript code before the return statement. One thing to
notice is that there should only be one return per component.

Syntax:
const Greet = (props) => {
const person = props.name;
return (
<div>
<h1>Hello {person}!!</h1>
</div>
)
}

2) React Class-based Components:
• The class-based components also have almost the same features as
React function components. but before we define our class-based
component, we need to import the “React. Component” or extract
the Component like “{Component}” from React.
import React, {Components} from 'react';

Syntax:
import React, { Component } from 'react'
class App extends Component {
render()
return (
<div>
<h1>Hello {this.props.name}</h1>
</div>
)
}
}

Rendering the Component:
• We have successfully made the components, but in order to use them
we need to render them. one can first export their components and
can use them anywhere in the ReactDOM.render method after
importing them. Somewhere in your project in ReactDOM.render().
ReactDOM.render(
<React.StrictMode>
<Greet name="gfg " />
</React.StrictMode>,
document.getElementById('root')
);

Creating React Application:
1) Create a React application using the following command:
npx create-react-app foldername
2) After creating your project folder i.e. folder name, move to
it using the following command:
cd foldername

• Now have a component named “Card” in your App.js. We are going to
use this component later. This component accepts two
arguments/data of “writer” and “receiver”. Then we have one return
which just uses this data of writer and receiver and displays it on a
card. After that, we have made another component named App
which will be used to hold all the components for our Application.
This App has an export default so that we can use it anywhere in our
React App. Hence, we do not have to render it manually. This App is
automatically rendered in your index.js while creating a react app
using npx.

import React from "react";
function Card({ receiver, writer }) {
return (
<div>
<h1 style={{
backgroundColor: "lightblue",
width: "fit-content"
}}>
BOSC Tech Labs
</h1>
<h2 style={{
backgroundColor: "lightgrey",
width: "fit-content"
}}>

We are a team of innovative and passionate engineers who transform your idea into reality.
</h2>
<h3>Your truly, Mr. Nick</h3>
</div>
);
}
export default function App() {
return (
<div>
<Card writer="GFG" receiver="gfg jr" />
</div>
);
}

• Run the application using the following command from the root
directory of the project:
npm start
• Now open your browser and go to http://localhost:3000/, you will see the following output:

Conclusion:
• So, in this article, we have been through how to create components in
ReactJS. Also, feel free to comment with your suggestions and
feedback on the post. Moreover, at BOSC Tech Labs, we have a team
of highly experienced React JS developers. They can assist you in
developing your customized web app. So contact us to hire
experienced ReactJS developers.
• Article Source: https://bosctechlabs.com/create-components-in-
reactjs/

How to create components in react js

More Related Content

Similar to How to create components in react js (20)

More from BOSC Tech Labs (20)

Recently uploaded (20)

How to create components in react js