Advanced ReactJS Programming

I. Overview:

     React.js is the most popular JavaScript library you can use and learn these days to build modern, reactive user interfaces for the web.

     This course teaches you React in-depth, from the ground up, step by step by diving into all the core basics, exploring tons of examples and also introducing you to advanced concepts as well.

II. Duration:

40 hours.

III. Prerequisites:
  • HTML + CSS fundamentals are absolutely required
  • Basic JavaScript and React knowledge.
IV. Objectives:
  • Build powerful, fast, user-friendly, and reactive web apps
  • Provide amazing user experiences by leveraging the power of JavaScript with React
  • Manage complex state efficiently with React's Context API & React Redux
  • Learn about routing & route-related data fetching with React Router
  • Learn all about React Hooks and React Components
  • Build standalone React apps & applications connected to a backend via HTTP
V. Course outlines:

1.  Module 1: Working with Fragments, Portals and "Refs"

  • JSX Limitations & Workarounds
  • Creating a Wrapper Component
  • React Fragments
  • Working with Portals
  • Working with "ref"s
  • Controlled vs Uncontrolled Components

2. Module 2: Handling Side Effects, Using Reducers & Using the Context API

  • What are "Side Effects" & Introducing useEffect
  • Using the useEffect() Hook
  • useEffect & Dependencies
  • What to add & Not to add as Dependencies
  • Using the useEffect Cleanup Function
  • Using the useReducer() Hook
  • Adding Nested Properties As Dependencies To useEffect
  • useReducer vs useState for State Management
  • Introducing React Context (Context API)
  • Using the React Context API
  • Making Context Dynamic
  • Building & Using a Custom Context Provider Component
  • React Context Limitations
  • Learning the "Rules of Hooks"
  • Refactoring an Input Component
  • Diving into "Forward Refs"

3. Module 3: Class-based Components

  • Adding a First Class-based Component
  • Working with State & Events
  • The Component Lifecycle
  • Lifecycle Methods
  • Class-based Components & Context
  • Introducing Error Boundaries

4. Module 4: Building Custom React Hook

  • What are "Custom Hooks"?
  • Creating a Custom React Hook Function
  • Using Custom Hooks
  • Configuring Custom Hooks
  • Building a Custom Http Hook
  • Using the Custom Http Hook
  • Adjusting the Custom Hook Logic
  • Using The Custom Hook In More Components

5. Module 5: Working with Forms and User Input

  • Dealing With Form Submission & Getting User Input Values
  • Adding Basic Validation
  • Providing Validation Feedback
  • Handling the "was touched" State
  • React To Lost Focus
  • Refactoring & Deriving States
  • Managing The Overall Form Validity

6. Module 6: Using Redux

  • Redux vs React Context
  • How Redux Works
  • Exploring The Core Redux Concepts
  • Creating a Redux Store for React
  • Using Redux Data in React Components
  • Dispatching Actions From Inside Components
  • Redux with Class-based Components
  • Working with Multiple State Properties

7. Module 7: Building a Multiple pages SPA with React Router

  • Routing: Multiple Pages in Single-Page Applications
  • Project Setup & Installing React Router
  • Defining Routes
  • Exploring an Alternative Way of Defining Routes
  • Navigating between Pages with Links
  • Layouts & Nested Routes
  • Showing Error Pages with errorElement
  • Working with Navigation Links (NavLink)
  • Navigating Programmatically
  • Defining & Using Dynamic Routes
  • Adding Links for Dynamic Routes
  • Understanding Relative & Absolute Paths
  • Working with Index Routes
  • Data Fetching with a loader()
  • Using Data From A Loader In The Route Component
  • Error Handling with Custom Errors
  • Extracting Error Data & Throwing Responses
  • Working with action() Functions
  • Submitting Data Programmatically
  • Updating the UI State Based on the Submission Status
  • Validating User Input & Outputting Validation Errors
  • Reusing Actions via Request Methods
  • Behind-the-Scenes Work with useFetcher()
  • Deferring Data Fetching with defer()
  • Controlling Which Data Should Be Deferred

8. Module 8: Optimization Techniques

  • How React Really Works
  • Component Updates In Action
  • A Closer Look At Child Component Re-Evaluation
  • Preventing Unnecessary Re-Evaluations with React.memo()
  • Preventing Function Re-Creation with useCallback()
  • useCallback() and its Dependencies
  • A Closer Look At State & Components
  • Understanding State Scheduling & Batching
  • Optimizing with useMemo()

9. Module 9: Advanced Redux

  • Redux & Side Effects (and Asynchronous Code)
  • Redux & Async Code
  • Using useEffect with Redux
  • A Problem with useEffect()
  • Handling Http States & Feedback with Redux
  • Using an Action Creator Thunk
  • Getting Started with Fetching Data
  • Finalizing the Fetching Logic
  • Exploring the Redux DevTools

10.  Module 10: Replacing Redux with React Hooks

  • Using the Context API
  • Toggling Favorites with the Context API
  • Getting Started with a Custom Hook as a Store
  • Creating a Concrete Store
  • Using the Custom Store
  • Optimizing the Custom Hook Store
  • Học trực tuyến

  • Học tại Hồ Chí Minh

  • Học tại Hà Nội

Các khóa học khác