Skip to content

Commit 8475d55

Browse files
nareshnistnareshnist
committed
props & events changes
1 parent a3d952f commit 8475d55

File tree

14 files changed

+365
-4
lines changed

14 files changed

+365
-4
lines changed

‎index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Vite + React</title>
8+
<!--
89
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
9-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
10+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> -->
1011
</head>
1112
<body>
1213
<div id="root"></div>

‎package-lock.json

+29
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"bootstrap": "^5.3.3",
1314
"react": "^18.3.1",
1415
"react-dom": "^18.3.1",
1516
"react-router-dom": "^6.26.0"

‎src/App.css

+6
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
2+
3+
/* // src/index.js or src/App.js */
4+
@import 'bootstrap/dist/css/bootstrap.min.css';
5+
6+
17
h1 {
28
background-color: red;
39
color: yellow;

‎src/bootstap/bootyrap.jsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
2+
3+
4+
export function Bootstrap() {
5+
return (
6+
<>
7+
<nav className="navbar bg-body-tertiary">
8+
<div className="container-fluid">
9+
<a className="navbar-brand" href="#">Navbar</a>
10+
</div>
11+
</nav>
12+
13+
<nav className="navbar navbar-expand-lg bg-body-tertiary">
14+
<div className="container-fluid">
15+
<a className="navbar-brand" href="#">Navbar</a>
16+
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
17+
<span className="navbar-toggler-icon"></span>
18+
</button>
19+
<div className="collapse navbar-collapse" id="navbarNavAltMarkup">
20+
<div className="navbar-nav">
21+
<a className="nav-link active" aria-current="page" href="#">Home</a>
22+
<a className="nav-link" href="#">Features</a>
23+
<a className="nav-link" href="#">Pricing</a>
24+
<a className="nav-link disabled" aria-disabled="true">Disabled</a>
25+
</div>
26+
</div>
27+
</div>
28+
</nav>
29+
</>
30+
)
31+
}
32+
33+
34+
35+
36+
// TWO WAY WE CAN DO
37+
// 1 WITH CDN
38+
// 2 NPM

‎src/hooks/hooks.txt

+4
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@
1515
example const element = useRef(null);
1616
single ref = {element}
1717
multiple ref = {(ele) => element.current[0] = ele}
18+
# useContext hook help use to use the props drill down concept.
19+
refer folder props-drill-down
20+
# memo ---> remembering the task result.
21+
memorization concept in java script.
1822

1923

2024

‎src/hooks/use-memo.jsx

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { useEffect, useMemo, useState } from "react";
2+
3+
export function UseMemo() {
4+
5+
const [timer, setTimer] = useState(new Date().toLocaleTimeString());
6+
const [seaechText, setSseaechText] = useState("");
7+
8+
const [products, setProdcts] = useState(
9+
[
10+
{
11+
id: 1,
12+
name: "apple",
13+
price: 123
14+
},
15+
{
16+
id: 2,
17+
name: "red me",
18+
price: 1234
19+
},
20+
{
21+
id: 3,
22+
name: "real me",
23+
price: 123456
24+
},
25+
]
26+
);
27+
const filterdProducts = (seachText) => {
28+
console.log(seachText);
29+
return [...products].filter((p) => p.name.toLowerCase().includes(seachText));
30+
}
31+
32+
useEffect(() => {
33+
setInterval(() => {
34+
// console.log("re render")
35+
setTimer(new Date().toLocaleTimeString());
36+
}, 1000);
37+
})
38+
39+
let productsAfterSearch = useMemo(() => {
40+
return filterdProducts(seaechText);
41+
}, [seaechText, products])
42+
43+
44+
45+
return (
46+
<>
47+
<h2>Tomer : {timer}</h2>
48+
<input type="text" value={seaechText} onChange={
49+
(e) => {
50+
setSseaechText(() => e.target.value);
51+
}
52+
} />
53+
<table>
54+
<thead>
55+
<tr>
56+
<th>S.NO</th>
57+
<th>Name</th>
58+
<th>Price</th>
59+
</tr>
60+
</thead>
61+
<tbody>
62+
{
63+
productsAfterSearch.map((res, idx) => {
64+
return (
65+
<tr key={res.id} id={res.name}>
66+
<td >{res.id}</td>
67+
<td >{res.name}</td>
68+
<td >{res.price}</td>
69+
</tr>
70+
)
71+
})
72+
}
73+
</tbody>
74+
75+
</table>
76+
</>
77+
)
78+
}

‎src/life-cycle-hook/text.txt

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
2+
3+
# component life cycle hook has three stages
4+
5+
Mounting --- >
6+
Updating
7+
unMounting
8+
9+
10+
// life cycle hooks related to class component
11+
// hooks for functional component

‎src/main.jsx

+33-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import ReactDom from 'react-dom/client';
22

3+
4+
import 'bootstrap/dist/js/bootstrap.bundle.min';
5+
import 'bootstrap/dist/css/bootstrap.min.css';
6+
37
// event handling
48
// import { BaseComponnet } from './eventHadlers/parent-component';
59

@@ -30,8 +34,10 @@ import {ConditinalRendering} from './conditinal/conditional-rendering';
3034
//Hooks
3135
import { UseEffectHook } from './hooks/use-effect';
3236
import {UseRefHook} from './hooks/use-ref';
33-
import {CustomeHook} from './hooks/custom-hook';
34-
import {TestCustomeHook} from './hooks/custom-hook-exaple'
37+
// import {CustomeHook} from './hooks/custom-hook';
38+
// import {TestCustomeHook} from './hooks/custom-hook-exaple';
39+
40+
import {UseMemo} from './hooks/use-memo';
3541

3642
//LocalFiles
3743
import {LocalFiles} from './local-files/local-file';
@@ -42,6 +48,18 @@ import {RouterMain} from './react-router/router-main';
4248
// list
4349
import {List} from './list/list';
4450

51+
52+
// Props-drill down
53+
54+
import { ProspDrill } from './props-drill-down/props-dril';
55+
56+
// Props & events
57+
import { Parent } from './propsEvents/props';
58+
59+
60+
// how to add bootstrap
61+
import {Bootstrap} from './bootstap/bootyrap';
62+
4563
const root = ReactDom.createRoot(document.getElementById("root"))
4664

4765
root.render(
@@ -63,10 +81,22 @@ root.render(
6381
// <UseEffectHook></UseEffectHook>
6482
// <UseRefHook></UseRefHook>
6583
// <CustomeHook></CustomeHook>
66-
<TestCustomeHook></TestCustomeHook>
84+
// <TestCustomeHook></TestCustomeHook>
85+
// <UseMemo></UseMemo>
6786

6887
// router
6988
// <RouterMain></RouterMain>
7089

90+
91+
// Propds drill with USEcONTEXT
92+
// <ProspDrill></ProspDrill>
93+
94+
// Props & event
95+
// <Parent></Parent>
96+
97+
//Bootstrap
98+
<Bootstrap></Bootstrap>
99+
100+
71101
);
72102

‎src/props-drill-down/home.jsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { createContext } from "react";
2+
import { ProductList } from "./product-list";
3+
4+
5+
6+
export function Home({name,age}){
7+
return (
8+
<>
9+
<h1>Home Component</h1>
10+
<ProductList name={name} age={age}></ProductList>
11+
</>
12+
)
13+
}

‎src/props-drill-down/product-list.jsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Prodcut } from "./product"
2+
export function ProductList({name,age}){
3+
return (
4+
<>
5+
<h1>ProductList Component</h1>
6+
<Prodcut name={name} age={age}></Prodcut>
7+
</>
8+
)
9+
}

‎src/props-drill-down/product.jsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
3+
import { useContext } from "react"
4+
import { context } from "./props-dril"
5+
6+
export function Prodcut(props){
7+
8+
// to use the context by using the usecontexthook
9+
10+
const perosnData = useContext(context);
11+
console.log("===== use context area start====== ");
12+
console.log(perosnData);
13+
console.log("===== use context area end====== ");
14+
15+
console.log(props)
16+
17+
return (
18+
<>
19+
20+
<h1>Product Component</h1>
21+
<h1>{JSON.stringify()}</h1>
22+
</>
23+
24+
)
25+
}

‎src/props-drill-down/props-dril.jsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import {Home} from './home';
2+
import { createContext } from 'react';
3+
4+
5+
export const context = createContext();
6+
7+
export function ProspDrill(){
8+
9+
const perosn = {
10+
name:"Naresh",
11+
age:26
12+
}
13+
console.log(context);
14+
return (
15+
16+
<>
17+
<h1>ProspDrill main Component</h1>
18+
<context.Provider value={perosn}>
19+
{/* <Home {...perosn}></Home> */}
20+
21+
<Home></Home>
22+
</context.Provider>
23+
</>
24+
)
25+
}

0 commit comments

Comments
 (0)