Functional Components

Functional components are same like JavaScript function and it will take props as input which returns HTML (JSX). It is make code easier to read and understand. Functional components are easy to test because for every input (props) it will give only one output (JSX). Functional components are piece of code so performance increases and it provide no state or life cycle methods. Functional components depend on the props and they are given to produce an output which makes debugging easier. There is no need to continuously log the state of the component to understand what is going on in the console. If you know the props being passed in as function parameter, it’s easy to trace the path of code and figure out required output.

Syntax:

function <function_name>(props)
{
    return <h1>{props}</h1>
}
export default <function_name>

To reduce typing code Using ES6 snippets rfce+enter

Example: Folder structure for Creating Functional component

Use snippet rfce in FunctionalComponent.js

FunctionalComponent.js

import React from 'react'
function FunctionalComponent() {
    return (
        <div> <h2>Example</h2>
            <div className="card"
             style={{height: '100px',width: '600px',color: 'red',
                     background: 'yellow',marginLeft:'470px'
                     }}>
               This is Functional Component
            </div>
        </div>
    )
}
export default FunctionalComponent

add <FunctionalComponent/> in App.js and import as shown bellow

App.js

import React from 'react';
import FunctionalComponent from './components/FunctionalComponent';

function App() {
  return (
    <div className="App">
      <h1 style={{textAlign:"center"}}>
      <FunctionalComponent/>
</h1>
    </div>
  );
}

export default App;

Save it and output in the browser as follows.

functional component

Example: More than one component and components can be reusable as shown below

  1. FunctionalComponent.js
  2. Fc.js

FunctionalComponent.js

import React from 'react'

function FunctionalComponent() {
    return (
        <div>
            
            <div className="card bg-primary"
             style={{
                     height: '100px',width: '300px', color:"white",
                      marginLeft:'470px'
                     }}
            > 
                     Component1
            </div>

        </div>
    )
}

export default FunctionalComponent

Fc.js

import React from 'react'

function Fc() {
    return (
        <div>
          
            <div className="card bg-warning"
             style={{
                     height: '100px',width: '300px',color:"white",
                      marginLeft:'470px'
                     }}
            > 
                     Component2
        </div> </div>
    )
}

export default Fc

App.js

import React from 'react';
import "../node_modules/bootstrap/dist/css/bootstrap.css"
import FunctionalComponent from './components/FunctionalComponent';
import Fc from './components/Fc'
function App() {
  return (
    <div className="App">
      <h1 style={{textAlign:"center"}}>Example:Functional Components</h1>
       <h2> <FunctionalComponent/><br/>
        <Fc/><br/>
        {/** reusable component */}
        <FunctionalComponent/><br/>
        <Fc/>
        </h2>
    </div>
  );
}
export default App;

Output

For complete details about Reactjs flow this entire blogs in

https://techteamup.com/category/javascript/react_js/

Leave a Reply

Your email address will not be published. Required fields are marked *