ReactJS Training Day 2 | Abhisek Pattnaik | Impelsys

Component-Based Architecture

JSX

Function and Class component

State and Props

React Lifecycle

Transcript

1. WELCOME TO REACTJS TRAINING DAY 2 ...by Abhisek Pattnaik Senior Software Engineer CE Services, Heart Bangalore
2. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. 1. ReactJS Component based Architecture 2. JSX Syntax 3. Function vs Class Component 4. States and Props 5. React Lifecycle 6. Resources 7. Exercise Agenda
3. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. React Component Architecture
4. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ JSX • ``` React.createElement( "div" { className: "App" }, React.createElement("h1, null, "Hi you!") ) ``` • https://playcode.io/1045739 Build with React
5. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ JSX • Use camelCase property names (JS Convetion) • React.createElement XML like alternative • ``` <div className="App"> <h1>Hello Abhisek</h1> </div> ``` Intro to JSX [Javascript + XML]
6. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ ReactJS • Presentational only • No internal states • Pure component • Depends on props to render UI snapshot Function Component
7. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I !❤ Prop Drilling • Pass information to a component • <Page title="Dashboard"> Welcome to the Dashboard Page </Page> • children Prop • Babel JSX Transform https://bit.ly/3VuSEEh Props
8. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ ReactJS • With internal state • Lifecycle methods • componentDidMount (e.g. setup timers/fetch) • componentWillUnmount (e.g. cleanup timers/cancel fetch) • ...and others • Re-renders when either props or state change. • Helps you read legacy codebase. Class Component
9. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ ReactJS • State updates maybe batched. • Keep a local memory of component. • Used for re-rendering UI on change. • this.setState(<changing-state>) • State updates are async. • State update is merges with existing state. State (Class Component)
10. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ ReactJS Lifecycle Methods
11. https://playcode.io/1045272 Demo Time
12. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ ReactJS • ReactJS JSX Docs: https://beta.reactjs.org/learn/add-react- to-a-website#react-without-jsx • DOM Element Properties: https://developer.mozilla.org/en- US/docs/Web/API/Element#instance_properties • DevDocs Reference: https://devdocs.io • Thinking in React: https://beta.reactjs.org/learn/thinking- in-react • Lifecycle Methods: https://reactjs.org/docs/react- component.html#the-component-lifecycle Relevant Resources
13. 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/gfbvF2uXRUNdSDWeosfHgb or Join at slido.com #2207516
14. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ ReactJS • Build a Calculator App (Class components) • It should have a <DisplayResult /> comp. • It should have operand buttons (0-9) • It should have operator buttons (÷×-+) • It may support brackets. • Need not be interactive. • Think your own idea... Exercise
15. QUESTIONS? React out via abhisek.pattnaik@impelsys.com https://about.me/abhisekp