ReactJS Tutorial for Beginners - 5 - Functional Component

❮ 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 ❯