07/10 - 07/14

[kunheejeon]

07/10

• importance of key in rendering list: identify list item and prevent unnecessary re-render
• JS syntax `string ${state} to use flexible string class (backticks)
• CSS Modules: CSS files in which all class names and animation names are scoped locally by default
• promise: asynchronous programming to handle the results of an operation that may take some time to complete while running main or other program
  • can replace then() to aysnc function and await

[kunheejeon]

07/11

• http / restful api / axios

  fetch(url, {
  method: "GET", // POST, PUT, DELETE, etc.
  mode: "cors", // no-cors, same-origin
  cache: "default", // no-cache, reload, force-cache, only-if-cached
  credentials: "same-origin", // include, omit
  headers: {
  "Content-Type": "application/json", // application/x-www-form-urlencoded
  },
  redirect: "follow", // manual, error
  referrerPolicy: "no-referrer-when-downgrade", // no-referrer, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
  body: JSON.stringify(data), // body data type must match "Content-Type" header
  }

  fetch('https://api.example.com/data')
  .then(response => {
  if (!response.ok) { throw new Error('Network response was not ok'); }
  return response.json();
  })
  .then(data => {
  console.log(data);
  })
  .catch(error => {
  console.error('Error:', error);
  });

  async function fetchData() {
  try {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) { throw new Error('Network response was not ok'); }
  const data = await response.json();
  } catch (error) {
  console.error('Error:', error);
  }
  }
  fetchData();

• useEffect() should not return a promise

  • useEffect(async() => {}) is not allowed
  • do useEffect(() => { const fetchItem = async () => { await fetch(); } })

• firebase databade: https://react-http-f7e24-default-rtdb.firebaseio.com/

• React Hooks

  • Functional components: now able to manage states and write compact code
  • add extra capabilities to functional comonents
  • useCallback(): cache a function definition between re-render to skip re-render/infinite-render
  • useReducer(): can manage multiple/broadly spread states with reducer (will be replaced with redux
  • useContext(): can pass data between non-parent/child components without passing (unnecessary) props steps "prop drilling"
  • useMemo(): avoid complex recalculation, re-rendering. it can memoize a dependency of another Hook
  • custom hooks used to fetch datas

setTimeout and promise code questions need to be reviewed.

[kunheejeon]

Redux is a state management system for a cross-component/app-wide state (React 3rd party library)

States: local state: single component => useState()/ useReducer() cross-component state: state that affects multiple components => prop chains / prop drilling app-wide state: state that affect entire app (e.g. user auth status) => useContext() or Redux

React Context vs Redux Context disadvantages: complex setup/management for large code/components

• lead deeply nested JSX
• not great for high-frequency updates

Redux

• have one central data store for all states for whole application
• reducer function mutates stored data -> central data store -> components subscribed to the store (cant make changed directly)
• components trigger action -> forwarded to reducer then

npm install redux react-redux src/store/index.js as redux folder+file in root index.js file,

import { Provider } from "react-redux";
import store from "./store/index";

useSelector()

• React Reduxt automatically set up a subscription to Redux for the component

useDispatch()

• dispatch an action against Redux store
• dispatch({ type: "testType", actionValue: 123 });

in redux never mutate the existing state, instead override it by returning new state object.

Redux Toolkit createSlice()

• allow redux to mutate the state
• Redux toolkit internally uses another package, imgur,
  • detecting code and automatically clone the existing state,
  • then create a new state object, keep all the state and override the state which editing in an immutable way

configureStore()
const store = configureStore({
  reducer: counterSlice.reducer,
});

[kunheejeon]

Single-Page Application Routing

• use router and Link to prevent website from sending a new request to the server to navigate pages <RouterProvider router={router} />

Generally configure routes make different components are loaded for different paths

To route to other pages

• <Link to="/">Home</Link>

to have nav, have root layout

• element: <root-page />

then put all other pages into children (nested route)

children: [{
  path: 'product',
  element: <product />
}]

handling error page

• errorElement: <ErrorPages />

active link: if the page is rendering the link, link is being active state css

• <NavLink to="/" className={({ isActive }) => isActive ? classes.active : undefined }end></NavLink>

Dynamic Route (use colone : and useParams()) useParams() : params from link

• <Link to={/products/${prod.id}}>{prod.title}</Link>

data fetching and submission

• with loader and action

• react-route-dom is strong enough for data to be loaded and then loads the page

  • don't need to have loading state

• when loading data, it gives browser a response so when error occur from loading, throw new Response to handle it (can use json()) useLoaderData() or useRouteLoaderData('loader-id')

• action attribute to submit data

• advanced cased: useFetcher()

  • fetch and load data behind the scenes without navagating

deferring data fetching

• useful when there is some slow requests (backend)
• display without waiting data being loaded