Functional components in React are similar to JavaScript functions and are easier to read and write with less code. They do not manage state and are often used with hooks introduced in React 16.8. These components return JSX, a syntax extension that allows HTML-like code within JavaScript.

1. Understanding
What is functional
component?
How to create?

3. What is Functional Component?
•Its similar and write pattern like Javascript function
hence its called functional component.
•Functional component can be written using much
less code more faster and easier to understand.
•Functional component behave and act much the
same way as a Class Component.

4. •Its like a function that takes in props and return JSX.
•JSX stands for JavaScript XML. It is simply a syntax
extension of JavaScript. JSX allows us to write HTML
in React.
•Functional component is also known as a stateless
component because not hold or manage state.
Functional Component

5. •It is now suggested to use Function
components along with Hooks, which were
added in React 16.8.
•Filename of component must start with an
uppercase character.
NOTE:

6. • Example: Hello.js
// Functional Component Example
import React from 'react';
function Hello(props){
return (
<h1>
Welcome to Learn {props.name}
</h1>
)
}
export default Hello;
Functional Component

7. • Example: HelloWorld.js
// Functional Component Example
import React from 'react';
const HelloWorld =()=> {
return (
<div>
<p>Hello World!</p>
<strong>ReactJS is easy to learn.</strong>
</div>
)
}export default HelloWorld;
Functional Component