ReactJS Tutorial for Beginners - 5 - Functional Component

🎓 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 (178K+ subscribers): Java Guides on YouTube

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

❮ Previous Chapter Next Chapter ❯

---

In the previous chapter, we have seen about the React component and component types. In this chapter, we will learn about the React functional component with an example.

Functional Component Overview

• Functional components are basic JavaScript functions. These are typically arrow functions but can also be created with the regular function keyword.
• Sometimes referred to as “dumb” or “stateless” components as they simply accept data and display them in some form; that is they are mainly responsible for rendering UI.
• React lifecycle methods (for example, componentDidMount) cannot be used in functional components.
• There is no render() method used in functional components.
• These are mainly responsible for UI and are typically presentational only (For example, a Button component).
• Functional components can accept and use props.
• Functional components should be favored if you do not need to make use of the React state.

import React from "react";
const User = props => (
  <div>
    <h1>Hello, {props.name}</h1>
  </div>
);

export default User;

Functional Component Example

Let's create an HTML table and display employees on a web page using React functional components.

TableHeader.js

Let's create a file named TableHeader.js and within this file create a functional component called TableHeader:

import React from 'react'

export default function TableHeader() {
    return (
            <thead>
                <th> Employee Name </th>
                <th> Employee Role </th>
            </thead>
    )
}

TableBody.js

Let's create a file named TableBody.js and within this file create a functional component called TableBody:

import React from 'react'

export default function TableBody() {
    return (
            <tbody>
                <tr>
                    <td> Ramesh</td>
                    <td> Software Developer</td>
                </tr>
                <tr>
                    <td> Tony</td>
                    <td> Software Developer</td>
                </tr>
                <tr>
                    <td> Pramod</td>
                    <td> Software Developer</td>
                </tr>
                <tr>
                    <td> Santosh</td>
                    <td> QA Engineer</td>
                </tr>
            </tbody>
        )
}

Table.js

Let's create a new file called Table.js, within this file create a functional component called Table and import TableHeader and TableBody functional components into it:

import React from 'react'
import TableHeader from './TableHeader'
import TableBody from './TableBody'

export default function Table() {
    return (
        <div>
            <table border = "1">
                <TableHeader />
                <TableBody />
            </table>
        </div>
    )
}

App.js

Let's change the App component with the following code:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Table from './components/functional-components/Table';

function App() {
  return (
    <div className="App">
      <header className="App-header">
          <Table />
      </header>
    </div>
  );
}

export default App;

ES6 Arrow Functions

We can also use ES6 arrow functions to create functional components. 

For example:

import React from 'react'

export const TableHeader = () => {
    return (
        <thead>
        <th> Employee Name </th>
        <th> Employee Role </th>
    </thead>
    )
}

Demo

Start React App using npm start and Use http://localhost:3000/ link to access index.html page in a browser:

What's Next?

In this chapter, we have learned about React functional component with an example. In the next chapter, we will learn about the React class component with an example.

---

❮ Previous Chapter Next Chapter ❯

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF