React Functional Components

React Functional Components

React functional components are just like JavaScript functions which returns HTML building blocks.I mean to say that if you want to create your website page where you want different HTML sections. In that case every HTML section will be maintained in a individual component. Testing & maintenance of individual components is very handy and easy.

In this example I have created a react project by using create-react-app utility.

I had made changes in APP.JS where all the individual components will reside and execute.

Here you can see I have taken bootstrap grid i.e container , rows and columns to make my website responsive and passed the references of individual components like Header, Left, Right, Content and Footer.

In order to make this task easy I have installed Visual Studio code extension “ES7 React/Redux/GraphQL/React-Native snippets”

import logo from './logo.svg';
import './App.css';
import Header from './mycomponents/Header';
import Left from './mycomponents/Left';
import Right from './mycomponents/Right';
import Content from './mycomponents/Content';
import Footer from './mycomponents/Footer';

function App() {
  return (
<div className="container" >
    <div className="row">
      <div className="col-12">
        <Header />
      </div>
      
    </div>
    <div className="row">
      <div className="col-3">
        <Left />
      </div>
      <div className="col-6">
           <Content />
      </div>
      <div className="col-3">
           <Right />
      </div>
    </div>
    <div className="row">
     
      <div className="col-12">
       <Footer />
      </div>
    </div>
    </div>
    

  );
}

export default App;

Now we will create a new folder mycomponents in the source directory and I will create different JavaScript files like Header.JS, Footer.JS, Left.JS, Right.JS, Content.JS.

Note : As per the naming convention rules Component name must be start with the capital letter and every components must return something in HTML tag.

Header.JS

import React from 'react'

export default function Header() {
    const style1 = {'background-color':'red','height':'100px'}
    return (
        <div style={style1}>
            <h2>Header</h2>
        </div>
    )
}

In this code you can see that I have used jsx syntac ,here I have created a new javascript Constant Object that is a style1 and applied on the HTML tags

Left.JS

import React from 'react'

export default function Left() {
    const style1 = {'background-color':'aqua','height':'400px'}

    return (
        <div style={style1}>
            <h2>Left</h2>
        </div>
    )
}

Right.JS

import React from 'react'

export default function Right() {
    const style1 = {'background-color':'orange','height':'400px'}

    return (
        <div style={style1}>
            <h2>Right</h2>
        </div>
    )
}

Content.js

import React from 'react'

export default function Content() {
    const style1 = {'background-color':'silver','height':'400px'}

    return (
        <div style={style1}>
            <h2>Content</h2>
        </div>
    )
}

Footer.JS

import React from 'react'

export default function Footer() {
    const style1 = {'background-color':'black','height':'400px'}

    return (
        <div style={style1}>
            <h2>Footer</h2>
        </div>
    )
}