shlev / react-projects-smilga Goto Github PK

uidesigndaily

react icons

npm install react-icons --save

import { FaHome } from "react-icons/fa";
const Component = () => {
  return <FaHome className="icon"></FaHome>;
};

• spread ... to child component
• useState
• ternary
• show\hide short-circuit-and

• useState
• filtering components
• pattern to extract objects unique values to array.

const allCategories = ["all", ...new Set(items.map((item) => item.category))];

Portfolio

• fetch data from external url async, await.
• useEffect for initialization
• conditional rendering
• conditional styling

Gatsby-Airtable Project

• multiple useEffect
• useEffect on specific var
• useEffect cleanup

• form handle single input
• handle submit -> preventDefault
• input return string
• parseInt

values.js

• form handle single input
• handle submit -> preventDefault
• input return string
• parseInt
• fragment component
• conditional class

className={`color ${index > 10 && "color-light"}`}

• array.join()

  const arr = [3,4,5];
  const join_arr = arr.join('.') // join_arr = '3.4.5'

• inline compoponent style

<article
  className={`color`}
  style={{ backgroundColor: `rgb(${bcg})` }}
>
</article>

• rgbToHex function
• copy value to clipboard

navigator.clipboard.writeText(hexValue)

• color.hex -> not possible to destructure nont iterable property. instead send it to child as specific param.

<SingleColor
              key={index}
              {...color}
              hex={color.hex}
              index={index}
            >
</SingleColor>

• useEffect cleanup, activated if component is unmounted.

• conditional rendering
• list managment, add ,edit ,delete.
• function default values
• array.filter
• array.find
• componenet useEffect dependancy
• localStorage
• useEffect for initialization

• img import

import logo from "./logo.svg";

<img src={logo} alt="logo" />

• useRef to get element ref , for styling

• context hook
• AppContext
• children
• custom hook
• pass object in hook

• context hook
• useRef
• useContext
• inline style
• events mouseover, click
• getBoundingClientRect for location ref.

• useReducer - used for state managment

  state - object of states dispatch - functionality for updating states.

  • type -> action type
  • action -> arguments

  const [state, dispatch] = useReducer(reducer, initialState);

(Fix)[https://dev.to/dance2die/page-not-found-on-netlify-with-react-router-58mc]

"build": "CI= react-scripts build",

• Route (react-route-dom)

  • BrowserRouter contain

    • linking components

      <Link to="{destination}"></dd>
      

    • routing components destinations

      • Switch to select from Route options , similar to reguler switch
      • path="*" similar to regular switch default
      • exact if not used it will be routed when it is part of other path like "/about" will call "/" and "/about"

      <Switch>
        <Route exact path="/">
          <Home></Home>
        </Route>
        <Route path="/about">
          <About></About>
        </Route>
        <Route path="*">
          <Error></Error>
        </Route>
      </Switch>
      

      • extract api data to more convinient object by destructure and build new object

      const newCocktails = drinks.map((item) => {
          const { idDrink, strDrink, strDrinkThumb, strAlcoholic, strGlass } = item;
          return {
            id: idDrink,
            name: strDrink,
            image: strDrinkThumb,
            info: strAlcoholic,
            glass: strGlass,
          };
      

      • context provider to transfer objects without prop drilling

      • uncontrolled input with useRef

        const searchValue = React.useRef("");
        .
        const searchCocktail = () => {
          setSearchTerm(searchValue.current.value);
          };
        .
        <input
            type="text"
            id="name"
            ref={searchValue}
            onChange={searchCocktail}
          />
      

      • useParams - to use url trnsfered params App.js

        <Route path="/cocktail/:id">
          <SingleCocktail />
        </Route>
      

      SingleCocktail.js

        const { id } = useParams();
      

• cheet-sheet

• use markdown component package

    npm install react-markdown
  

• controlled input

    useState(markdown, setMardown)
  
    <textarea>
      value={markdown}
      onChange={(e) => setMarkdown(e.target.value)}
    </textarea>
  

  • convert to markdown

    <ReactMarkdown>{markdown}</ReactMarkdown>
  

• random user api

• conditional render (loading)

• useState

• useEffect

• destructure api object

• read data dom object value

  • component

  <button
        key={index}
        className="icon"
        data-label={`${label}`}
        onMouseEnter={handleValue}
      ></button>
  

  • js read data value

  const newTitle = e.target.dataset.label;
  

• custom hook

   const { loading, data } = useFetch();

• conditional rendering

        <h1>{loading ? "loading..." : "pagination"}</h1>

• convert array to array of arrays

const newFollowers = Array.from({ length: pages }, (_, index) => {
    const start = index * itemsPerPage;
    return followers.slice(start, start + itemsPerPage);
  });

• env react

• enviroment vars key=value key must start with REACT_APP_
• scrollEvent add and remove when compoenents is off

 useEffect(() => {
   const event = window.addEventListener("scroll", () => {
     if (
       !loading &&
       window.innerHeight + window.scrollY >= document.body.scrollHeight - 200
     ) {
       setPage((oldPage) => {
         return oldPage + 1;
       });
     }
   });
   return () => window.removeEventListener("scroll", event);
 }, []);

• momentJs to format date

• set html tag

  document.documentElement.classList = mode;
  

• setting css varibles by class

.dark-theme {
  --clr-bcg: #282c35;
  --clr-font: #fff;
  --clr-primary: #ffa7c4;
}

.light-theme {
  --clr-bcg: #fff;
  --clr-font: #282c35;
  --clr-primary: #ffa7c4;
}

• save theme to localStorage