Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ReactJS Training Day 3 | Abhisek Pattnaik | Imp...

ReactJS Training Day 3 | Abhisek Pattnaik | Impelsys

Event Handling

List and Conditional Rendering

Hooks

Avatar for Abhisek Pattnaik

Abhisek Pattnaik

December 28, 2022
Tweet

More Decks by Abhisek Pattnaik

Other Decks in Programming

Transcript

  1. WELCOME TO REACTJS TRAINING DAY 3 ...by Abhisek Pattnaik Senior

    Software Engineer CE Services, Heart Bangalore
  2. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights

    Reserved. 1. Event Handling 2. List and Conditional Rendering 3. Hooks (Functional Component) 4. Resources 5. Exercise Agenda
  3. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights

    Reserved. I ❤ ReactJS • class Page { handleClick = (ev) => { ev.preventDefault() } } • Synthetic events – Cross browser compatible. Event Handling
  4. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights

    Reserved. I ❤ ReactJS • Array#map to render list of components • (condition) ? <RenderComponent /> : null • Returning null will not render the component. List and Conditional Rendering
  5. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights

    Reserved. I ❤ ReactJS • Re-render a component if key prop changes • Uniquely identifies component • Must be used while rendering multiple components in a list • Doesn't get passed to component. • Cannot be used as prop name • Prefer unique ID instead of array index https://playcode.io/1046547 Key Prop
  6. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights

    Reserved. I ❤ ReactJS • useState – this.state const [counter, setCounter] = useState(0) const [counter, setCounter] = useState(() => 0) • useEffect – componentDidMount + componentDidUpdate + componentWillUnmount useEffect(() => { return () => { // cleanup code } }, [/* deps */]) Use for Data fetching, subscriptions, sync external system. • Top level only (not inside loops, condition, or nested fns) • Can only be called in React Component or Custom Hooks. • Other useful hooks: useReducer, useContext, useCallback, etc. • Always starts with `use` prefix. • Add unknown dependencies. Hooks
  7. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights

    Reserved. • List and Keys: https://reactjs.org/docs/lists- and-keys.html • Hooks: https://reactjs.org/docs/hooks- overview.html • Reconciliation: https://reactjs.org/docs/reconciliation.html# recursing-on-children • Render & Commit: https://beta.reactjs.org/learn/render-and- commit Resources
  8. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights

    Reserved. Grab your Phone Scan the QR Code and Go to the Slido Link https://app.sli.do/event/vESivSrS32JxajHwHHRs7H or Join at slido.com #1189358
  9. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights

    Reserved. I ❤ ReactJS • Build a Calculator App (Functional Comp.) • It should show the result • It should have operand buttons (0-9) • It should have operator buttons (÷×-+) • Add interactivity to app. • Think your own idea... Exercise