Skip to content

Commit a9cec6a

Browse files
iamhk12iamhk12
committed
learn-ReactJS
1 parent d9383b1 commit a9cec6a

File tree

10 files changed

+400
-40
lines changed

10 files changed

+400
-40
lines changed

‎react-router/src/About.jsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import React from "react"
2-
3-
const About = () => {
2+
// import Navbar from "./Navbar";
3+
const About = (props) => {
44
return <>
5-
<h1>Hello this is about</h1>
5+
{/* <Navbar /> */}
6+
<div className="about">
7+
<h1>Hello this is about, My name is {props.name}</h1>
8+
</div>
69
</>
710
}
811

‎react-router/src/App.jsx

Lines changed: 230 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -17,34 +17,239 @@
1717

1818
// export default App
1919

20+
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
21+
22+
2023
//react v6
2124

22-
import React from 'react'
23-
import { Route, Routes } from 'react-router-dom';
24-
import About from "./About"
25-
import Contact from "./Contact"
26-
import Error from "./Error"
27-
import Navbar from "./Navbar"
25+
// import React from "react";
26+
// import { Route, Routes } from "react-router-dom";
27+
// import About from "./About";
28+
// import Services from "./Services";
29+
// import Contact from "./Contact";
30+
// import Error from "./Error";
31+
// import Navbar from "./Navbar";
32+
// const App = () => {
33+
// const Name = () => {
34+
// return <h1>Himanshu Kothari Here.</h1>;
35+
// };
36+
37+
// return (
38+
// <>
39+
// <div className="container">
40+
// <Navbar />
41+
// <Routes>
42+
// <Route exact path="/" element={<About />} />
43+
// <Route exact path="/contact" element={<Contact />} />
44+
// <Route exact path="/services" element={<Services />} />
45+
// <Route exact path="/contact/name" element={<Name />} />
46+
// <Route path="*" element={<Error />} />
47+
// </Routes>
48+
// </div>
49+
// {/* <About/>
50+
// <Contact/> */}
51+
// </>
52+
// );
53+
// };
54+
55+
// export default App;
56+
57+
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
58+
59+
//passing props in react router elements
60+
61+
// import React from "react";
62+
// import { Route, Routes } from "react-router-dom";
63+
// import About from "./About";
64+
// import Services from "./Services";
65+
// import Contact from "./Contact";
66+
// import Error from "./Error";
67+
// import Navbar from "./Navbar";
68+
// const App = () => {
69+
// const Name = () => {
70+
// return <h1>Himanshu Kothari Here.</h1>;
71+
// };
72+
73+
// return (
74+
// <>
75+
// <div className="container">
76+
// <Navbar />
77+
// <Routes>
78+
// <Route exact path="/" element={<About name="HK" />}/>
79+
// <Route exact path="/contact" element={<Contact name="Himanshu" />} />
80+
// <Route exact path="/services" element={<Services />} />
81+
// <Route exact path="/contact/name" element={<Name />} />
82+
// <Route path="*" element={<Error />} />
83+
// </Routes>
84+
// </div>
85+
// {/* <About/>
86+
// <Contact/> */}
87+
// </>
88+
// );
89+
// };
90+
91+
// export default App;
92+
93+
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
94+
95+
96+
//useParams
97+
98+
// import React from "react";
99+
// import { Route, Routes } from "react-router-dom";
100+
// import About from "./About";
101+
// import Services from "./Services";
102+
// import Contact from "./Contact";
103+
// import Error from "./Error";
104+
// import User from "./User"
105+
// import Navbar from "./Navbar";
106+
// const App = () => {
107+
// const Name = () => {
108+
// return <h1>Himanshu Kothari Here.</h1>;
109+
// };
110+
111+
// return (
112+
// <>
113+
// <div className="container">
114+
// <Navbar />
115+
// <Routes>
116+
// <Route exact path="/" element={<About name="HK" />}/>
117+
// <Route exact path="/contact" element={<Contact name="Himanshu" />} />
118+
// <Route exact path="/services" element={<Services />} />
119+
// <Route exact path="/contact/name" element={<Name />} />
120+
// <Route exact path="/user" element={<User />} />
121+
// <Route path="/user/:fname" element={<User />} />
122+
// <Route path="*" element={<Error />} />
123+
// </Routes>
124+
// </div>
125+
// {/* <About/>
126+
// <Contact/> */}
127+
// </>
128+
// );
129+
// };
130+
131+
// export default App;
132+
133+
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
134+
135+
//useLocation
136+
137+
138+
// import React from "react";
139+
// import { Route, Routes } from "react-router-dom";
140+
// import About from "./About";
141+
// import Services from "./Services";
142+
// import Contact from "./Contact";
143+
// import Error from "./Error";
144+
// import User from "./User"
145+
// import Navbar from "./Navbar";
146+
// const App = () => {
147+
// const Name = () => {
148+
// return <h1>Himanshu Kothari Here.</h1>;
149+
// };
150+
151+
// return (
152+
// <>
153+
// <div className="container">
154+
// <Navbar />
155+
// <Routes>
156+
// <Route exact path="/" element={<About name="HK" />}/>
157+
// <Route exact path="/contact" element={<Contact name="Himanshu" />} />
158+
// <Route exact path="/services" element={<Services />} />
159+
// <Route exact path="/contact/name" element={<Name />} />
160+
// <Route exact path="/user" element={<User />} />
161+
// <Route path="/user/:fname" element={<User />} />
162+
// <Route path="*" element={<Error />} />
163+
// </Routes>
164+
// </div>
165+
// {/* <About/>
166+
// <Contact/> */}
167+
// </>
168+
// );
169+
// };
170+
171+
// export default App;
172+
173+
//////////////////////////////////////////////////////////////////////////////////////////////////////////
174+
175+
//useHistory
176+
177+
// const navigate = useNavigate ();
178+
// For going back=> navigate(-1);
179+
// For push => navigate('/about');
180+
181+
// import React from "react";
182+
// import { Route, Routes } from "react-router-dom";
183+
// import About from "./About";
184+
// import Services from "./Services";
185+
// import Contact from "./Contact";
186+
// import Error from "./Error";
187+
// import User from "./User"
188+
// import Navbar from "./Navbar";
189+
// const App = () => {
190+
// const Name = () => {
191+
// return <h1>Himanshu Kothari Here.</h1>;
192+
// };
193+
194+
// return (
195+
// <>
196+
// <div className="container">
197+
// <Navbar />
198+
// <Routes>
199+
// <Route exact path="/" element={<About name="HK" />}/>
200+
// <Route exact path="/contact" element={<Contact name="Himanshu" />} />
201+
// <Route exact path="/services" element={<Services />} />
202+
// <Route exact path="/contact/name" element={<Name />} />
203+
// <Route exact path="/user" element={<User />} />
204+
// <Route path="/user/:fname" element={<User />} />
205+
// <Route path="*" element={<Error />} />
206+
// </Routes>
207+
// </div>
208+
// {/* <About/>
209+
// <Contact/> */}
210+
// </>
211+
// );
212+
// };
213+
214+
// export default App;
215+
216+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
217+
218+
//search filter in react
219+
220+
import React from "react";
221+
import { Route, Routes } from "react-router-dom";
222+
import About from "./About";
223+
import Services from "./Services";
224+
import Contact from "./Contact";
225+
import Error from "./Error";
226+
import User from "./User"
227+
import Search from "./Search";
228+
import Navbar from "./Navbar";
28229
const App = () => {
230+
const Name = () => {
231+
return <h1>Himanshu Kothari Here.</h1>;
232+
};
29233

30-
const Name = () => {
31-
return <h1>Himanshu Kothari Here.</h1>
32-
}
33-
34-
return (
35-
<>
36-
<Navbar />
37-
<Routes>
38-
<Route exact path='/' element={<About />} />
39-
<Route exact path='/contact' element={<Contact />} />
40-
<Route path='/contact/name' element={<Name />} />
41-
<Route path="*" element={<Error />} />
42-
</Routes>
43-
44-
{/* <About/>
234+
return (
235+
<>
236+
<div className="container">
237+
<Navbar />
238+
<Routes>
239+
<Route exact path="/" element={<About name="HK" />}/>
240+
<Route exact path="/contact" element={<Contact name="Himanshu" />} />
241+
<Route exact path="/services" element={<Services />} />
242+
<Route exact path="/contact/name" element={<Name />} />
243+
<Route exact path="/user" element={<User />} />
244+
<Route exact path="/search" element={<Search />} />
245+
<Route path="/user/:fname" element={<User />} />
246+
<Route path="*" element={<Error />} />
247+
</Routes>
248+
</div>
249+
{/* <About/>
45250
<Contact/> */}
46-
</>
47-
)
48-
}
251+
</>
252+
);
253+
};
49254

