Course Overview

Planning on taking your programming and app-building skill to another level? This course is for you.

Requirements to take course: Applicant should have a solid understanding of HTML, CSS and JavaScript fundamentals, and es6 features (e.g arrow functions, import/export), along with a computer connected to the internet.

Aim: Students will have a fundamental and advanced knowledge of React concepts and be able to build React apps.

Week 1: React Essentials
=>Components
=>Jsx
=>Props

Week 2: React Essentials 2
=>State management and working with hooks

Week 3: React Essentials 3
=>Dynamic rendering
=>Conditional rendering
=>Alternative to jsx

Week 4: Practice Project
=>Two practice projects are to be assigned

Week 5: Styling React Components
=>Using vanilla css; its pros and cons
=>Using inline styles
=>Using CSS modules; its pros and cons
=>Using Styled Components; its pros and cons
=>Using Tailwind; its pros and cons

Week 6: Debugging React Apps
=>Understanding Error messages
=>Using Browser Debugger and dev tools
=>Understanding React’s “Strict Mode”
=>Using React dev tools
=>Coding exercise

Week 7: Using Refs and Portals
=>Intro to refs
=>Refs vs State values
=>Forwarding refs to components

Week 8: Practice Project

Week 9: Context API and UseReducer Hook
=>Prop drilling; Its disadvantages
=>Intro to Context API
=>Creating Context
=>Consuming Context
=>Intro to UseReducer hook

Week 10: Practice Project

Week 11: Handling Side Effects and UseEffect Hook
=>What is a side effect?
=>Intro to useEffect hook
=>Intro to useCallBack hook

Week 14: Practice Project

Week 15: React Optimization Techniques
=>Component tree definition
=>memo()
=>Understanding useCallBack hook
=>Understanding useMemo hook
=>Understanding the virtual DOM

Week 16: Class Based Components
=>How Class based components manage states
=>Error boundaries

Week 17: Sending HTTP Requests (Connecting to a Database)
=>Using get requests
=>Understanding async await
=>Handling Loading State
=>Handling Errors
=>Sending data with POST requests
=>Deleting data

Week 18: Building Custom React Hooks
=>Creating a custom hook
=>Managing and returning state values
=>Creating a flexible custom hook

Week 19: Working with Forms and User Inputs
=>Handling form submission
=>Getting values via refs and hooks
=>Getting values via FormData and Native Browser API’s
=>Reseting Form
=>Methods of validating forms

Week 20: Practice Project

Week 21: Intro to Redux
=>How Redux works
=>React vs Context API
=>Redux with class based components
=>Redux toolkit state

Week 22: Advanced Redux
=>Redux and Side Effects
=>Redux & async code
=>Using Effect with redux
=>Exploring Redux dev tools

Week 23: Practice Project

Week 24: Adding Authentication to React Apps
=>How authentication works
=>Validating and adding user login data
=>Adding Route protection
=>Adding Automatic logout
=>Managing token expiration

Week 25: Deploying a React App
=>Understanding lazy loading
=>Adding lazy loading
=>Building code for production
=>Deployment Example

Week 26: React Query
=>Understanding and configuring query behaviors
=>Enabled and Disabled queries
=>Updating data with mutations
=>React query and react router

Week 27: Next.js Essentials
=>Creating a Next.js project
=>Adding Routes
=>Navigating Routes
=>Adding Custom Components
=>Optimizing Images with Next.js image component
=>Adding a loading page
=>Handling errors
=>Deploying a Next.js project

Week 28: Animating React Apps
=>Intro to Ffamer Motion
=>Animating between conditional values
=>Animating layout changes
=>Animating Shared Elements

Week 29: React Patterns and Best Practices
=>Sharing cross components States
=>Handling keys dynamically
=>Working with debouncing

Week 30: Replacing Redux with React Hooks
=>Why and when you should

Week 31: Testing React Apps
=>Testing user interaction and state
=>Testing Connected Components
=>Testing asynchronous code

Week 32: React + Typescript
=>Installing and using typescript
=>Working with arrays and objects types
=>Understanding type inference
=>Creating a react + typescript project

Week 33: Capstone Projects