Live classes: ReactJS Crash Course

Topic 1: JavaScript Fundamentals (Prerequisite)

• Must-Know ES6 Features for ReactJS
• Const, Let and Var
• Arrow functions
• Destructuring
• Template strings
• Rest parameters and spread operators
• Ternary operator shorthand
• Import and export
• async /await and promises

Topic 2: Introduction to React

• Course Introduction
• What is ReactJS?
• Benefits of using React
• Setting up the React Project and Environment
• Creating a new React project using Create React App or Vite Tool
• Project structure overview
• Setup VScode
• Reactjs code snippets
• React-Native/React/Redux snippets for es6/es7
• SX HTML <tags/>
• Prettier - Code formatter
• Basic Concepts
• What is component
• JSX syntax introduction
• Define ui elements
• Conditional Rendering
• Render Components
• Creating list
• Handle Events
• React Fragment

Topic 3: React Components, Props and State

• Props
• Passing props to components
• Default props
• PropTypes (optional, for type checking)

(ref : https://www.npmjs.com/package/prop-types)

• State
• About state and hook useState
• Update State values
• Sharing State between Components
• Lifting state up
• Passing Data Deeply with Context API (Hook: useContext)

• Components in Depth
• Component lifecycle methods (in detail)
• Refs
• Forms and controlled components
• Recommendation : Formik for form management
• HOC Component (High Order Component)
• ReactJs Devtool

Topic 4: React Hooks and Custom Hooks

• useEffect
• Custom Hooks

Topic 5: State Management

• State Management
• Using React Context API for state management
• State management with Redux Toolkit (optional, depending on project requirements)

Topic 6: API Integration

• Introduction to Fetch and Axios
• Introduction to Fetch
• API Integration approach
• Handling responses and errors
• Common API error (400 Bad Request, 401 Unauthorized, 404 Not Found, etc.)
• Debugging API Calls

Topic 7: React Router

• Introduction to React Router
• Routing basics
• Nested routes
• Dynamic routing
• Route parameters
• Navigation
• Protected routes

Topic 8: Styling in React

• Inline styles
• CSS or SaSS
• Material UI or other UI libraries (optional, depending on project requirements)

Topic 9: Advanced React Topics

• Performance optimization
• PureComponents
• Memoization (useCallback and useMemo)
• Virtualized lists (React Window)
• React Lazy
• Profiler
• Error handling
• Error boundaries

Topic 10: Project Building

Topic 11: Resume Review