React Clone | React Useful Packages | React Starter Template

React Library Needed

1. Axios

2. Dotenv

3. React-lazy-load-image-component

4. React router dom

5. React icons

6. Sass

7. Mui

App.js Structure

import { Navigate, Route, Routes, useLocation } from "react-router-dom";
import Layout from "./layout/Layout";
import Home from "./pages/home/Home";
import Login from "./pages/login/Login";
import ErrorPage from "./pages/errorpage/ErrorPage";
// import { useAuthContext } from "./context/AuthContext";
function App() {
  // const ProtectedRoute = ({ children }) => {
  //   const { user } = useAuthContext()
  //   if (user === null) {
  //     return <Navigate to="/" />;
  //   }
  //   return children;
  // };
  return (
    <Routes>
      <Route exact path="login" element={<Login />} />
      <Route path="/" element={<Layout />}>
        <Route index path="/" element={<Home />} />
  <Route path="*" element={<ErrorPage />} />
      </Route>
    </Routes>
  );
}
export default App;

Index.js structure

import React, { useContext } from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter, useLocation } from "react-router-dom";
import { useLayoutEffect } from "react";
const root = ReactDOM.createRoot(document.getElementById("root"));

// scroll to top when navigate
const Wrapper = ({ children }) => {
  const location = useLocation();
  useLayoutEffect(() => {
    document.documentElement.scrollTo(0, 0);
  }, [location.pathname]);
  return children
}
root.render(
    <React.StrictMode>
      <BrowserRouter>
           <Wrapper>
                <App />
           </Wrapper>
       </BrowserRouter>
</React.StrictMode>
);

Layout.js

import React, { useContext } from 'react'
import { Outlet } from 'react-router-dom'
import Header from '../components/header/Header'
import Footer from '../components/footer/Footer'
const Layout = () => {   
    return (
        <>
            <Header />
            <Outlet />
            <Footer />
        </>
    )
}
export default Layout

DEMO :

GITHUB LINK : https://github.com/fullstacksagarofficial/react-clone