React Starter Workshop

Listing out some fundamental concepts in react for various workshops/hands-on coding sessions.

Check out my full React Tutorial

S.No	Topic	Event/YouTube link
1	Understanding the Basics - JSX + State + Props	https://www.youtube.com/playlist?list=PLGyA74h_S9NqJvvQ7-l9bUHHS6bMCkgo0
2	Lifecycle Methods + Making Network Requests	https://www.youtube.com/playlist?list=PLGyA74h_S9NppHNrzUSjMQbnuHS9jlAcY
3	Understanding Flexbox	https://www.youtube.com/playlist?list=PLGyA74h_S9NrkKnaIrYeOolru4EakosHY
4	React + TypeScript	https://www.youtube.com/playlist?list=PLGyA74h_S9NrjM7mUiSmpKfUntwEcgMB3
5	React Portals	https://www.youtube.com/playlist?list=PLGyA74h_S9Nq-rRLG5pqEiaJ87H22S3BW

Set up a new CRA

1. npx create-react-app playground
2. cd playground
3. npm start

Things to discuss during webinar

1. Why React?
2. React Components
3. Sample Component Architechture
4. One Way Data Flow In React
5. JSX
6. State
7. Props
8. Lifecycle Methods
9. React Hooks
10. lifecycle methods vs useEffect

Why React?

1. Fast Learning Curve
2. Reusable components
3. Fast Render with Virtual DOM
4. Great Dev Tools
5. Great Dev Community
6. Proper Modularization
7. Clean Abstraction
8. React Native, React Desktop

React Components

React Sample Component Architecture for Pokedex App

See the app in action here: http://madhavbahl.tech/react-pokedex

React Component Hierarchy and One Way Data Flow

Sample Application

Let's build a counter app!

React Lifecycle Methods

React Hooks

useState hook

Let's you use state in functional components

const [ state, setState ] = useState<StateSchema>(initialState)

useEffect hook

Similar to lifecycle methods, but different :D

useEffect(() => {
  // Method you wish to run
}, [dependencyArray]);

useEffect dependency array

Different cases of dependency array

1. [] - Empty array

Runs at the initial render only!

useEffect(() => {
  console.log ("This will run at initial render of the component only")
}, []);

2. Array with some data - [data]

• runs at initial render
• runs whenever data changes

useEffect(() => {
  console.log ("This will run at initial render")
  console.log (`This will also run when data - ${data} - changes`);
}, [data]);

3. Nothing...

• Runs at initial render
• Runs at every re-render

useEffect(() => {
  console.log ("This is going to run initially + everytime when anything changes");
});