A functional component is a JavaScript function that returns JSX. Functional components are the most common way to create components in modern React applications.
A functional component is simply a JavaScript function that returns React JSX.
function Welcome() {
return (
<h1>Welcome to React</h1>
);
}
Here, Welcome is a functional component.
A basic functional component can return a single JSX element.
function Greeting() {
return (
<p>Hello Student</p>
);
}React component names should normally begin with an uppercase letter.
function Student() {
return <h2>Student Information</h2>;
}Using an uppercase first letter helps React distinguish custom components from built-in HTML elements.
The function returns JSX using the return statement.
function Course() {
return (
<div>
<h1>React Course</h1>
<p>Learn React step by step.</p>
</div>
);
}A functional component is rendered using JSX syntax.
function App() {
return (
<div>
<Course />
</div>
);
}
Here, Course is used as a React component.
Functional components can also be created using arrow functions.
const Welcome = () => {
return (
<h1>Welcome to React</h1>
);
};If the component contains a simple JSX expression, the return can be written implicitly.
const Welcome = () => (
<h1>Welcome</h1>
);The parentheses contain the JSX returned by the arrow function.
A component can be exported so it can be used in another file.
function Header() {
return (
<header>
<h1>My Website</h1>
</header>
);
}
export default Header;import Header from "./Header";
function App() {
return (
<Header />
);
}
export default App;The imported component can be rendered inside another component.
JavaScript variables can be created inside a functional component.
function Student() {
const name = "Rahul";
const age = 21;
return (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
</div>
);
}JavaScript expressions can be used inside the returned JSX.
function Price() {
const price = 500;
const quantity = 2;
return (
<p>
Total: {price * quantity}
</p>
);
}A functional component can contain helper functions.
function Welcome() {
function getMessage() {
return "Welcome to React";
}
return (
<h2>{getMessage()}</h2>
);
}Event handlers can be defined inside functional components.
function Button() {
function handleClick() {
alert("Button clicked!");
}
return (
<button onClick={handleClick}>
Click Me
</button>
);
}A function can also be defined directly in an event expression.
function Button() {
return (
<button
onClick={() => alert("Hello React")}
>
Click Me
</button>
);
}Props can be received as a function parameter.
function Student(props) {
return (
<h2>
Student: {props.name}
</h2>
);
}The component can receive different values from its parent.
function App() {
return (
<div>
<Student name="Rahul" />
<Student name="Neha" />
</div>
);
}The same functional component is reused with different data.
Props can be destructured directly in the function parameter.
function Student({ name, age }) {
return (
<div>
<h2>{name}</h2>
<p>
Age: {age}
</p>
</div>
);
}
A component can receive content placed between its opening and closing
tags through the children prop.
function Card({ children }) {
return (
<div className="card">
{children}
</div>
);
}The component can then wrap different content.
function App() {
return (
<Card>
<h2>React Course</h2>
<p>
Learn React step by step.
</p>
</Card>
);
}
Functional components can use React Hooks such as
useState.
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<button
onClick={() => setCount(count + 1)}
>
Count: {count}
</button>
);
}
Functional components can also use the useEffect Hook
for side effects.
import { useEffect } from "react";
function App() {
useEffect(() => {
console.log("Component rendered");
}, []);
return (
<h1>React App</h1>
);
}A functional component can display different JSX based on a condition.
function UserStatus({ loggedIn }) {
return (
<div>
{loggedIn
? <h2>Welcome Back</h2>
: <h2>Please Login</h2>
}
</div>
);
}
Functional components can render lists using JavaScript methods such
as map().
function StudentList() {
const students = [
"Amit",
"Ravi",
"Neha"
];
return (
<ul>
{students.map(student => (
<li key={student}>
{student}
</li>
))}
</ul>
);
}A component should ideally have a clear purpose. Large interfaces can be divided into smaller components.
App
|
+-- Header
+-- Navbar
+-- StudentList
| |
| +-- StudentCard
|
+-- FooterA reusable component can be designed to accept different values through props.
function Button({ text }) {
return (
<button>
{text}
</button>
);
}<Button text="Save" />
<Button text="Delete" />
<Button text="Update" />Functional components can be combined to create complete application sections.
function Header() {
return <header>Header</header>;
}
function Content() {
return <main>Content</main>;
}
function Footer() {
return <footer>Footer</footer>;
}
function App() {
return (
<div>
<Header />
<Content />
<Footer />
</div>
);
}src/
|
+-- components/
| +-- Header.jsx
| +-- Footer.jsx
| +-- Button.jsx
| +-- StudentCard.jsx
|
+-- pages/
| +-- Home.jsx
|
+-- App.jsx
+-- main.jsxKeeping reusable components in separate files can make larger applications easier to organize.
function StudentCard({ name, course }) {
return (
<div className="card">
<h2>
{name}
</h2>
<p>
Course: {course}
</p>
<button>
View Profile
</button>
</div>
);
}
function App() {
return (
<div>
<StudentCard
name="Rahul"
course="React"
/>
<StudentCard
name="Neha"
course="JavaScript"
/>
</div>
);
}
export default App;
The StudentCard component is reusable because it receives
different values through props.
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
function increase() {
setCount(count + 1);
}
return (
<div className="card">
<h2>
Counter
</h2>
<p>
Count: {count}
</p>
<button onClick={increase}>
Increase
</button>
</div>
);
}
function App() {
return (
<div>
<Counter />
<Counter />
</div>
);
}
export default App;This example demonstrates a functional component using state, an event handler, JSX, and component reuse.
useState and useEffect can be used in functional components.Question: What does a functional React component normally return?