week 7.1 routeing, lazy component, prop drilling, contextAPI

-
//create a react project
1. npm install
2. npm install react-router-dom  //for using react routing
//create page OR component folder inside create 2page landing.jsx and dashboard.jsx

-----------------------------------------------------------

//then we use navigation to use client side route

/ first import usenavigation

import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom';


// definre up from the syntx you write

const navigate = useNavigate();


then syntax**  

<button onClick={() => {

          navigate("/");

        }}>Landing</button>

--------------------------------------------------------------


+++++++++++++++++++++++++++++
now we will do only client side routing do not hard refresh like before we did

//then we use navigation to use client side route
/ first import usenavigation
import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom';

// definre up from the syntx you write
const navigate = useNavigate();
// app.js
//then syntax**  
<button onClick={() => {
          navigate("/");
        }}>Landing</button>


&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
lazy landing
Now that your component’s code loads on demand, you also need to specify what should be displayed while it is loading. You can do this by wrapping the lazy component or any of its parents into a <Suspense> boundary:

+++++++++++++++++++++++++++++

app.jsx

//syntax***
import { lazy } from "react";
const Dashboard = lazy(() => import ( './pages/Dashboard'));
const Landing = lazy(() => import ( './pages/Landing'));

<Route path="/dashboard" element={<Suspense fallback={"loading..."}><Dashboard /></Suspense>} />
<Route path="/" element={<Suspense fallback={"loading..."}><Landing /></Suspense>} />

//Suspense API, asynchronous component fetching,  asynchronous data fetching-

====================================================================

//prop drilling
// thumb rule* always store date in least common ansister
//Passing props is a great way to explicitly pipe data through your UI tree to the components that use it.
But passing props can become verbose and inconvenient when you need to pass some prop deeply through 
the tree, or if many components need the same prop. The nearest common ancestor could be far removed from
the component's that need data,  and lifting state up that high can lead to a situation called "prop drilling".

================================================================

//context API
If you use the context api, you're pushing your state management outsid the code react components
OR context api is use fro fix prop drilling mesh in prop imagine a root tree that have a1 and a2, a1 have child b1
that mean when you working with a2 and b1 you need to make pipe line to rech on your root tree you cant telepoat directly to root tree to b1 or a2 .
first you use App() then you use a1 where you also need to just pass  the parameter  the b1 will be able to access if 
you want without passing root tree to b1 you have only error


import { createContext } from "react";
export const countContext = createContext(0);

Comments

Post a Comment

Popular posts from this blog

CyberSecurity

-
 # 🔒 CYBERSECURITY A TO Z - COMPLETE GUIDE (0 to 100) # Everything You Need to Know About Cybersecurity - From Noob to Pro ================================================================================ TABLE OF CONTENTS ================================================================================ 1. CYBERSECURITY FUNDAMENTALS 2. COMMON THREATS & ATTACKS 3. AUTHENTICATION & AUTHORIZATION 4. ENCRYPTION & CRYPTOGRAPHY 5. NETWORK SECURITY 6. WEB APPLICATION SECURITY 7. DATABASE SECURITY 8. API SECURITY 9. CLOUD SECURITY 10. INCIDENT RESPONSE 11. COMPLIANCE & STANDARDS 12. SECURITY TESTING 13. SECURE CODING PRACTICES 14. DEPLOYMENT SECURITY 15. MONITORING & DETECTION 16. REAL-WORLD IMPLEMENTATIONS ================================================================================ 1. CYBERSECURITY FUNDAMENTALS ================================================================================ WHAT IS CYBERSECURITY? Protection of computer systems, networks, and data fr...
Read more

VERTICAL SCALING 💋

-
 # 🚀 VERTICAL SCALING - COMPLETE GUIDE (0 to 100) # Everything You Need to Know About Vertical Scaling in JavaScript/TypeScript ================================================================================ TABLE OF CONTENTS ================================================================================ 1. WHAT IS VERTICAL SCALING? 2. VERTICAL VS HORIZONTAL SCALING 3. NODEJS CLUSTERING 4. LOAD BALANCING 5. MEMORY OPTIMIZATION 6. CPU OPTIMIZATION 7. DATABASE OPTIMIZATION 8. CACHING STRATEGIES 9. CONNECTION POOLING 10. RATE LIMITING 11. COMPRESSION & GZIP 12. WORKER THREADS 13. MONITORING & PROFILING 14. PRODUCTION DEPLOYMENT 15. COMPLETE EXAMPLES 16. TROUBLESHOOTING ================================================================================ 1. WHAT IS VERTICAL SCALING? ================================================================================ VERTICAL SCALING (Scale Up): Increasing the power of a single server. More CPU cores, more RAM, faster storage, better ...
Read more

prisma using in project idx 13.3

-
Okay, let's troubleshoot why you might be unable to use the Prisma schema in your Project IDX workspace. Here's a breakdown of common reasons and how to fix them: 1. Prisma is not installed Problem:  Prisma might not be installed in your IDX environment. Solution:  You'll need to add it to your  .idx/dev.nix  file, like this: nix { pkgs, ... }: { # ... other configurations packages = [ # ... other packages pkgs.nodePackages.prisma ]; # ... rest of your configuration } lua (auto) Once you add this line and  rebuild the environment  by clicking the popup message, IDX will install  prisma  and make it available in your workspace. 2. The Prisma CLI is not accessible Problem:  After installation, you might need to explicitly call the Prisma CLI using its full path or use  npx . Solution:  When running Prisma commands in your terminal (in IDX), use  npx prisma  (e.g.,  npx prisma migrate dev ) or ...
Read more