add: day16 notes and examples

Author: Rahullkumr

Notes/day16.js

@@ -0,0 +1,3 @@
+// 17 - Dec - 2024
+
+// conditional rendering and its examples

ReactByPrasadSir/src/App.jsx

@@ -6,6 +6,7 @@ import JsxIntro from './components/01_jsxIntro/JsxIntro.jsx'
 import ClassBasedCompIntro from './components/02_typesOfComponents/02_classBasedComp/ClassBasedCompIntro.jsx'
 import HooksIntro from './components/03_hooks/HooksIntro.jsx'
 import PropsIntro from './components/04_props/PropsIntro.jsx'
+import ConditionalRenderingIntro from './components/05_conditionalRendering/ConditionalRenderingIntro.jsx'
 
 function App() {
 
@@ -27,7 +28,10 @@ function App() {
             {/* <HooksIntro/> */}
 
       {/* ============ hooks ============ */}
-            <PropsIntro/>
+            {/* <PropsIntro/> */}
+
+      {/* ============ Conditional Rendering ============ */}
+            <ConditionalRenderingIntro/>
     </>
   )
 }

ReactByPrasadSir/src/components/05_conditionalRendering/ConditionalRenderingIntro.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import ConditionalEx1 from './examples/ConditionalEx1'
+import TaskIntro from './Task/TaskIntro'
+
+const ConditionalRenderingIntro = () => {
+  return (
+    <div>
+      {/* <ConditionalEx1/> */}
+      <TaskIntro/>
+    </div>
+  )
+}
+
+export default ConditionalRenderingIntro

ReactByPrasadSir/src/components/05_conditionalRendering/Task/About.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const About = (props) => {
+  return (
+    <div>
+      about page
+    </div>
+  )
+}
+
+export default About

ReactByPrasadSir/src/components/05_conditionalRendering/Task/Contact.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Contact = (props) => {
+  return (
+    <div>
+      contact page
+    </div>
+  )
+}
+
+export default Contact

ReactByPrasadSir/src/components/05_conditionalRendering/Task/Homepage.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const Homepage = (props) => {
+  return (
+    <div>
+        <h1>homepage</h1>
+        <p>welcome {props.props}</p>
+    </div>
+  )
+}
+
+export default Homepage

ReactByPrasadSir/src/components/05_conditionalRendering/Task/TaskIntro.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import Homepage from './Homepage';
+import Contact from './Contact';
+import About from './About';
+import PageNotFound from '../examples/PageNotFound';
+
+const TaskIntro = () => {
+  let userName = prompt('Enter username');
+  let pageName = prompt('Enter page name u want to visit (homepage, contact or about)');
+  switch (pageName) {
+    case  'homepage':  
+      return <Homepage prop={userName}/>      
+      // break;
+    case 'contact': 
+      return <Contact prop={userName}/>
+      // break;
+    case 'about':
+      return <About prop={userName}/> 
+      // break; 
+    default:
+      return <PageNotFound/>
+      // break;
+  }
+}
+
+export default TaskIntro
+
+
+// break in new react version

ReactByPrasadSir/src/components/05_conditionalRendering/examples/ConditionalEx1.jsx

@@ -0,0 +1,36 @@
+import Home from './Home';
+import PageNotFound from './PageNotFound';
+
+const ConditionalEx1 = () => {
+// localStorage.setItem('username','xyz@123')
+   let uName = localStorage.getItem('username')
+   console.log(uName);
+   if (uName == 'xyz@12') {
+    return <Home/>
+   }else{
+    return <PageNotFound/>
+   }
+   
+}
+
+export default ConditionalEx1
+
+// 10-12 room 6/3/2
+// room 3
+
+// task
+// `
+// - uname+pagename take input using prompt
+// switch case(pagename == home){
+//     <Home prop={uname}/>
+// }
+//     default ===> page not found call kro
+
+
+
+// homepage
+// ________________
+// Home page
+// welcome 
+// username
+// `

ReactByPrasadSir/src/components/05_conditionalRendering/examples/Home.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Home = () => {
+  return (
+    <div>
+      Welcome to Homepage
+    </div>
+  )
+}
+
+export default Home

ReactByPrasadSir/src/components/05_conditionalRendering/examples/PageNotFound.jsx

@@ -0,0 +1,10 @@
+import React, { useState } from 'react'
+
+const PageNotFound = () => {
+    let [theme, setTheme] = useState('dark')
+    return <div>
+        <h1 style={theme == 'light'?{}:{backgroundColor:'black', color: 'white'}}>Page Not Found</h1>
+    </div>
+}
+
+export default PageNotFound