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