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!
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 startOur 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
