Quick Links to this repository:
- Learn Zustand: Click here
- Learn SolidJS: Click here
- React testing: Click here
- React file structure: Click here
- Use other machine for react server development: Click here
Quick Links:
- ✌🏻 React Challenges: Click here
- React Projects for reference:
- ❤️ Reactjs Example - Tons of react full apps examples: reactjsexample.com
- ❤️ Made with ReactJs: madewithreactjs.com
- KCD's Calls: Click here
- Learn hooks in react ~ Ben Avadh: Click here
- Check metatags of a website: Click here
Quick Links My Resources:
- cssDesignTrail: Click here
- Learn Bootstrap: Click here
- Learn Styled Components: Click here
- Learn react-router-dom: Click here
React Projects Deployed:
- Device Width (screen width): Click here
TODO:
- Make a codesandbox example for making use of nested route system (refer slasher project for it)
- https://vercel.com/blog/whats-new-in-react-19
- https://react.dev/blog/2024/04/25/react-19
- https://www.reddit.com/r/react/comments/1eowuua/when_is_the_official_release_date_for_react_19/
- https://www.reddit.com/r/react/comments/1eowuua/when_is_the_official_release_date_for_react_19
For reference to fullstack solutions: Please refer @ https://github.com/sahilrajput03/fullstackopen
Merged repos:
absolute-path-cra, react-app astemplate-js-vitedirectory,simple_service_worker,react-markdown-serve-markedjs,react-viteasmy-react-vite-appdirectory,react-sass-love,react-fast-refresh-boilerplate,react-nakedasreact-via-cdn,snowpack-react-boilerplate/,deno-aleph-react-framework,GistsFetchingFromGithubRandom_react-router-dom,hackerrank-sorting-react-test, React-query: Gist
- Food ordering App - Click here and Other Articles and projects
- Hide project soure code in browser - Click here
- From sahilrajput03/decode-buildonscenes.com(60lpa dev): **
- swiper: swiper, Docs - 35k* (also used in slasher project)
- emojipicker (emoji-picker-react): https://github.com/ealush/emoji-picker-react
- shifty (animation library): https://github.com/jeremyckahn/shifty
- jsfiledownloader: https://github.com/AleeeKoi/js-file-downloader LEARN: (helpful to download files in browser with progress indication as well)
- redux-saga:(22.2k*) https://github.com/redux-saga/redux-saga, getting-started: https://redux-saga.js.org/docs/introduction/GettingStarted
- redux-persist(12.2k*): https://github.com/rt2zz/redux-persist
- react-paginate(2.3k*): https://github.com/AdeleD/react-paginate
- react-toastify(9.3k*): https://github.com/fkhadra/react-toastify, playground: https://fkhadra.github.io/react-toastify/introduction/
- react-initial(5*): https://github.com/brunocarvalhodearaujo/react-initial, playground: https://brunocarvalhodearaujo.github.io/react-initial/
- redux-thunk(17.2k*): https://github.com/reduxjs/redux-thunk
- @headlessui/react(15.6k*) : https://github.com/tailwindlabs/headlessui,
- About
- @headlessui/react (https://headlessui.com) : Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
- over-the-head:
- flatted: https://github.com/WebReflection/flatted
- react-google-recaptcha, recpatcha-google-v2 (used in slasher)
- react-feather - Simply beautiful open-source icons: npm, github, Website: feathericons.com, Vanilla Github Repo: Click here
- Tooltip - https://github.com/atomiks/tippyjs-react
- https://github.com/atomiks/tippyjs (for vanilla e.g., for svelte usage)
Read this amazing article by Josh W Comeau: Click here
Source: Click here
// src: https://github.com/WebReflection/flatted
const {parse, stringify, toJSON, fromJSON} = require('flatted');
let log = console.log
const a = [{}];
log('1', a) // 1 [ {} ]
a[0].a = a;
log('2', a) // 2 <ref *1> [ { a: [Circular *1] } ]
a.push(a);
log('3', a) // 3 <ref *1> [ { a: [Circular *1] }, [Circular *1] ]
// log('natural stringify:', JSON.stringify(a)), throws error i.e., TypeError: Converting circular structure to JSON
log('4', stringify(a)); // [["1","0"],{"a":"0"}]
//~sahil: 4 [["1","0"],{"a":"0"}]Official Library Link: Click here
import { MuiTelInput } from 'mui-tel-input'
import styled from 'styled-components'
const TelContainer = styled.div`
fieldset{
border: 0px solid red;
}
`
const MyComponent = () => {
const isIndia = Intl.DateTimeFormat().resolvedOptions().timeZone === 'Asia/Calcutta'
const [value, setValue] = React.useState(isIndia ? '+91' : '')
console.log('value?', value);
const handleChange = (newValue) => {
setValue(newValue)
}
return (
<div>
<TelContainer>
<MuiTelInput
value={value}
onChange={handleChange}
defaultCountry='IN'
style={{
width: 0
}}
/>
</TelContainer>
</div>
)
}const Approach2 = () => {
const boxRef1 = useRef<HTMLDivElement>(null)
const [isInSide, setIsHover] = useState(false)
const mousePosition = useMousePosition()
const isInside = (mousePos) => {
if (!boxRef1.current) return;
const eleBounds = boxRef1.current.getBoundingClientRect();
const isInsideCard = mousePos.x >= eleBounds.left &&
mousePos.x <= eleBounds.right &&
mousePos.y >= eleBounds.top &&
mousePos.y <= eleBounds.bottom
if (isInsideCard) {
setIsHover(true)
} else {
setIsHover(false)
}
}
useEffect(() => {
isInside(mousePosition)
}, [mousePosition])
return <div>
<h1 className=''>Approach 2</h1>
<div
id="boxRef1"
ref={boxRef1}
className='w-[300px] h-[300px] background-grey p-3'
style={{ border: '2px solid grey', }}
>
<div className='h-full' style={{
border: '2px solid red'
}}>
{isInSide ? 'inside' : 'not inside'}
<br />
{mousePosition.x}, {mousePosition.y}
</div>
</div>
</div>
}Source: Click here
source: https://www.w3schools.com/html/html_form_input_types.asp
Here are the different input types you can use in HTML:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">- AWESOME - ChatGPT - Radio Buttons vs. Checkboxes: Click here
- Checkbox: w3schools.com
- Radio: w3schools.com
Radio Example:
TypeScript
const RadioGroupExample = () => {
// rg = radio group
const [rg, setRg] = useState({
// LEARN: Name helps us to group multiple radio button groups to work independently
name: 'fav_language',
radioList: [
{
id: 'html',
checked: false,
label: 'HTML'
},
{
id: 'css',
checked: false,
label: 'CSS'
},
{
id: 'javascript',
checked: false,
label: 'JAVASCRIPT'
},
]
})
console.log('rg?', rg);
const handleRadio = (e) => {
const { id, checked } = e.target
// console.log('id?', id) // "html", "css", "javascript"
// console.log('checked?', checked) // typeof boolean
const radio = rg.radioList.find((radio: any) => radio.id === id)
if (!radio) { return console.log('no radio button found') }
setRg(prev => ({
...prev,
radioList: prev.radioList.map(radio => {
return radio.id === id
? ({ ...radio, checked })
: ({ ...radio, checked: false })
// Note: In above line, we do need to explicitly marking other radio as checked=false
})
}))
}
return <div>
{rg.radioList.map(radio => {
return <div key={radio.id}>
<input type="radio" name={rg.name} id={radio.id} checked={radio.checked} onChange={handleRadio} />
<label htmlFor={radio.id}>{radio.label}</label>
<br />
</div>
})}
</div>
}Checkbox Example:
const CheckboxExample = () => { const [checkboxes, setCheckboxes] = useState([
{
id: 'cb1',
checked: false,
label: 'HTML'
},
{
id: 'cb2',
checked: false,
label: 'CSS'
},
])
console.log('checkboxes?', checkboxes);
const handleCheckbox = (e) => {
const { id, checked } = e.target
// console.log('id?', id) // "html", "css", "javascript"
// console.log('checked?', checked) // typeof boolean
const checkbox = checkboxes.find((checkbox: any) => checkbox.id === id)
if (!checkbox) { return console.log('no checkbox found') }
setCheckboxes(prev => prev.map(checkbox => {
return checkbox.id === id
? ({ ...checkbox, checked })
: ({ ...checkbox })
}))
}
return <div>
{checkboxes.map(checkbox => {
return <div key={checkbox.id}>
<input type="checkbox" id={checkbox.id} checked={checkbox.checked} onChange={handleCheckbox} />
<label htmlFor={checkbox.id}>{checkbox.label}</label>
<br />
</div>
})}
</div>
}Note to Sahil: View the notes of react query in the gist file here.
Stackoverflow: Click here
TLDR: We can control rendering irrespective of state change only if we use class-comoponent's shouldComponentUpdate method:
// snippet from above stackoverflow answer
shouldComponentUpdate(nextProps, nextState) {
if (nextState.value !== 3) {
return false;
}
return true;
}Source: Click here
Yes, they are!
Making the debugger to run with delay when we need to press F8 but fails to capture the UI for e.g., with dropdown
Use this snippet in browser console:
// So after running below code, you may open any drop-down like ui and stay there for a 3 seconds and the debugger will froze the UI
// and it will be helpful to inspect the html elements much easier now
setTimeout(() => {debugger}, 3000)Note: There are some scenarios when we can't re-use parent component state but have to update parent component's state is the only option. So in those cases we can do like this:
const ParentComp = () => {
const [mainCount, setMainCount] = useState(0);
return <ChildComp setMainCount={setMainCount} />
}
const ChildComp = ({ initialCount, setMainCount }) => {
const [count, setCount] = useState(initialCount ?? 0);
// This hook ensures making the `count` state in sync with parent's `mainCount` at all
// times (i.e., whenever child component's state is updated via the button)
useEffect(() => { setMainCount(count); }, [count])
return
<div>
<button onClick={() => setCount(count => count + 1)}>{count}</button>
</div>
}TLDR: To prevent consumption of the event by other events like focus, etc. Thanks Eric.
Note to Sahil: View the notes of react query in the gist file here.
Clickh here- Youtube video - Simple with library react-lazy-load-image-component - npm package
- pushState: Click here (MDN)
- When popstate is sent: Click here (MDN)
Source: Stackoverflow Answer, also from github - Github 404 Docs
Demo: https://spa-github-pages.rafgraph.dev/, Github: https://github.com/rafgraph/spa-github-pages
tldr; 404.htm file: Click here.
And script to be added in index.html file
Source: here
<head>
...
...
<script type="text/javascript">
// Single Page Apps for GitHub Pages
// MIT License
// https://github.com/rafgraph/spa-github-pages
// This script checks to see if a redirect is present in the query string,
// converts it back into the correct url and adds it to the
// browser's history using window.history.replaceState(...),
// which won't cause the browser to attempt to load the new url.
// When the single page app is loaded further down in this file,
// the correct url will be waiting in the browser's history for
// the single page app to route accordingly.
(function(l) {
if (l.search[1] === '/' ) {
var decoded = l.search.slice(1).split('&').map(function(s) {
return s.replace(/~and~/g, '&')
}).join('?');
window.history.replaceState(null, null,
l.pathname.slice(0, -1) + decoded + l.hash
);
}
}(window.location))
</script>
</head>
We can check whenever navigate('/my-page') funnction is called when we're already on the same page i.e., /my-page
FYI: You can prevent the calling of the effect on component mount by saving preKey using useRef() and avoid calling code in useEffect when location.key === lastPathRef.current.
const navigate = useNavigate()
useEffect(() => {
// 1. Code here will only be called whenever `navigate('/my-page')` is called from anywhere of the project
// 2. Also: It will be triggered when a user click a <Link to={'/my-page'} /> link component.
}, [navigate.key])const myFun = () => {
navigate(`/app/movies/${id}/reviews`, { state: { movieId: popoverClickProps.id } });
}
// in target component which is rendered at the target path we can use:
const location = useLocation();
console.log('location.state?', location.state); // we get same valueWay 1:
Way 2:
- PR merge on Aug 19, 2021 by Dan Abrmov: Click here
- Found about the PR from this article: React: Stop checking if your component is mounted
- Codesandbox Example - Source: Click here
My Codesandbox Example: Click here
import "./styles.css";
import { useState, useEffect } from "react";
const mockApi = () =>
new Promise((res) => {
setTimeout(() => {
console.log("returning api response!");
res(25);
}, 500);
});
// Example inspired from: https://react.dev/learn/you-might-not-need-an-effect#fetching-data
// Note in this example, we're calling api twice in real but only calling `setState` once.
export default function App() {
const [state, setState] = useState(5);
useEffect(() => {
let ignore = false;
console.log("calling api!");
mockApi().then((data) => {
if (!ignore) {
console.log("setting state!");
setState(data);
}
});
return () => {
console.log("CLEANUP!");
ignore = true;
};
}, [setState]);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>state: {state}</h2>
</div>
);
}Fix FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory react-server error
Source: Click here
Complete List of key values @ MDN: Click here
Query: how would google know that a certain page with url like below exists? http://slasher.tv/app/news/partner/6036639a657a566248b973f7
- Possible way: We can generate a static build with multiple html files generated for each route which then be easily crawled by search engines.
Source:
- Article - Canonical URLs: A Beginner’s Guide to Canonical Tags: Click here
- Related stackoverflow question: Click here
- Article (from above 2nd answer of above stackoverflow question) - Tested How Googlebot Crawls Javascript
react-helmet.react-snap- Sample SEO react PROJECT with
react-helmetandreact-snap: Click here - React Snap buils static pages for different routes after
npm run buildcommand is finished when we have this"postbuild": "react-snap"script in our package.json project file. - Article1 on developers.google.com - Updating our technical Webmaster Guidelines: Click here
- Article2 on developers.google.com - Build and submit a sitemap: Click here
- Article3 on developers.google.com - Google Search Essential: Click here
- Article4 on developers.google.com - Link best practices for Google: Click here
- NOTE: Make your links crawlable so that Google can find other pages on your site via the links on your page. Refer linked article4.
- NOTE:
react-snapproduces static site pages for each route. - NOTE: Google Crawler runs javascript just like regular browsers do!. (Source of below image is Article1)
- Google crawls pages mentioned in the sitemap submitted for the site. (Source of below image is Article2)
- Google Search Console: Click here
- We might be able to check/test the crawled data for pages by "Google Search Console" (same linke as above).
Npm: source-map-explorer
Source: Click here
You can use this amazing feature of react-dev-tools to log the props of a component in an awesome way
Source: Article - SEO in React — Two simple step implementation
Source: Click here
import React from 'react';
setValue : React.Dispatch<React.SetStateAction<string>>
You can search for a component name and see its values
Source: Click here
export default function App() {
return (
<div className="App">
<Greeting />
</div>
);
}
// Learning: The default value given to b is not assigned becoz the whole object i.e, `defaultProps` is assigned to first argument of the component.
const Greeting = ({ a, b = "bar" }) => {
return (
<h1>
hello,
{a} {b}
</h1>
);
};
Greeting.defaultProps = {
a: "firstName",
b: "lastName"
};Error Type 'MutableRefObject<HTMLInputElement | undefined>' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'
Source: Click here
const ref = React.useRef<HTMLInputElement>(null)Example CodeSandbox: Click here
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<div dangerouslySetInnerHTML={{
__html: "<b>hello</b>"
}}/>
</div>
);
}Inspiration:
- React Design Patterns: Return Component From Hooks: Click here
// usage of `useCustomProgressButtonStatus` hook
const [ProgressButton1, setProgressButtonStatus1] = useProgressButton();
const updateYourPost = async (e: React.MouseEvent<HTMLButtonElement>) => {
// setProgressButtonStatus('loading');
// setProgressButtonStatus('success');
// setProgressButtonStatus('failure');
}
// in jsx
return <ProgressButton1 label="Update your post" className="text-primary" onClick={updatePostHandler} />File: useProgressButton (react custom hook):
import { solid } from '@fortawesome/fontawesome-svg-core/import.macro';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { ReactElement, useEffect, useState } from 'react';
import { Spinner } from 'react-bootstrap';
import RoundButton from './RoundButton';
type ProgressButtonStatus = 'default' | 'loading' | 'success' | 'failure';
type ProgressButtonComponentType = ({ label, className, onClick }: Props) => ReactElement<any>;
type Props = {
label: string,
className: string,
onClick: Function,
};
type SetProgressFunction = (status: ProgressButtonStatus) => void;
const useProgressButton = (): [ProgressButtonComponentType, SetProgressFunction] => {
const [progress, setProgress] = useState<ProgressButtonStatus>('default');
useEffect(() => {
if (progress === 'loading' || progress === 'default') return () => {};
const restoreDefaultStatusTimeout = setTimeout(() => {
setProgress('default');
}, 1_500);
return () => clearTimeout(restoreDefaultStatusTimeout);
}, [progress, setProgress]);
const ProgessButtonComponent = React.useMemo(() => {
function ProgessButton({
label, className = '', onClick = () => { },
}: Props) {
const disabled = progress === 'loading';
return (
<RoundButton disabled={disabled} type="submit" className={className} onClick={onClick}>
{progress === 'default' && label}
{progress === 'loading' && <Spinner size="sm" animation="border" role="status" />}
{progress === 'success' && <FontAwesomeIcon icon={solid('check')} size="1x" style={{ paddingTop: 3 }} />}
{progress === 'failure' && <FontAwesomeIcon icon={solid('x')} size="1x" style={{ paddingTop: 3 }} />}
</RoundButton>
);
}
return ProgessButton;
}, [progress]);
return [ProgessButtonComponent, setProgress];
};
export default useProgressButton;Source: Click here
- Github: Click here
- npm: Click here
Stackoverflow Question: Click here
-
Source: Click here
-
Source: Click here
-
Absolute vanilla way to get css variable in javascript
const successColorBootstrap = getComputedStyle(document.body).getPropertyValue('--bs-success'); console.log(successColorBootstrap) // #00ff0a
-
My notes @ css design trail about css variables accessing/setting via javascript?: Click here
Source: Click here
(see above section as well: Defining css varibles in react)
Inspired by Abhishek's Codebase
import { useState, useEffect } from "react";
export const useMatchMedia = (mediaQuery, initialValue) => {
const [isMatching, setIsMatching] = useState(initialValue);
useEffect(() => {
const watcher = window.matchMedia(mediaQuery);
setIsMatching(watcher.matches);
const listener = (matches) => {
setIsMatching(matches.matches);
};
if (watcher.addEventListener) {
watcher.addEventListener("change", listener);
} else {
watcher.addListener(listener);
}
return () => {
if (watcher.removeEventListener) {
return watcher.removeEventListener("change", listener);
} else {
return watcher.removeListener(listener);
}
};
}, [media]);
return isMatching;
};Source: Click here
FYI: I also answered this answer here in same above question.
By Jack Herrington: Click here
All searchParams methods @ MDN: Beautiful: Click here
Docs@ MDN: Click here
Source: Mastering React Batch Updating ~ Jack herrington
Source: Mastering React Memo ~ Jack Herrington
Its running the render() function on each render to change the values in virtualDom and changes from virtualDom to realDom is only done intelligent way (reconciliation) only when necessary(not change values on every render).
- Directly from react conciliation docs: Click here
React then needs to figure out how to efficiently update the UI to match the most recent tree.
Also changes are written to real dom when there is delta b/w virtual and real dom like that:
~Jack Herrington: If you are jumping to React.memo() becoz you put a console.log in your component and you see like wooooahhh this is getting called all the time, DON'T worry about it becoz at the end of the day if it doesn't make a dom change then then the price isn't all that high of calling that function over and over again.
5 things wrapped up:
- React memo is not memoization in traditional sense
- Train your mind that memo as "render if props have chagned".
- useCallback and useMemo are for referential integrity and inparticular: referential integrity of array, objects, and functions.
- Use useMemo when you're the calcuation you're doing is compuatationally expensive.
- Re-rendering in react is not a terrible thing, react was build to manage that. As reconciliation is magic that checks for the diff of vdom and dom and make changes to dom as required.
Source: Mastering React Memo ~ Jack Herrington
Learn:
- Memoization in react is about prevProps and currentProps comparing when the parent component is re-rendered, whereas the general definition of memoize (from wikipedia) it functions like below i.e, it stores key->value pairs according to the params passed to the memoed version of the function.
- So summing up: React.memo is not actually memoization but actualy React.render() if the props have changed.
Source: Code Splitting Made Simple ~ Jack Herrington
- Load data, functions (both as default named exports)
- Learned how to name your chunks (this helps in caching so that when app wants to load the component again the browser just loads it from cache and not fetch from server again)
- All above with three different ways: 1. manually, 2. Suspense+React.lazy() {this is not workable with react server side}, 3. Loadable components (works good with server side as well)
- Learned to load compoents asynchronously from default and named exports
- Learned module federation functionality to share code between applications
Changing the count state does not unmount the About component. Tested by using the useEffect's return function.
function App() {
const [count, setCount] = useState(0);
return (
<div className="App">
<button onClick={() => setCount(count + 1)}>{count}</button>
<About count={count} />
</div>
)
}Source: Click here @ youtube by Jack Herrington
Github Repo: Click here, It also forked in my repos as well for longetivity.
Interesting thing by a commentor on above video: 
https://twitter.com/Prathkum/status/1588943218707779584
https://twitter.com/BHolmesDev/status/1588168499507216384
let c = {}
// assigns `c.a = 2`
Object.defineProperty(c, 'a', {value: 2})
or attach anyother function/object to window:
Source: https://stackoverflow.com/a/49167878/10012446
No, name attribute only applies to a list of elements i.e, button, fieldset, form, iframe, input, map, meta, object, output, param, select, textarea. So you can see div and span are not in this list. Source: Click here.
Why the question is important? Sometimes in react components people use name property to set input values and other values to store in state via a generic dynamic name based properties for respecitve values from the user and I THINK ITS NOT OPTIMAL TO USE THAT INSTEAD I SUGGEST TO USE some functin generator like passing to onChange={() => setField('filedIdentifierName')} as prop. THAT ROCSK EVERYWHERE AND QUITE READABLE TO EVERYONE.
UPDATE: Using immer tip appData.trades.splice(0) to delete all items from the array. Source: Click here to know more array mutations with immerjs.
You may find its implementations in following project codes:
totel-latestproject inreference-projectsrepository.decentralized-exchangeclient app as well(nextjs-typescript).
import {createContext, useContext, useEffect, useState, ReactNode} from 'react'
import produce from 'immer'
const AppDataContext = createContext<any>({loading: true})
export const useAppData = () => useContext(AppDataContext)
interface Props {
children?: ReactNode
// any props that come into the component
}
type AppData = any
type cbT = (appData: AppData) => void
export function AppDataProvider({children}: Props) {
const _state = useState<AppData>({})
const [appData, setAppData] = _state
const setAppDataImmer = (cb: cbT) => setAppData((data: any) => produce(data, cb))
useEffect(() => {
async function onPageLoad() {}
onPageLoad()
}, [])
// NOTE: you *might* need to memoize this value
// Learn more in http://kcd.im/optimize-context
return <AppDataContext.Provider value={[appData, setAppDataImmer]}> {children} </AppDataContext.Provider>
}Amazing articel: https://www.joshwcomeau.com/react/next-level-playground/
You should try moving the code up in the tree first and that can solve issues where you need to fix using memo().
- Inspiration: https://github.com/axios/axios/blob/main/ECOSYSTEM.md
- Usage Example:
with-msw-and-useAxios
- Github: msw
- Usage Example:
with-msw-and-useAxios - Official Examples: Click here
- Autoanimate, @Github 5.2k* - Source: t3: https://youtu.be/V8-z891_DN4
- https://github.com/framer/motion - Also has a web tool for building awesome prototypes, for example visit here.
Source: Amzing react conf video
const ReactDOMServer = require("react-dom/server");
const react = require("react");
const A = react.createElement(
"div",
{
car: "merces",
},
null
);
const MyElement = react.createElement(
"div",
{
foo: "bar",
},
A
);
const data = ReactDOMServer.renderToStaticMarkup(MyElement);
console.log("my generated html:", data);Source: w3schools
import {useState} from 'react'
export default function Test() {
const [isOpen, setIsOpen] = useState(false)
const togglePopup = () => setIsOpen(!isOpen)
return (
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum doloribus, saepe distinctio modi explicabo magni veritatis dignissimos itaque ex at aperiam facere reprehenderit obcaecati aut soluta earum laudantium ullam! Voluptatem doloremque quia animi tempora dolor cum quisquam quod. Quibusdam soluta fugit, delectus laudantium eveniet tenetur a reprehenderit rerum ex dolorem reiciendis ad ipsam aperiam neque accusantium omnis labore nulla cumque totam dolor minus ipsa sequi nisi necessitatibus. Eaque provident perspiciatis debitis rem hic quo unde ut beatae officiis? Cumque impedit velit doloremque cum necessitatibus, ipsam at sunt ipsa et quidem! Quam quibusdam error facere autem est blanditiis, laudantium delectus accusantium aliquam rem quos accusamus, quo fugiat? Reprehenderit quisquam illum ratione? Ea exercitationem perspiciatis debitis doloribus similique a illo tempore officiis soluta, et totam laborum excepturi ipsam nostrum ducimus quibusdam esse tenetur dolorum
temporibus architecto ex animi aliquid eos. Eius, reprehenderit! Reprehenderit dolorem dolore repellat similique quisquam quia natus exercitationem, eaque iure consectetur incidunt enim cupiditate beatae sit! Voluptatem vel ipsam error harum. Expedita quod molestias, sapiente delectus saepe reprehenderit dicta quaerat iusto accusantium laboriosam sit quisquam animi impedit natus recusandae aut assumenda vel adipisci illo eum deserunt labore. Fuga quia fugiat nulla voluptas rerum unde dolorem, repellendus voluptatum velit facere omnis consequatur cum saepe debitis reiciendis ex adipisci cupiditate recusandae blanditiis ipsa. Optio, atque sunt recusandae, libero pariatur dolores repellat et laboriosam vel aliquam excepturi. Fuga sint modi commodi ipsum aut. Dolorum, debitis delectus consectetur, tempore ad necessitatibus iure hic aut tempora, voluptatum fugiat ratione rem deserunt. Velit ipsam unde quod expedita, non vel voluptate voluptatem sint quas libero laudantium maiores eum
impedit facilis? Mollitia dolores a eum, fuga corrupti minus quae numquam qui provident animi vero sapiente veritatis placeat! Quidem magni voluptatibus reiciendis fugiat? Blanditiis nulla odit neque animi eligendi ipsum fugit illo quam nisi dolores, debitis impedit iure?
{/* <Login /> */}
<button className='btn' onClick={togglePopup}>
{isOpen ? 'Close Popup' : 'Open Popup'}
</button>
<Popper isOpen={isOpen} >
<Popup1 controls={[isOpen, setIsOpen]} />
</Popper>
</div>
)
}
export const Popup1 = ({controls}) => {
const [isOpen, setIsOpen] = controls
const closePopup = () => setIsOpen(false)
return (
<>
<div className='heading'>Los Angles</div>
<div>This is popup</div>
<div>This is popup</div>
<div>This is popup</div>
<div>This is popup</div>
<br />
<button className='btn' onClick={closePopup}>
Close popup
</button>
</>
)
}
export const Popper = ({children, isOpen}) => {
return (
<div className='popper__default'>
<div className={`popup__container ${isOpen ? 'show' : ''}`}>
<div className={`popup__contents `}>{children}</div>
</div>
</div>
)
}// scss
.popper__default {
.popup__container {
border: 2px solid green;
display: none;
position: fixed;
inset: 0;
// change the end % to change the transparency of the background drop shadow
background: rgb(128 128 128 / 51%);
.popup__contents {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
box-shadow: 0 0px 30px 2px grey;
border-radius: 20px;
max-width: 500px;
min-height: 600px;
padding: 20px 50px;
margin: auto;
margin-top: 100px;
background: white;
.heading {
font-size: 3rem;
}
}
&.show {
display: block;
}
}
}
.btn {
padding: 20px;
color: white;
background: deepskyblue;
outline: none;
border-radius: 15px;
}Output:
FYI: With nextjs the only nodejs debugger debugs both frontend and backed breakpoints well, yo.
FYI: This should be done under parental advice only coz it produces no use at all. :LOL:
https://npmtrends.com/react-async-vs-react-query-vs-zustand
https://github.com/pmndrs/zustand
https://github.com/pmndrs/jotai
import produce from 'immer'
// source: https://github.com/sahilrajput03/learn-react/blob/main/warikoo-time-manager/src/App.js
const [_, setData] = useData()
const setDataImmer = (cb) => {
setData((data) => produce(data, cb))
}
const onClickUrgent = () => {
setDataImmer((data) => void (data.todos[idx].urgent = !data.todos[idx].urgent))
}Directly using useImmer hook? Refer this reply from Daishi: Click here
https://react-tracked.js.org/docs/tutorial-03/
Linked codesandbox of final project @ https://codesandbox.io/s/infallible-firefly-yzwxc
Source You may use switch:case in handler to make it easy for you:
Exported components to their own folders and now its hard to code in files with tab names as index.js in vscode
Source So, do that and do all exports from inside the NavBar.js file only:
Starting debugger in existing chrome window (rather than opening new bulky chrome window on start of each debugging session)
We need to have a chrome running with debugging on i.e, we can do it via: (use your alias i.e., chrome-debug) google-chrome-stable --remote-debugging-port=9222 and we can create a Chrome:Attach debugger configuration via:
- Implementing immer with a reducer is so easy for codesandbox link -> click here:
const history = (path) => window.history.pushState('', '', path)
const jsx = () => {
return (
<div>
<button
onClick={() => {
history('/boom')
}}
>
Click me to go to /boom
</button>
<button
onClick={() => {
history('/bamm')
}}
>
Click me to go to /bamm
</button>
</div>
)
}- Ensure that
package.jsonfile has below content:
{
"eslintConfig": {
"extends": ["react-app", "react-app/jest"]
}
}- Use below commands to install some dependencies, add
.eslintrc.js,.prettierrc.jsand.prettierignorein a CRA project's root directory:
npm i -D eslint-config-prettier eslint-plugin-prettier
curl -O https://raw.githubusercontent.com/sahilrajput03/my_bin/master/files/eslint-config-react/.eslintrc.js
curl -O https://raw.githubusercontent.com/sahilrajput03/my_bin/master/files/.prettierrc.js
curl -O https://raw.githubusercontent.com/sahilrajput03/my_bin/master/files/.prettierignore
npm set-script prettier-write "prettier --write ."
npm run prettier-writeThats all it takes and don't forget to restart your react server.
Source: https://create-react-app.dev/docs/setting-up-your-editor/#visual-studio-code
