<h2>Introduction to the course</h2><p>React Advanced is a course we&#x27;ve created to introduce the more complex side of development.</p><h2>Who is this course for?</h2><p>If you&#x27;re a developer with the basic and fundamental concepts of React down, then this course is meant for you to discover the uncharted lands of React</p><h2>Recommendations for the course:</h2><p>Make sure you&#x27;ve completed our React course to ensure the strong foundation you&#x27;ll be needing here. </p>

React Advanced

<h2>What does this lesson cover?</h2><p>State management is the backbone of every single React application. The importance of the following lesson perfectly aligns with the essential role it takes on in React.</p>

Introduction

<h2>What does this lesson cover?</h2><p>The simple definition of HOCs (Higher Order Components) in React may lead to a bit of confusion.</p><p>This lesson will explain the intricacies that are in use with HOCs in React, including syntax structure, do&#x27;s and don&#x27;t&#x27;s, etc.</p>

Higher-Order Components

<h2>What does this lesson cover?</h2><p>Responding to user interactions is the essence of React events in a sentence.</p><p>Events are triggered even when the user makes the slightest interaction with a web page. In this lesson we&#x27;ll understand the works of events, event handlers, adding events, and so on.</p>

Handling Events

<h2>What does this lesson cover?</h2><p>In React developers should differentiate between Stateless and Stateful components. As each name entails, a Stateful / Class Based Component holds a state, whereas a Stateless Component doesn&#x27;t.</p><p>This lesson expands further on the above definition and developers work with and understand both concepts with the help of code examples and lesson quizzes.</p>

Stateless vs Stateful components

<h2>What does this lesson cover?</h2><p>Composition and Inheritance are the two methods React suggests for using more than one component in an application.</p><p>This lesson will give developers enough knowledge on the two to take their pick in the future.</p><p>Through examples and pro&#x27;s abd con&#x27;s we&#x27;ll compare composition and inheritance in React</p>

Composition vs Inheritance

<h2>What does this lesson cover?</h2><p>Routing is a process where based on certain actions and requests, the users get redirected to different, corresponding web pages.</p><p>In this lesson, we&#x27;ll use React Routing to generate Single Page Web Apps, Router components, Navigation, Matchers, and more.</p>

React Router

<h2>What does this lesson cover?</h2><p>The following lesson will exapnd on the React store as it plays an important role in managing state data and logic of React applications.</p><p>We&#x27;ll also be referring to Flux, View, and other terminology that will help developers digest the topic to its core.</p>

Stores

<h2>What does this lesson cover?</h2><p>React handles the data in forms in 2 distinct ways, the full assessment of those two methods will be the topic of this lesson.</p><p>After defining Controlled Components and Uncontrolled Components in React we&#x27;ll uncover code examples where both methods are utilized to further compare and contrast them.</p>

Controlled vs Uncontrolled components

Lesson Challenge

<h2>What does this lesson cover?</h2><p>For a short preview of Context API, it specifies making data viewable and accessible by a couple of components. This sentence could be reduced to passing global variables.</p><p>Our goal here is to help developers comprehend the purposeful  Context API with the help of lesson quizzes and practice.</p>

Context API

<h2>What does this lesson cover?</h2><p>Refs or references permit components in React to interact with child elements. </p><p>Refs are most commonly used when working with User Interface elements that collect input data from users.</p><p>This lesson will uncover the syntax of refs, its usage, accessing refs, refs&#x27; collaboration with class components, etc.</p>

Refs

<h2>What does this lesson cover?</h2><p>In this lesson, we introduce the React-Bootstrap external package.</p><p>We talk about its dependencies, and how to access the essential ones in order to work with React-Bootstrap effectively.</p><p>Lastly, we present a block of code in which the React-Bootstrap and its structure truly shine.</p>

React Bootstrap

<h2>What does this lesson cover?</h2><p>We&#x27;ll be uncovering the window of opportunities that portals bring to the React table. React suggest portals as a gateway to rendering elements in a separate component. </p><p>Portals are a newer addition to React and hence they&#x27;re extremely fun to work with and they bring in an innovative approach to a hard-to-solve problem.</p>

Portals

<h2>What does this lesson cover?</h2><p>We&#x27;ll be expanding on the the external package: React Hook Form.</p><p>This lesson will briefly introduce the the third-party package, go over its benefits and what it brings to the table. </p><p>In the conclusion we&#x27;ll refer to a code snippet that depicts its usage fully.</p>

React Hook Form

<h2>What does this lesson cover?</h2><p>What goes on in the UI (user interface) of an application is of the greatest concern to any React developer out there.</p><p>Error boundaries introduce an important aspect of the User Interface.</p><p>With Error boundaries, developers will be able to handle errors in a graceful manner, but there&#x27;s so much more to it than the simple interface.</p>

Error Boundaries

<h2>What does this lesson cover?</h2><p>In this lesson, we&#x27;ll be going over the TanStack table.</p><p>After defining the concept as thoroughly as possible, we&#x27;ll move on to how to install it.</p>

React Table

<h2>What does this lesson cover?</h2><p>Till now, we’ve gotten used to rendering methods inside the components. This lesson where we introduce the concept of fragments in React will change the validity of that statement.</p><p>In this section, we will assess the before and after of React application with and without the usage of fragments for developers to visually realize the huge difference. We will also introduce new concepts like keyed fragments and short/shorthand fragments.</p>

Fragments

<h2>What does this lesson cover?</h2><p>It’s easy for websites to get heavy. Over time, with third-party libraries and evolving components, applications develop depth. </p><p>The introduction of code splitting renews the simplicity factor of applications, we&#x27;ll understand what exactly that means in the following lesson.</p><p>In this lesson, we&#x27;ll induce code splitting with the help of error boundaries, avoiding fallbacks, and the import() method.</p>

React Code Splitting

<h2>What does this section cover?</h2><p>The concept of states in React is supported throughout every React application that developers will interact with in the near future.</p><p>React&#x27;s purpose-built API is one of the supporting factors of state management and React state.</p><p>In this section, we&#x27;ll be working towards covering how state management and React State play into the global mission of dynamic React applications.</p>

State Management

<h2>What does this section cover?</h2><p>Responding to user interactions is the essence of React events in a sentence.</p><p>Events are triggered even when the user makes the slightest interaction with a web page. In this lesson we&#x27;ll understand the works of events, event handlers, adding events, and arguments.</p><p>With the help of code-snippets taken from standard React applications, developers will better understand the essence of events and how to work with them.</p>

Events

<h2>What does this section cover?</h2><p>We&#x27;ll be assessing additional essential React complects that lean more on the advanced side.</p><p>As we already know components are the fundamentals of React and we&#x27;ll be working with them with different methods and logic. </p>

<h2>What does the section cover?</h2><p>In this lesson, we&#x27;ll be assessing some third-party or external packages that developers can use to add additional depth to their web applications.</p><p>It&#x27;s important to note that although the use of these packages is not mandatory but recommended in some cases which we will get into in the lesson.</p>

Packages

Overview

What does the section cover?

React Router

React Bootstrap

React Hook Form

React Table