ReactJS Tutorial for Beginners - 5 - Functional Component


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.

Comments