<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

<p><strong>Defining the term “Routing”:  </strong>Routing is a process where based on certain actions and requests, the users get redirected to different, corresponding web pages.</p><p>The React Router’s main purpose is the development of <strong>Single Page Web Apps </strong>and defines a wide range of routes.</p>

<p><strong>Why use React Routers? </strong>Displaying multiple views in Single Page React Applications would simply be impossible without React Routers displaying multiple views. Take Facebook, it displays multiple views for every page with the help of React Routers.</p>

Select Correct Answer

Installation

<p><strong>React Routers </strong>require installation as they are not a part of <strong>Core React</strong>. Additionally, to install React Routers developers need to import react-router-dom modules in their application beforehand. The command for that is depicted below:</p>

<p>React contains 3 routing packages:</p>

<p><strong>‣ react-router </strong>contains all the essential functionalities for React Router Applications.</p><p><strong>‣ react-router-dom </strong>is used for the designing phase of<strong> web applications</strong>.</p><p><strong>‣ react-router-native </strong>is strictly used for <strong>mobile apps</strong>.</p>

Router Components

<p>React Router Components are spread out between the <strong>three main categories</strong> of the React Router. They are:</p>

<p><strong>‣ routers (</strong>&lt;HashRouter&gt;, &lt;BrowserRouter&gt;<strong>)</strong></p><p><strong>‣ route matchers (</strong>&lt;Route&gt;, &lt;Switch&gt;<strong>)</strong></p><p><strong>‣ route navigation/changers (</strong>&lt;Link&gt;, &lt;NavLink&gt;, &lt;Redirect&gt;<strong>)</strong></p>

<p>Note, these routers require importing from the react-router-dom that developers should have installed for working with <strong>React Routers</strong>. Follow the line of code below for the syntax.</p>

<p>We’ll be getting into each category and defining the most used router components in upcoming lessons.</p>

Navigation, <Link>

<p>When users click on a link, it’s expected to load a page that’s associated with the said path. An action that should be avoided at all costs is <strong>reloading the webpage</strong>. And most of the time, a single webpage incorporates multiple links. For these reasons, the <strong><samp>&lt;Link&gt;</samp> </strong>component comes in handy.</p>

<p>In a sentence, the <strong><samp>&lt;Link&gt;</samp> </strong>component creates navigation-oriented links for multiple URLs and renders content while avoiding reloading the page.</p>

<p>In the code example (located in a  .js file under the name<samp> <strong>sample.js</strong></samp>) below find the <samp><strong>&lt;Link&gt;</strong></samp> component in action.</p>

<p>Now that we’ve added think links, routes are ready and rendered on the user’s screen. So when users click on<samp> <strong>robots</strong></samp> they will see the changing of the URL and thus corresponding information on robots (same goes for<samp> <strong>humans</strong></samp>).</p>

Write Missing

<p>Complete the code by determining the location of the URL.</p>

Routers, <BrowserRouter>

<p>The react-router-dom provides the <strong><samp>&lt;BrowserRouter&gt;</samp> </strong>router for web applications. They use regular URL paths which entail a well-configured server. </p>

<p>Particularly, your server should conform to the exact page at all URLs that are handled by the client-side React Router.</p>

<p>Find below a standard example of correctly wrapping an <strong><samp>App() </samp></strong>function in a router.</p>

Fill Missing

Matchers, <Switch>

<p>When rendering <strong><samp>&lt;Switch&gt;</samp></strong>, it looks over its children &lt;Route&gt; elements to match the URL to one of their paths. When found, the rendering process will commence. However, in the case when no matches are found &lt;Switch&gt; does not render anything.</p>

<p>To avoid mismatches, developers should use <strong><samp>&lt;Route exact path=&quot;/&quot;&gt;</samp> </strong>that will match the entire URL instead of the first part. Mismatches usually occur when the URL begins with <strong><samp>&lt;Route path=&quot;/&quot;&gt;</samp></strong></p>

<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>

React Advanced

Achievements

Router Components

Learn programming and get hired