Duration: 3 Days

Description

This 3-day course offers a practical, end-to-end introduction to modern React development. Participants will learn how to build dynamic, component-based web applications using React, manage state with hooks and Redux, and integrate APIs. The course also covers routing, performance optimization, testing, and deployment. Through a mix of instruction and hands-on coding, learners will gain the skills to build scalable, production-ready React apps.

Audience

This course is intended for front-end or full-stack developers with basic JavaScript experience who want to learn React. It’s ideal for those transitioning from vanilla JavaScript or another framework and looking to adopt a modern, component-driven approach to building user interfaces. Developers familiar with older versions of React will also benefit from updated practices like hooks and functional components.

Objectives

  • Build and structure React applications using components and props
  • Manage state with hooks and lifecycle methods
  • Handle events, forms, and user input effectively
  • Use React Router for navigation and dynamic routes
  • Integrate and manage data from APIs
  • Implement Redux for scalable state management
  • Optimize performance with memorization and code-splitting
  • Deploy React applications to common hosting platforms

Prerequisites

Participants should be comfortable with HTML, CSS, and ES6+ JavaScript features such as arrow functions and destructuring. Familiarity with basic development tools (e.g., code editors, command line, Git) is expected. Prior experience with React is not required.

Course Outline

Module 1: React Development

  • The Client-Side, Single-Page Application
  • React Ideology
  • Package Management with Node.js and npm
  • Project Structure
  • JavaScript ES6 and Transpilation
  • Development Workflow
  • Bundling and Webpack
  • Debugging ES6

Module 2: Basic Components

  • React DOM Elements and Props
  • JSX Expressions
  • Custom Components
  • Functional Components
  • Extending React.Component
  • Component Hierarchy and Nested Components
  • Props and the Flow of Information
  • Building Components
  • Rendering Components
  • Reusable Components

Module 3: State

  • Input Fields
  • Uncontrolled Components
  • Callback Functions and Class Methods as Callbacks
  • Controlled Components and State
  • Uncontrolled vs. Controlled Components
  • Working with State: Toggling Component Presentation

Module 4: DOM Abstraction

  • DOM Events
  • HTML Elements vs. React DOM Elements
  • DOM Reconciliation
  • List Keys
  • Referencing Browser DOM Elements

Module 5: Architecture with Components

  • Prop Validation
  • Built-In and Custom Validators
  • Data Flow
  • State vs. Props
  • Pure and Stateful Components
  • Container Components
  • Component Composition Strategies
  • Immutability
  • Lifecycle
  • Fetch and AJAX Requests

Module 6: Forms

  • Form Validation Strategies

Module 7: Routing

  • The React Router
  • Route Petameters
  • Active Links
  • Changing Routes Programmatically
  • Injecting Data Sources
  • JSON Conversions

Module 8: Hooks

  • Introduction to React Hooks
  • Using useState and useEffect
  • Custom Hooks
  • useRef, useReducer, and useContext
  • Effect Cleanup and Dependency Arrays
  • When Not to Use Hooks

Module 9: Redux

  • Redux Architecture
  • Store and Reducers
  • Actions and Action Creators
  • Separating and Combining Reducers
  • Using Redux Asynchronously

Module 10: Flux (if time allows)

  • Flux Architecture
  • Stores
  • Actions and Action Creators
  • Dispatchers
  • Using Flux Asynchronously

Module 11: APIs and Deployment

  • Working with REST APIs in React
  • Fetching Data
  • Managing Side Effects and Loading States
  • Error Handling and Retry Logic
  • CI/CD Basics for React
  • Deploying React Apps

Module 12: Performance Optimization

  • Performance Pitfalls in React
  • Using React.memo, useMemo, and useCallback
  • Code Splitting and Lazy Loading
  • Reconciliation Optimizations
  • React DevTools Profiling