Table Of Contents

29-01

• traditional vs multipage apps
• SPA's
• modules and exports
• why react is better
• installation
• basics of react
• why JSX? and how is it different from JS
• class vs function based components
• how to add bootstrap cdn links in react project
• named vs default exports
• props
• state and handling events
• propTypes, default propTypes
• difference between state and props

01-02

• Differences between react 17 and react 18.
• How to convert react17 app to react18 compatible
• Inheritance, Polymorphism, Props

03-02

• counter-app using setstate in class based components using binding
• sixth-app (discussing state in class based components, passing state from parent component to child component)

04-02

• discussing react-router setup
• discussing axios and contextAPI
• discussing lifecyle methods
  • Mounting (created)
  • Updating (new updates are made on already existing component)
  • Unmounting (dead)

05-02

• form-app (Form using 1 component in class based components)
• newform-app (Form using 2 components and multiple fields in class based components)
• fifth-app (Form using 2 components in class based components)

06-02

• architecture pattern (MVC pattern)
• what pattern does react follow?
• How all technologies in MERN work together?
• DOM vs Virtual DOM

08-02

• functional component vs class based components (an intro)

10-02

• set the array data state by fetching data from an API enpoint via axios, extracted each element within the array using map and passed it as props to other components
• we executed prop-drilling using class based components

12-02

• React intro
• NPM vs NPX
• dependencies vs devDependencies
• Babel
• storage mechanisms (cookies, local storage, session storage)

13-02

• create counter app using react CDN links (not CRA app)

15-02

• OOPS
• Prototype
• Protype chaining
• Creating custom prototypes
• Inheritance
• Imperative vs declarative coding

16-02

• fetch data using fetch and axios and their difference

17-02

• GET vs POST in axios
• controlled vs uncontrolled components
• submitting form data to the API endpoint using axios.post

19-02

• difference between react component and react element and html element
• weather-app (using openweathermap api) completed

20-02

• tictactoe game

21-02

• quotegen-app (generates random advice from the API endpoint using axios in class based components)
• audio-app (how to import music into your app using Howl and Howler hooks)

22-02

• classcode (react with CDN links, were trying to retreive every element of aray using map)
• insta-UI (simple insta UI in html and css)

23-02

• change data of parent component from child component using callback function
• discussing 3 basic lifecycle methods

25-02

• context-app (context app using CDN links and contextAPI in class based components)
• pracapp (changing data from child to parent component using callbacksin class based components)
• classcode (react app with CDN links)

01-03

• Create ecom app using react-redux using fakestoreapi.com before redux v8 in class based components (fix error)

02-03

• create redux counter app using class based components

03-03

• classcode (storing data that user entered inside redux in class based components and retreiving it)

05-03

• redux (redux complete intro in class based components, with example)

07-03

• discussing useState() react hook in functional components and creating a simple class functionality

08-03

• prac-app (Display contents of API on DOM using axios in function based components)
• pracapp2 (redux in function based components)
  • we discussed how we have to use useSelector and useDispatch hook instead of mapDispatchToProps used in class based components

10-03

• classcode (useMemo() hook and memoization)
• usecallback (useCallback() hook and react.memo)
• usecontext (discussing useContext() )
  • useContext() in functional components and contextAPI in class based components
  • Doubt (If contextAPI can be used in both function and class based components, but causes callback hell, then why would we use it in class based components, is there any alternative to it)
• useeffect (discussing useEffect())
  • also discussing Lifecycle methods in depth
• usememo
  • also discussing pure components vs impure components
  • first order function vs higher order function
  • useMemo() hook
  • difference between usecallback and useMemo
• userefhook (discussing useRef() hook)
  • controlled vs uncontrolled form inputs
• userefhook2
  • useRef vs useState difference

12-03

• classcode (discussing react-router advantages)
• classcode2 (creating a movie db app using OMDB API and MUI) part 1

13-03

• movies-app (using routing) part 1
• prac-app (discussing state lifting)
• ecom (basic ecom app styling)

14-03

• browserRouter vs HashRouter (make notes on this)
• routeparameter (using query and path parameter hooks in HTTP requests)
• routerapp (install and setup react-router)
  • protected/ private route