50-
export default App
255+
export default App;

‎react-router/src/Contact.jsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import React from "react"
2-
3-
const Contact = () => {
2+
// import Navbar from "./Navbar";
3+
const Contact = (props) => {
44
return <>
5-
<h1>Hello this is Himanshu Kothari +91 8779035327</h1>
5+
{/* <Navbar /> */}
6+
<div className="contact">
7+
<h1>Hello this is {props.name} +91 8779035327</h1>
8+
</div>
69
</>
710
}
811

‎react-router/src/Error.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from "react"
2-
3-
const Error = ()=>{
2+
// import Navbar from "./Navbar";
3+
const Error = () => {
44
return <>
5+
{/* <Navbar /> */}
56
<h1>Error 404, Page not found</h1>
67
</>
78
}

‎react-router/src/Navbar.jsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,13 @@ import React from "react";
22
import { NavLink } from "react-router-dom"
33
const Navbar = () => {
44
return <>
5-
6-
<NavLink to="/" activeClassName="active_nav">About</NavLink>
7-
<NavLink to="/contact" activeClassName="active_nav">Contact</NavLink>
5+
<nav>
6+
<NavLink to="/" activeClassName="active_nav">About</NavLink>
7+
<NavLink to="/contact" activeClassName="active_nav">Contact</NavLink>
8+
<NavLink to="/services" activeClassName="active_nav">Services</NavLink>
9+
<NavLink to="/user/Himanshu" activeClassName="active_nav">User</NavLink>
10+
<NavLink to="/search" activeClassName="active_nav">Search</NavLink>
11+
</nav>
812
</>
913
}
1014

‎react-router/src/Search.jsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React, { useState } from "react";
2+
import Sresult from "./Sresult"
3+
const Search = () => {
4+
5+
const [img, setImg] = useState("")
6+
7+
const inputImgText = (e) => {
8+
console.log(e.target.value)
9+
setImg(e.target.value)
10+
}
11+
return <>
12+
<div className="search">
13+
<input type="text" onChange={inputImgText} value={img} placeholder="Search Images" />
14+
</div>
15+
{img==="" ? (<></>):(<Sresult searchItem ={img} />)}
16+
</>
17+
}
18+
19+
export default Search

‎react-router/src/Services.jsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from "react"
2+
// import Navbar from "./Navbar";
3+
const Services = () => {
4+
return <>
5+
{/* <Navbar /> */}
6+
<div className="services">
7+
<h1>Hello this is Services</h1>
8+
</div>
9+
</>
10+
}
11+
12+
export default Services

‎react-router/src/Sresult.jsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from "react";
2+
3+
const Sresult = (props) =>{
4+
let image = props.searchItem
5+
const imgsrc = `https://source.unsplash.com/400x500/?${image}`
6+
7+
8+
return <>
9+
<div className="sResult">
10+
<img src={imgsrc} alt="" />
11+
</div>
12+
</>
13+
}
14+
15+
export default Sresult

0 commit comments

Comments
 (0)