Skip to content

Latest commit

 

History

History
1343 lines (972 loc) · 50.5 KB

README.md

File metadata and controls

1343 lines (972 loc) · 50.5 KB
Raw

Readme

Quick Links to this repository:

Quick Links:

Quick Links My Resources:

React Projects Deployed:

TODO:

  • Make a codesandbox example for making use of nested route system (refer slasher project for it)

For reference to fullstack solutions: Please refer @ https://github.com/sahilrajput03/fullstackopen

Merged repos:

  • absolute-path-cra, react-app as template-js-vite directory, simple_service_worker, react-markdown-serve-markedjs, react-vite as my-react-vite-app directory, react-sass-love, react-fast-refresh-boilerplate, react-naked as react-via-cdn, snowpack-react-boilerplate/, deno-aleph-react-framework, GistsFetchingFromGithubRandom_react-router-dom, hackerrank-sorting-react-test, React-query: Gist

Other react articles

Usefult react libraries

Data binding in react - <input/>, radio, checkboxe, checkboxe groups, select, etc

Read this amazing article by Josh W Comeau: Click here

Using useId hook in react

Source: Click here

image

flatted

// 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"}]

Learn Tel Code (country code, phone code selector)

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>
  )
}

Track if cursor is inside the div / element

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>
}

Native Modal in html

Source: Click here

image

HTML inputs

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">

Radios and Checkboxes

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>
}

Want to do inifinite loading content?

Note to Sahil: View the notes of react query in the gist file here.

What is MVC?

image

Can we change react state without re-rendering the component - Interview Question

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;
  }

Are all contents of build directory cleaned when we run react-scripts build command in a CRA

Source: Click here

Yes, they are!

image

image

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)

Make child component state in sync with parent component state

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> 
}

Third argument for window.addEventListener

TLDR: To prevent consumption of the event by other events like focus, etc. Thanks Eric.

image

Easy way to get get values in browser console

image

Using abort controller with react!

Source@timestamped

Click to open hd version of image

Using builtin abort controller in react-query

Note to Sahil: View the notes of react query in the gist file here.

Lazy loading images in react

Clickh here- Youtube video - Simple with library react-lazy-load-image-component - npm package

Third parater of addEventListener

Click here

Learning amazing apis of browser realted to history and state in browser

Handling spa with github pages

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>

useEffect(() => {}, []) runs twice in development server why?

Click here

We can see useState hook names in react-dev-tools too - AWESOME

image

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])

We can pass state to another component via location.state like that

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 value

Way 1:

image

Way 2:

image

Calling setState after component mount is always safe

Set state on component mount

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

Fix enter key to (submit form/page refresh) in react-bootstrap

Complete List of key values @ MDN: Click here

image

Dynamically adding meta and canonical <link> tags in create-react-app project for SEO purpose

image

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.

image

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-helmet and react-snap: Click here
  • React Snap buils static pages for different routes after npm run build command 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-snap produces static site pages for each route.
  • NOTE: Google Crawler runs javascript just like regular browsers do!. (Source of below image is Article1) image
  • Google crawls pages mentioned in the sitemap submitted for the site. (Source of below image is Article2) image
  • 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). image

Generate this beautiful dependencies graph

Npm: source-map-explorer

Source: Click here

image

You can use this amazing feature of react-dev-tools to log the props of a component in an awesome way

image

Seo in react

Source: Article - SEO in React — Two simple step implementation

Define type for setState function in typescript

Source: Click here

import React from 'react';
setValue : React.Dispatch<React.SetStateAction<string>>

image

❤️ Its always good to view component's props data in react-dev-tools view

You can search for a component name and see its values

image

defaultProps in react components

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)

Using dangerous set html in react

Example CodeSandbox: Click here

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div dangerouslySetInnerHTML={{
        __html: "<b>hello</b>"
      }}/>
    </div>
  );
}

Returning component from your custom hook

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;

Remove all proerties of a button

Source: Click here

image

copy-to-cliboard library

