Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create components in ReactJS ?

  • Last Updated : 06 Aug, 2021

As we all know, React uses this JSX format so that we can put HTML and JavaScript together. These React components can be defined anywhere in your ReactJS project and 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.

Types of Components:

  1. React functional components
  2. React class-based component

1. React Functional Components: React functional components 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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Syntax:

Javascript






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:

Javascript




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')
);

Now we are going to see the full-fledged working App created using React components.



 

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure: It will look like the following.

file directory

Approach: Now have a component named “Card” in your App.js. we are going to use this component later. This Then 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. 

App.js




import React from "react";
   
function Card({ receiver, writer }) {
  return (
    <div>
      <h1 style={{ 
          backgroundColor: "lightblue"
          width: "fit-content" 
      }}>
        GeeksforGeeks 
      </h1>
        
      <h2 style={{ 
          backgroundColor: "lightgrey"
          width: "fit-content" 
      }}>
        A Computer Science portal for geeks. 
        It contains well written, well 
        thought and well explained computer 
        science and programming articles
      </h2>
        
      <h3>Your truly, {writer}</h3>
    </div>
  );
}
   
export default function App() {
  return (
    <div>
      <Card writer="GFG" receiver="gfg jr" />
    </div>
  );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Output 

References: https://reactjs.org/docs/components-and-props.html




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!