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.
5 Days
Contact us for pricing
 

Prerequisites

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 in 2025
Thinking in React
Some React anti-patterns
Understanding Virtual DOM
Component lifecycle
Integrating with other libraries
ReactJavaScriptWeb DevelopmentModern Web DevelopmentReact NativeFront End Web DevelopmentFullstack Web DevelopmentMERN Stack