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 w3wiki() { return ( <div> <h2> How to create a functional component in React? </h2> <p> w3wiki is a computer science portal for geeks. </p> </div> );}export default function App() { return ( <div className="App" > <h2 style={{ color: 'green' }}> w3wiki </h2> <w3wiki /> </div> )} |
Output:
Example 2: In this example, we will create multiple functional components
Javascript
import React from "react";function w3wiki() { return ( <div> <h2> How to create a functional component in React? </h2> </div> );}function w3wiki2() { return ( <div> <p style={{ color: 'teal' }}> w3wiki is a computer science portal for geeks. </p> </div> );}function w3wiki3() { 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' }}> w3wiki </h2> <w3wiki /> <w3wiki2 /> <w3wiki3 /> </div> )} |
Output:
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 building block for React applications.
Table of Content
- What is a Functional Component?
- Steps to Create a Functional Component in React
- Example of Creating a Functional Component