Reeeeeeact❗️🤘🏽

But first, WiFi password 🙌🏽

wifi name: MSFTGUEST
Event code: msevent429km

Hi! I'm Shubham

Full Stack Developer @ Mckinsey Digital Labs

Love React, Vue and Go!

@szanwar22

shubhamzanwar.github.io

Before we start ✋🏽

- Make sure you have node and npm installed. Brownie points for using yarn 🍪🧶

- Make sure you have a code editor of your choice installed. VS Code is preferred.

https://code.visualstudio.com/download

- This workshop assumes basic knowledge of HTML, CSS and JS

I use "guys" as the word to collectively address the group. It is something I'm actively trying to change but please excuse me if I accidentally use it. 🥺🙏🏽

Let's get started 😁

Please clone the repo: https://github.com/shubhamzanwar/react-workshop

git clone https://github.com/shubhamzanwar/react-workshop
yarn / npm i
yarn start / npm start

Our very own shopping cart 🛒🛍

JSX❓🤔

How can I just write HTML is JS? 🤯

export const App = () => <h1>Let's go Shopping</h1>

React Internals 🛠

- Virtual DOM

- React reconciler

- ReactDOM renderer (Pertinent to web only)

Virtual DOM 🛠

- The DOM is a node tree. Traversal through it is easy and cheap.

- The expensive part is update and re-rendering in the browser.

- To remedy this, react employs the virtual DOM strategy by creating a JS object tree to store the structure of the actual DOM nodes

Let's get back to writing some code 👨🏻‍💻

Keys 🔑

- Used to maintain the identity of nodes in an array

- It is an optimisation feature

- Should be unique for each node in the array

Components 🌸

- Individually functioning modular blocks

- There may/may not be a way for two components to communicate with each other

- In our app: Product, Header, Counter

Component Lifecycle 🐛♼🦋

Things to check out later ⏱

- Routing using react-router

- Unit testing components and flows using Jest, react-testing-library

- (Custom) React hooks

- State management

- React.Lazy, React.Suspense

- Create your own renderer (react-reconciler)

Thank you