How to create a Functional Component in React?
Last Updated :
28 Apr, 2025
To create a functional component in React, you define a JavaScript function that returns JSX. These components are stateless and rely on props for data input.
Functional components are concise, easy to read, and can utilize React Hooks for managing state and side effects, making them a fundamental building block for React applications.
What is a Functional Component?
In modern React development, a prevalent approach involves managing state using Hooks, such as useState. This method tends to result in shorter, more concise code. Unlike traditional approaches, it gives up the use of this keyword for accessing props and state, leading to cleaner and more readable code.
Steps to Create a Functional Component in React:
Step 1: Create a React application using the following command:
npx create-react-app my-app
Step 2: After creating your project folder i.e. folder name, move to it using the following command:
cd my-app
Example of creating a Functional Component
Example 1: Below is an example to show the functional component in React.
JavaScript
import React from "react";
function GeeksforGeeks() {
return (
<div>
<h2>
How to create a functional
component in React?
</h2>
<p>
GeeksforGeeks is a computer
science portal for geeks.
</p>
</div>
);
}
export default function App() {
return (
<div className="App" >
<h2 style={{ color: 'green' }}>
GeeksforGeeks
</h2>
<GeeksforGeeks />
</div>
)
}
Output:
Example 2: In this example, we will create multiple functional components
JavaScript
import React from "react";
function GeeksforGeeks() {
return (
<div>
<h2>
How to create a functional
component in React?
</h2>
</div>
);
}
function GeeksforGeeks2() {
return (
<div>
<p style={{ color: 'teal' }}>
GeeksforGeeks is a computer
science portal for geeks.
</p>
</div>
);
}
function GeeksforGeeks3() {
return (
<div>
This is Button coming from
Third functional component
<button>GFG</button>
</div>
);
}
export default function App() {
return (
<div className="App" >
<h2 style={{ color: 'green' }}>
GeeksforGeeks
</h2>
<GeeksforGeeks />
<GeeksforGeeks2 />
<GeeksforGeeks3 />
</div>
)
}
Output:
Similar Reads
How to create Functional Components in React ? To create a functional component in React, you define a JavaScript function that returns JSX. These components are stateless and rely on props for data input. Functional components are concise, easy to read, and can utilize React Hooks for managing state and side effects, making them a fundamental b
2 min read
How to create Class Component in React? JavaScript syntax extension permits HTML-like code within JavaScript files, commonly used in React for defining component structure. It simplifies DOM element manipulation by closely resembling HTML syntax. JSX facilitates the creation of reusable UI building blocks, defined as JavaScript functions
2 min read
How to create components in ReactJS ? Components in React JS is are the core of building React applications. Components are the building blocks that contains UI elements and logic, making the development process easier and reusable. In this article we will see how we can create components in React JS. Table of Content React Functional C
3 min read
How to convert functional component to class component in ReactJS ? ReactJS offers two primary ways of creating components: functional components and class components. While functional components are more concise and easier to reason about, there are situations where class components may be necessary with the flexibility to use lifecycle methods and manage the state
2 min read
State in React Functional Component State in React functional components refers to a way of managing data that influences the rendering and behavior of components. Unlike class components, where state is managed using a this.state object, functional components use the React Hook useState to manage state efficiently.State is Local to t
3 min read