-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
128 lines (114 loc) · 3.17 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
// import React from "react";
// import ReactDOM from "react-dom/client";
// React Element
// without jsx
// const heading = React.createElement(
// "h1",
// { id: "heading" },
// "Namaste React 🚀",
// );
// console.log(heading);
//! JSX => React.createElement => ReactElement => JS object => HTML Element(render)
// //* With JSX
// const love = 3000;
// const jsxHeading = (
// <h1 className='heading'>
// {/* <h2>Love you {love}</h2> */}
// Namaste React 🚀 from JSX
// </h1>
// );
//* React Functional Component
// const Title = () => (
// <h1 className='title'>Namaste React🚀</h1>
// );
// const HeadingComponent = () => {
// return (
// <div className='container'>
// <Title />
// <h1 className='heading'>
// React Functional Component
// </h1>
// </div>
// );
// };
// const root = ReactDOM.createRoot(
// document.getElementById("root"),
// );
// root.render(<HeadingComponent/>);
import React, { Suspense, lazy, useEffect, useState } from "react";
import ReactDOM from "react-dom/client";
import "/src/styles/index.css"
import Header from "/src/Components/Header"
import Footer from "/src/Components/Footer"
import Body from "/src/Components/Body";
import About from "/src/Pages/About";
import Error from "/src/Pages/Error";
import RestaurantMenu from "/src/Pages/RestaurantMenu"
import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
import Contact from "./src/Pages/Contact";
import UserContext from "./src/Utils/UserContext";
import { Provider } from "react-redux";
import appStore from "./src/ReduxStore/appStore";
import Cart from "./src/Components/Cart";
// not using key(not acceptable in react it will give you an error) <<< index as key <<< using unique id
// Lazy Loading
const Grocery = lazy(() => import("./src/Components/Grocery"))
const App = () => {
const [userNames, setUserName] = useState();
// authentication logic
useEffect(() => {
// Make an api call and send name and password
const data = {
name: "Arin"
}
setUserName(data.name)
}, [])
return (
<Provider store={appStore}>
<UserContext.Provider value={{ loggedInUser: userNames, setUserName }}>
<div className='App'>
{/* <UserContext.Provider value={{ loggedInUser: "Elon Musk" }}> */}
{/* </UserContext.Provider> */}
<Header />
<Outlet />
<Footer />
</div>
</UserContext.Provider>
</Provider>
);
};
const appRouter = createBrowserRouter([
{
path: "/",
element: <App />,
children: [
{
path: "/",
element: <Body />
},
{
path: "/grocery",
element: <Suspense fallback={<h1>Loading...</h1>}><Grocery /></Suspense>
},
{
path: "/about",
element: <About />
},
{
path: "/contact",
element: <Contact />
},
{
path: "/restaurants/:resId",
element: <RestaurantMenu />
},
{
path: "/cart",
element:<Cart/>
}
],
errorElement: <Error />
},
])
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<RouterProvider router={appRouter} />);