How to create a Functional Component in React? Last Updated : 28 Apr, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. Table of Content What is a Functional Component?Steps to Create a Functional Component in ReactExample of Creating a Functional ComponentWhat 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-appStep 2: After creating your project folder i.e. folder name, move to it using the following command: cd my-appExample of creating a Functional ComponentExample 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: Comment More infoAdvertise with us Next Article State in React Functional Component A akshitsaxena2 Follow Improve Article Tags : Web Technologies ReactJS ReactJS-Component 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 How to use PropTypes in a Functional Component in React? PropTypes is a mechanism provided by React for type-checking props passed to components. It allows developers to specify the expected types of props (such as strings, numbers, arrays, objects, etc.) and whether they are required or optional. PropTypes helps catch bugs early by providing warnings in 2 min read Like