ReactJS Training Day 5 | Abhisek Pattnaik | Impelsys

Context API

React Router

Transcript

1. WELCOME TO REACTJS TRAINING DAY 5 ...by Abhisek Pattnaik Senior Software Engineer CE Services, Heart Bangalore
2. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. 1. Context API 2. Pages with React Router 3. Ecosystem (libraries) 4. Resources 5. Exercise Agenda
3. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ ReactJS • Pass data through components without prop drilling. • React.createContext - create a context • useContext(ctx) - use a context • Global state management vs useState (local component level statement) • Use only iff many components use the same state at different nesting levels. • Context.Provider and Context.Consumer Context API (Built in State Management)
4. Context API Demo Time
5. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ ReactJS • Built by Ryan Florence and Michael Jackson • <BrowserRouter/> (createBrowserRouter), <HashRouter/>, <MemoryRouter/> • BrowserRouter– clean url, navigation bar (server backed) • HashRouter- `#` based routes (no control of server) • MemoryRouter– In memory array based (for testing) • <Route/> – A particular route (may/may not have child routes) • <Outlet/> – Where the child route(s) are renders for nested routing • <Routes/> - Within which Routes are rendered (createRoutesFromElements) React Router v6
6. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ ReactJS • loader() and useLoaderData • action() and useActionData • <Route loader={loader} action={action} /> • redirect() – Redirect to another path https://reactrouter.com/ Use React Router
7. React Router Demo Time
8. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ ReactJS • @testing-library – React Testing Library • Storybook – UI Component Preview • react-use – Useful hooks • Styled Components – Isolated Styling • React Select - Flexible input control • Date-fns – JS Date Util • classnames – Conditional classes • XState - Managing UI State with FSM (Finite State Machine) • SWR - React Hooks for Data Fetching • React Query – Data Fetching with caching React Ecosystem
9. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ ReactJS • React Router Tutorial - https://reactrouter.com/en/main/start/tutor ial • React Router Examples - https://reactrouter.com/en/main/start/exa mples • Context API - https://reactjs.org/docs/context.html • useContext - https://reactjs.org/docs/hooks- reference.html#usecontext Resources
10. 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/7a7hfEzXKANxmncoSxFXUP or Join at slido.com #1875957
11. Copyright © 2022 : (Heart Bangalore) Impelsys Inc. All Rights Reserved. I ❤ ReactJS • Create a Catalog Page with Products component with a list of products (pre- defined). • Each product will have a "Add to Cart" button. • Add "Create Product Form" with Product "name", "price per unit", and "availability" (path should show /catalog/add) • Create a Product Page where you can view/edit the product. Path should be /catalog/products/:productId/edit for Edit and /catalog/products/:productId for View. • Reuse same Product component to make view/edit/add possible. • Create a Cart Page with a Cart component with a cart items (/cart) • Each item should have "name", "price per unit", "quantity", "total price". • At the bottom, it should show total "quantity" and "price" of all the items. • Link each Products to /catalog/products/:productId page • Do not use any third-party state management library like redux/mobx/etc. • Think your own UI... Be creative. Exercise
12. QUESTIONS? React out via abhisek.pattnaik@impelsys.com https://about.me/abhisekp