React Components & Functional Components

Components In React JS

In This Blog, you are going to learn React JS Components and its first type Functional Components, which is very useful and mostly used component in React App.

React Components

• In React JS, Components are independent and reusable pieces of code and also called building blocks of react app.
• In React JS, they serve the same purpose as JavaScript functions, but work in isolation (separately) and return HTML or HTML elements.
• In React JS, Components are of two types
  • Class components
  • Function components
• In this Blog, we will concentrate on Function components.

Functional Components In React JS

• Components are just like functions that return HTML elements.
• In older React code bases, you may find Class components primarily used.
• In React JS, it is now suggested to use Function components, which were added in React 16.8.

Understanding WorkFlow Of React APP

1st Way Of Working With Functional Components

2nd Way Of Working With Functional Components

1st Way Of Working With Functional Components – Code

Header.js Component

import React from 'react';

function Header() {
    return (
        <header>
            <h1>This is My Header</h1>
        </header>
    );
}

export default Header;

Footer.js Component

import React from 'react';

function Footer() {
    return (
        <footer>
            <h1>This is My Footer</h1>
        </footer>
    );
}

export default Footer;

Sidebar.js Component

import React from 'react';

function Sidebar() {
    return (
        <div>
            <h1>This is My SideBar</h1>
        </div>
    );
}

export default Sidebar;

Index.js File – Code

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Header from './Header';
import Footer from './Footer';
import Sidebar from './Sidebar';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Header/>
    <Sidebar/>
    <Footer/>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

2nd Way Of Working With Functional Components – Code

Header.js Component

import React from 'react';

function Header() {
    return (
        <header>
            <h1>This is My Header</h1>
        </header>
    );
}

export default Header;

Footer.js Component

import React from 'react';

function Footer() {
    return (
        <footer>
            <h1>This is My Footer</h1>
        </footer>
    );
}

export default Footer;

Sidebar.js Component

import React from 'react';

function Sidebar() {
    return (
        <div>
            <h1>This is My SideBar</h1>
        </div>
    );
}

export default Sidebar;

App.js File – Code

import logo from './logo.svg';
import './App.css';
import Header from './Header';
import Footer from './Footer';
import Sidebar from './Sidebar';

function App() {
    return (
        <>
            <Header />
            <Sidebar />
            <Footer />
        </>
    )
}

export default App

Index.js File – Code

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Click Below Link to Download Notes & Source Code Of This Blog

https://www.mediafire.com/file/l1evohbrmy0rigc/Functional+Components.pptx/file