React Function Components

React Function Components

Function components are one of the fundamental ways to create components in React. They are simpler than class components and have become the preferred approach, especially with the introduction of React Hooks.

1 What Are Function Components?

A function component is a simple JavaScript function that returns JSX, which is the syntax used to describe what the UI should look like. Unlike class components, function components do not require extending React.Component and do not include lifecycle methods by default.

The following is a basic function component that returns 'Hello, World!' Heading 2.

App.js

import React from 'react';

function Greeting() {
  return <h2>Hello, World!</h2>;
}

export default Greeting;

Explanation:

• function Greeting(): A JavaScript function that returns JSX.
• return <h2>Hello, React!</h2>: Specifies what the component should render.
• Use export default to make the component reusable in other files.

Output