React

npm install -g create-react-app

npx create-react-app file-upload-app cd file-upload-app npm start

maxschwarzmueller https://github.com/academind/react-complete-guide-course-resources

PizzaStore: CartContext Modal Button

TicTacToe

Investment Calc: 

Modal basic:

https://github.com/academind/react-complete-guide-course-resources/blob/main/code/08%20Refs%20Portals/07-adding-a-modal-cmp/src/components/ResultModal.jsx

Modal forwardRef:

https://github.com/academind/react-complete-guide-course-resources/blob/main/code/08%20Refs%20Portals/08-forwarding-refs/src/components/ResultModal.jsx

Section 8 Working with Refs and Portals

Demo project: Project Manager:

https://github.com/academind/react-complete-guide-course-resources/blob/main/code/09%20Practice%20Project%20-%20Project%20Management/10-finished/src/App.jsx

Demo project: Quiz app:

https://github.com/academind/react-complete-guide-course-resources/blob/main/code/13%20Demo%20Project%20-%20React%20Quiz/08-finished/src/App.jsx

Authentication: https://github.com/academind/react-complete-guide-course-resources/blob/main/code/22%20Authentication/09-finished/frontend/src/components/AuthForm.js

{data && data.errors && (

          <ul>

            {Object.values(data.errors).map((err) => (

              <li key={err}>{err}</li>

            ))}

          </ul>

        )}

https://github.com/jonasschmedtmann/ultimate-react-course

https://react.new/ - code sandbox

VS Code extentions: 

prettier, eslint, liveserver

Quokka - JavaScript and TypeScript playground in your editor.

1) we should never update the state in render logic

2) component will be re-rendered on:

-state change

-props change

-parent change

-

https://www.youtube.com/watch?v=i-hoSg8iRG0&t=231s 

https://github.com/facebook/create-react-app

npx create-react-app my-app
cd my-app
npm start

https://react-bootstrap.github.io/getting-started/introduction/

npm install react-bootstrap bootstrap

https://www.pexels.com/

const [items, setItems] = useState([]);

  function handleAddItems(item) {

    setItems((items) => [...items, item]);

  }

  function handleDeleteItem(id) {

    setItems((items) => items.filter((item) => item.id !== id));

  }

  function handleToggleItem(id) {

    setItems((items) =>

      items.map((item) =>

        item.id === id ? { ...item, packed: !item.packed } : item

      )

    );

  }

<PackingList

        items={items}

        onDeleteItem={handleDeleteItem}

        onToggleItem={handleToggleItem}

        onClearList={handleClearList}

      />

export default function PackingList({

  items,

  onDeleteItem,

  onToggleItem,

  onClearList,

}) {...}

      <button onClick={() => onDeleteItem(item.id)}>❌</button>

https://i.pravatar.cc/

https://i.pravatar.cc/200

https://i.pravatar.cc/200?u=499476

https://jsonplaceholder.typicode.com/

https://api.adviceslip.com/

https://api.adviceslip.com/advice/1

https://www.omdbapi.com/apikey.aspx

 const isWatched = watched.map((movie) => movie.imdbID).includes(selectedId);

  const watchedUserRating = watched.find(

    (movie) => movie.imdbID === selectedId

  )?.userRating;

 function handleDeleteWatched(id) {

    setWatched((watched) => watched.filter((movie) => movie.imdbID !== id));

  }

asdf

163  Initializing State With a Callback Lazy Initial State

localStorage.setItem("asdf",JSON.stringify(json));

const [asdf,setAsdf] = useEffect(function(){

return JSON.parse(localStorage.getItem("asdf");

});

localStorage.setItem('test', new Array((i * 1024) + 1).join('a'));

// Function to update the object state
  const updateObject = () => {
    // Update the state by creating a new object with the updated values
    setMyObject({
      ...myObject, // Spread the current state
      key2: 'updatedValue' // Update the desired key/value pair
    });
  };

const countRef = useRef(0);

useEffect(function(){

countRef.current++;

})

function getWeatherIcon(wmoCode) {

  const icons = new Map([

    [[0], "☀️"],

    [[1], "🌤"],

    [[2], "⛅️"],

    [[3], "☁️"],

    [[45, 48], "🌫"],

    [[51, 56, 61, 66, 80], "🌦"],

    [[53, 55, 63, 65, 57, 67, 81, 82], "🌧"],

    [[71, 73, 75, 77, 85, 86], "🌨"],

    [[95], "🌩"],

    [[96, 99], "⛈"],

  ]);

  const arr = [...icons.keys()].find((key) => key.includes(wmoCode));

  if (!arr) return "NOT FOUND";

  return icons.get(arr);

}

js: <script src="..." type="module"></script>

export let apikey="asdf"

import {apikey, somekey as newkey} from './props.js"

import * as props from "./props.js"

console.log(props.apikey)

import "img" from "./img/some.png"

<p className={`label  ${ emailValid? 'valid' : 'invalid'}`}>email</p>

<p style={{color:'green', border:'solid'}}

import whateverName from './App.module.css'

<p className={whateverName.err}>Err</p>

className={`${whateverName.err}`}

const ChildComponent = forwardRef({ actual, ...otherProps },ref) => { return ( <div> {/* Pass other props to the input element */} <input {...otherProps} ref={ref} /> {/* You can use the "actual" prop here */} <p>Actual prop: {actual}</p> </div> ); });