ReactJS Training Day 3 | Abhisek Pattnaik | Impelsys

Event Handling

List and Conditional Rendering

Hooks

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
10. QUESTIONS? React out via abhisek.pattnaik@impelsys.com https://about.me/abhisekp