Defining a sub-render function in render vs. a React component

Stackoverflow Question: Click here

Defining css varibles in react

  • 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

React 18: useEffect Double Call; Mistake or Awesome? ~Jack Herrington

Source: Click here

Thats how we can use css varibles in react

(see above section as well: Defining css varibles in react)

image

window.matchMedia to help you do media query checking in javascript

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;
};

What does flushSync() do in React?

Source: Click here

FYI: I also answered this answer here in same above question.

microfrontends?

By Jack Herrington: Click here

multiple search params?

All searchParams methods @ MDN: Beautiful: Click here

Docs@ MDN: Click here

image

image

Mastering React Batch Updating

Source: Mastering React Batch Updating ~ Jack herrington

What does render function call does actually in react?

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.

image

Also changes are written to real dom when there is delta b/w virtual and real dom like that:

image

~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.

Memoization

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.

image

Async code-splitting with react - Jack Herrington

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

Myth breaking ~Sahil

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>
    )
}

Tanstack router amazing

Click here

Make useContext fast

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: image

use hook in react experimental version

Click here

Amazing html attributes you would never know oterwise

https://twitter.com/Prathkum/status/1588943218707779584

Learn about cnd cache headers

https://twitter.com/BHolmesDev/status/1588168499507216384

How Object.defineProperty works?

MDN

let c = {}
// assigns `c.a = 2`
Object.defineProperty(c, 'a', {value: 2})

This is the best debugging technique to debug values of react components on earth

image

or attach anyother function/object to window:

image

css intellisence in vscode for all attached files

Source: https://stackoverflow.com/a/49167878/10012446

Can we give name attribute to all html elements and get the property vaulue via e.target.name?

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.

Using context with typescript

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-latest project in reference-projects repository.
  • decentralized-exchange client 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>
}

TODO: Make your own IDE in your website

Amazing articel: https://www.joshwcomeau.com/react/next-level-playground/

should I use memo() ?

You should try moving the code up in the tree first and that can solve issues where you need to fix using memo().

useAxios - a very lovely hook

msw

image

Animate things easily:

mdx with react

Source: Amzing react conf video

image

image

Online IDE's for react

image

Render static html on server using createElement api

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);

Create popups with Popper in react (vanilla pop up)

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:

image

YO! We can run multiple debugger i.e,. frontend and backend

FYI: With nextjs the only nodejs debugger debugs both frontend and backed breakpoints well, yo.

image

Use vscode debugger to get the return value of a component

FYI: This should be done under parental advice only coz it produces no use at all. :LOL:

image

Use npm trends for comparing npm packages

https://npmtrends.com/react-async-vs-react-query-vs-zustand

TODO: Try immer or jotai for next project

https://github.com/pmndrs/zustand

https://github.com/pmndrs/jotai

immer with existing setState hooks (run with existing code base with existing setState api)

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))
}

React tracked with immer (prefer jotai though, its much popular and devleoped on github right now)

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

An amazing way to make single handler for all the event handlers in your component

Source You may use switch:case in handler to make it easy for you:

image

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:

image

Starting debugger in existing chrome window (rather than opening new bulky chrome window on start of each debugging session)

Source1, Source2

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:

image

image

image

more....

- Developing multiple react projects in single react project:

image

- Implementing immer with a reducer is so easy for codesandbox link -> click here:

image

- Use native browser history api instead of react-routed-dom api everytime

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>
	)
}

- React eslint + prettier settings

  1. Ensure that package.json file has below content:
{
	"eslintConfig": {
		"extends": ["react-app", "react-app/jest"]
	}
}
  1. Use below commands to install some dependencies, add .eslintrc.js, .prettierrc.js and .prettierignore in 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-write

Thats all it takes and don't forget to restart your react server.

- Debugging made easy in vscode itself (src: CRA documentation

Source: https://create-react-app.dev/docs/setting-up-your-editor/#visual-studio-code

Simple way to define way of onMount functions in react components

image