HOME COMPONENTS ( PART-1)

April 04, 2025

WE INSTALL AN EXTENSION "SIMPLE REACT SNIPPET" .

IT HAS SHORTCUTS AND MAKES IT MORE EASY TO WRITE IN REACT.

imr -import React from 'react';

ffc -

function () {
    return (  );
}

export default ;

HERE, WE CREATE H1 TAGS FOR EACH OF THE COMPONENT AND MERGE IN THEIR PAGES ACCORDINGLY.

ABOUT PAGE.JS

import React from "react";
import Hero from "./Hero";
import Team from "./Team";
import Navbar from "../Navbar";
import Footer from "../Footer";
function AboutPage() {
  return (
    <>
      <Navbar />
      <Hero />
      <Team />
      <Footer />
    </>
  );
}

export default AboutPage;

NAVBAR.JS

import React from 'react';
function Navbar() {
    return ( <h1>Navbar</h1> );
}

export default Navbar;

HERO.JS

import React from 'react';
function Hero() {
    return ( <h1>Hero</h1> );
}

export default Hero;

TEAM.JS

import React from 'react';
function Team() {
    return ( <h1>Team</h1> );
}

export default Team;

FOOTER.JS

import React from 'react';
function Footer() {
    return ( <h1>Footer</h1> );
}

export default Footer;

FOR EACH COMPONENT WE CREATE FILES IN A SIMILAR WAY.

INDEX.JS

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import HomePage from "./landing_page/home/HomePage";
import AboutPage from "./landing_page/about/AboutPage";
import PricingPage from "./landing_page/pricing/PricingPage";
import Productpage from "./landing_page/product/Productpage";
import SignupPage from "./landing_page/signup/SignupPage";
import SupportPage from "./landing_page/support/SupportPage";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <SupportPage />
    {/* <SignupPage /> */}
    {/* <Productpage /> */}
    {/* <PricingPage/> */}
    {/* <AboutPage /> */}
    {/* <HomePage /> */}
  </React.StrictMode>
);