How to create Functional Components 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. Prerequisites:NodeJS or NPMReactJSXSteps to Create React Application And Installing Module: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-appProject Structure: The updated dependencies in package.json file will look like: "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4",}Example: Implementation to create a functional component. JavaScript //App.js import React from "react"; // This is the functional component that will be added to the application function GeeksforGeeks() { return ( <div> <h1> GeeksforGeeks </h1> <p> GeeksforGeeks is a computer science portal for geeks. </p> </div> ); } export default GeeksforGeeks; Output: Example 2: Implemenattion to show how to add a functional component in our application with a custom input by changing the contents of the header in the App.js file. JavaScript //geeksforgeeks.js import React from "react"; /* This is the functional component that will be added to the application with custom input */ function GeeksforGeeks(props) { return ( <div> <h1> {props.name} </h1> </div> ); } export default GeeksforGeeks; JavaScript // App.js import GeeksforGeeks from "./components/geeksforgeeks"; import "./styles.css"; export default function App() { return ( <div className="App"> // Creating custom JSX tags with different inputs <GeeksforGeeks name="GeeksforGeeks" /> <GeeksforGeeks name="A computer science" /> <GeeksforGeeks name="portal" /> <GeeksforGeeks name="for geeks" /> </div> ); } Output: Step to run the application: Now to run the above code open the terminal and type the following command. npm start Comment More infoAdvertise with us Next Article How to create components in ReactJS ? R rajatsandhu2001 Follow Improve Article Tags : Web Technologies ReactJS Geeks Premier League React-Questions Geeks Premier League 2023 +1 More Similar Reads How to create a Functional Component 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 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 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 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 Create Functional Components using Vue Loader ? Vue.js is a JavaScript framework used in building powerful and beautiful user interfaces. The key feature of Vue.js is its component-based architecture that allows the developers to create reusable and modular components. Functional components, in particular, provide a lightweight and efficient way 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 Like