React Functional Components

📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (176K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

In this tutorial, we will React Functional Components with examples.

• A functional component is basically a JavaScript/ES6 arrow function that returns a React element (JSX). 
• Naming convention: Functional Components always starts with a capital letter. 
• Functional Component takes props as a parameter if necessary

Basic Functional Component

The functional component is basically a JavaScript/ES6 arrow function that returns a React element (JSX). 

In this example, we define a basic functional component called Greeting that renders a simple greeting message.

import React from 'react'; function Greeting() { return <h1>Hello, World!</h1>; }; export default Greeting;

Let's rewrite the above functional component using the ES6 arrow function:

import React from 'react'; const Greeting = () => { return <h1>Hello, World!</h1>; }; export default Greeting;

Functional Component with Props

Here, we define a functional component called Welcome that accepts a prop called name and renders a personalized welcome message.

import React from 'react'; const Welcome = (props) => { return <h1>Welcome, {props.name}!</h1>; }; export default Welcome;

Next, use the Welcome functional component in the App component and pass the name property:

import Welcome from './components/Welcome' function App() { return ( <div> <Welcome name = "Ramesh"/> </div> ) } export default App

Functional Component with JSX and JavaScript Expressions

In this example, we define a functional component called Counter that calculates and displays the count and its doubled value using JavaScript expressions within JSX.

import React, { useState } from 'react'; const ButtonCounter = () => { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); }; return ( <div> <h2>Count: {count}</h2> <button onClick={handleClick}>Increment</button> </div> ); }; export default ButtonCounter;

Functional Component with Event Handling

Here, we define a functional component called ButtonCounter that tracks a count state using the useState hook. It renders the count value and a button that increments the count when clicked, using an event handler function.

import React, { useState } from 'react'; const ButtonCounter = () => { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); }; return ( <div> <h2>Count: {count}</h2> <button onClick={handleClick}>Increment</button> </div> ); }; export default ButtonCounter;

Related Tutorials

• React Hooks - useState and useEffect
• React JS ( React Hooks) + Spring Boot Tutorial
• Create a New React App Step by Step
• Understanding React App Folder Structure
• How to Add Bootstrap to React App
• ReactJS Axios GET, POST, PUT, and DELETE Example Tutorial
• ReactJS Axios Example
• ReactJS Fetch API Example
• React JS CRUD Example Tutorial
• React Router Step-By-Step Tutorial
• React Class Components
• React Functional Components
• React Props
• React State and setState in Class Components
• React useState Hook
• React Conditional Rendering
• How to Add Bootstrap in React JS Using NPM
• How to Create React App using Vite
• Handling Events in React
• How to Consume REST API in React
• React JS Form Validation Example