DEV Community

Nirmalya Mondal
Nirmalya Mondal

Posted on • Edited on

Folder Structure For E-commerce

Create a Folder 

**- src - components - context - pages - redux - firebase**
Enter fullscreen mode Exit fullscreen mode

Step 1 : Create a Navbar Folder 

**- components - navbar - Navbar.jsx**
Enter fullscreen mode Exit fullscreen mode

Step 2 : Create a Footer Folder 

**- components - footer - Footer.jsx**
Enter fullscreen mode Exit fullscreen mode

Step 3 : Create a Layout Folder 

**- components - layout - Layout.jsx**
Enter fullscreen mode Exit fullscreen mode

Layout.jsx

**import React from 'react' import Footer from '../footer/Footer' import Navbar from '../navbar/TopNvbar' function Layout({ children }) { return ( <div> <Navbar /> <div className="content"> {children} </div> <Footer /> </div> ) } export default Layout**
Enter fullscreen mode Exit fullscreen mode

Step 4 : Create a Page 

**- pages - home - Home.jsx - allproducts - AllProducts.jsx - Order - Order.jsx - cart - Cart.jsx - admin - dashboard - Dashboard.jsx - nopage - NoPage.jsx**
Enter fullscreen mode Exit fullscreen mode

**Home.jsx**

**import React from 'react' function Home() { return ( <div>Home</div> ) } export default Home**
Enter fullscreen mode Exit fullscreen mode

Step 5 : Import Layout in Home.jsx 

**import React from 'react' import Layout from '../../components/layout/Layout' function Home() { return ( <Layout>Home</Layout> ) } export default Home**
Enter fullscreen mode Exit fullscreen mode

Step 6 : Create a route of all page

Install React router dom for routing 

**npm i react-router-dom**
Enter fullscreen mode Exit fullscreen mode

Define routes in App.jsx

Import BrowserRouter as Router, Route, Routes, from react-router-dom

**import { BrowserRouter as Router, Route, Routes, } from "react-router-dom";**
Enter fullscreen mode Exit fullscreen mode

Complete Code 

**import React from 'react' import { BrowserRouter as Router, Route, Routes, } from "react-router-dom"; import Home from './pages/home/Home'; import Order from './pages/order/Order'; import Cart from './pages/cart/Cart'; import Dashboard from './pages/admin/dashboard/Dashboard'; import NoPage from './pages/nopage/NoPage'; function App() { return ( <Router> <Routes> <Route path="/" element={<Home/>} /> <Route path="/order" element={<Order/>} /> <Route path="/cart" element={<Cart/>} /> <Route path="/dashboard" element={<Dashboard/>} /> <Route path="/*" element={<NoPage/>} /> </Routes> </Router> ) } export default App**
Enter fullscreen mode Exit fullscreen mode

Top comments (0)