Practical React

Course Description

Following on from the React Developer course this takes a deeper dive into the core features of React, React Router and React Query by exploring more practical real-world examples. This course will give developers who are familiar with React the knowledge they need to deliver real-world React applications.

Duration: 5 days


Understanding of HTML, CSS and JavaScript required. Some familiarity with React is expected but experience with Angular or another component framework would also be suitable.

React Overview

Development environment Installation & first application Overview of React features Functional programming techniques Alternatives to create-react-app

Recap of React Core Features

JSX Components Props Events Component rendering Debugging rendering issues

Advanced React Hooks

What is a Hook? How do Hooks work? Built in hooks useState, useEffect, useCallback, useMemo, useContext, useRef, Advanced use cases for built-in hooks Creating a custom hooks Practical examples of using custom hooks in a React application

Higher Order Components

What is a higher order component Wrapper components Practical uses for higher order components

Recap of Commonly Used React Libraries

ReactRouter ReactQuery

Forms And Databinding

Data binding Form controls Advanced validation techniques Hooks for improving form performance

Creating Applications using UI Frameworks

Bootstrap, PrimeReact Styled Components Creating an Application Adding a MenuBar Responsive Design

Authentication & Authorization

Json-server Serving static content Sample API Authentication Authorization JWT based login Hooks for maintaining login state

Advanced State Management

Understanding State The useState hook What is "prop-drilling"? The useContext hook Introducing Redux Reducers

Next.js Introduction

What is next.js create-next-app React Server Components Client and SErver Rendering Practical Next.js application

React Best Practices

New features in React 2022 / 2023 Thinking in React Some React anti-patterns Understanding Virtual DOM Component lifecycle Integrating with other libraries

React JavaScript Web Development Modern Web Development React Native Front End Web Development Fullstack Web Development MERN Stack