• withvsdyanamic (WithRouter vs DyanamicRouter) make notes

15-03

• classcode (Audio App using Napster API) - part 1
• formvalidation (Handle and validate react forms without a library)
• formik (Handle react forms with formik library and adding yup for form validation)
• form-validationlib (Handle and validate react forms with a library)
  • formik
  • yup
• formapi (Send form data to API)
• muiapp (creating image gallery using MUI and unsplash API)
• restspread (difference between rest and spread operator)
• webpack (webpack in depth)

18-03

• classcode (react-router setup and implementation)
• movies-app (implemented dyanamic routing for query and path parameters) part 2

reacthooks

• useState hook
• useReducer hook
• useEffect hook
• todolist-app (using useState and useEffect)

reactredux

• counter app using function components in redux and viewing redux using reduxdevtools chrome extension

17-05

• VanillaJS (we created modular exports using vanilla js)
• ReactJS (we created modular exports using react CDN links)

18-05

• discussing conditional rendering and passing props from parent to child component
• ReactJS (creating toggle app using react CDN links)

20-05

• different ways to write callback functions
• prop drilling
• data passing from child to parent
• state management using useState
• array desructuring

23-05

• why cant we do direct DOM manipulations in react?
• setting event inputs using states
• password matcher app
• template (basic react CDN link template)

24-05

• project1 (Password generator) Password Generator
• project2
  • like-dislikeounter
  • password matcher
  • when user changes the color from input, we want to render those changes on screen

26-05

• sampleapp
  • discussing useEffect()
  • lifecycle using useEffect()
• junefirst
  • discussing useRef()
  • comparing DOM with useRef()
  • ref forwarding
• proptypes
• memoryapp (using React CDN links)

02-06

• geekconnect (using MUI created social media app) - part 1
• context api vs usecontext, controlled vs uncontrolled components, pure function vs impure
• classcode (Image Gallery using react-bootstrap library and unsplash API) - part 1 Part 1- Image Gallery
• app1 (Image Gallery using react-bootstrap library and Unsplash API) - part 2 Part 2- Image Gallery

07-06

• app1 (discussing higher order component in class and function based components, SPA's then react-router in depth)
  • we discussed these react-router hooks here:
    • useNavigate()
    • No match route
    • dyanamic route
    • dyanamic route nesting
    • useLocation()
• app2 (Query parameter and path parameter, useParams() and useSearchParams())

09-06

• discussed som basic JS output questions using truthy and falsy concept
• geekgallery (Part 3 of Image Gallery in react-bootstrap)
  • we integrated useParams() and useSeaarchParams()
  • Part 3- Image Gallery

16-06

• redux intro
• light and dark theme redux

19-06

• add to cart ecommerce store Deployed Link Responsive Design via MUI and React-Bootstrap, Axios, Redux, Dyanamic Routing, Hooks

22-06

• styled components

23-06

• geekify (music app)
  • part 1- music app
  • part 2- styling left
• geekify 2 final app
• tailwind-app (contains readme and explanation) [mistake: installed index.css in both dist and public file]
• tailwindtwoapp (praticing tailwind implementation) [resolved mistake in this app]

26-06

• article newspaper app with comments under div
• react-redux (v8 new method), react-router, Material-UI, axios

03-07

• Tic-tac-toe

04-07

• bindapp (this, call, apply, bind, why do we need to bind event handlers in react)
• bindappjs (how call, apply, bind works?, why do we bind?)
• bubbling
• capturing
• class components (lifecyle methods in class comps, custom hooks, context api)
• reduxclass (redux in class based components, debouncing and throttling)
• suspense (react suspense and code splitting)
• contextapi (contextAPI in class components)
• customhook (creating a custom hook - offline detector)

---

Deploying a React App

• Deployment to heroku app: https://github.com/reem-shaikh/heroku-app
• Deployment to Git pages: https://github.com/reem-shaikh/react-pages
• Deployment to Firebase: https://github.com/reem-shaikh/firebase-app
• Deployment to Netlify: https://github.com/reem-shaikh/netlify-app