Course Overview

This is a fast-paced course to get you started building web applications using React. It assumes no prior knowledge of React.

After this course you will be able to build Single Page Web Applications using React:

Building Reusable components
Working with state
Adding routing to your applications
Adding form processing to your applications
Use and build hooks
Use patterns such as higher-order-components and render-props
Use state management solutions (Redux, Context)
Best Practices

After a few introductory labs,you will be working on non-trivial recipe application with all sorts of real-project problems (and their solutions)

Course Prerequisites

Students for this course will be familiar with JavaScript and have a strong understanding of HTML/CSS. Ideally people are familiar with ES6 (arrow functions, import/export, classes, fetch API). It is also helpful if students are familiar with a more "Functional" way of developing JavaScript. We recommend to follow our Introduction to Modern JavaScript and Advanced JavaScript for Front-end Developers coures before.

Outline

Introduction

Understand the rationale behind React
Define the scope of the React library
Understand the overall architecture of React
Discuss how react follows Declarative programming and how it uses concepts from Functional Programming
Contrast with other popular frameworks and libraries (e.g., Vue, Angular)
Introduce react basic concepts: Elements, Components, JSX, Props, State
Understand the virtual dom and how reacts performs reconciliation
Discuss toolchains and in particular Create React App
Recap of important ES6 features

Elements, JSX and Components

JSX and Elements

Understand the JSX expression syntax
Understand what it transpiles/compiles into
Embed javascript expressions inside your JSX
Perform conditional rendering (using different techniques)
How to create dynamic css class lists (and discuss libraries which may help with this)
Working with lists
Understand the need for a key when using lists

Components (Basics)

Although class-based components are no longer the primary choice for building React applications in most modern projects, we include them in this course to provide a thorough understanding of React's underlying principles and lifecycle methods. This foundational knowledge is crucial for grasping how React operates. After covering class-based components, we will transition to using functional components and explore the powerful features of hooks.

Define ES6 class components
Define functional components
How to work with props
Understand what components transpile to
Discuss composing a User Interface into components
Understand and use the children prop
Add type information of a component's props using PropTypes

State and Life-cycle

State

Understand the difference between props and state
How to initialise state (using different techniques)
Changing/merging state using setState
Understand the relation between setState and render
How to update existing state
Using props when changing the state
Understand batching
Discuss react dataflow from state to props
How to transfer props to children

Life-cycle

Understand the React Life-cycle
What triggers state transitions (between mounted, update and unmounted)
Details discussion of the different callback handlers (e.g., componentDidMount, getDerivedStateFromProps etc...)
Briefly discuss the deprecated callback handlers
Discuss common pitfalls and gotchas using these methods.
How to deal with state based on side effects (e.g., fetching data)
How to deal with state based on props pure
How to deal with state based on props side effects
How and where to use a REST API (using ES6 Fetch and Axios)

Hooks

Introduce React Hooks
Understand how Hooks impact application design
Towards only functional components
List which features you can hook into*
Introduce and use the useState hook
Introduce and use the useContext hook
Introduce and use the useEffect hook
Discuss other hooks (useRef, useCallback etc.)
Using hooks with redux
Introduce and use useSelector and useDispatch

Routing

Discuss different routing libraries
Introduce and use react-router (including different routers)
How to define routes using <Routes> and <Route>
List the various matching techniques
Using Path parameters
Defining nested routes
Using exclusive routing without switch
Use the different rendering techniques (element and children)
Detailed discussion on the different rendered properties (useParams, useLocation, useNavigate)
Use declarative navigation (Link, NavLink, Navigate, etc.)
Using custom Location objects
Passing state with the state property in navigation
Imperative navigation using the useNavigate hook

Forms

Understand controlled and uncontrolled components
Create and manage controlled components
How to use the various form elements in React (input, select, etc.)
Adding validation
How to handle form submit
Introduction to React Hook Form

Patterns

Discuss techniques to make code more DRY

Higher Order Components

Introduce Higher Order Components (HoCs)
Building and using HoCs
Best practices when defining HOCs
Composing multiple HoCs

Render props

Introduce the render-prop pattern
When to use render-props components (RPC)
Using and defining render-props components (RPC)
Best practices when defining HOCs
How to avoid callback-hell

State Management

Discuss different techniques for application state management

Flux & Redux

Introduction to Flux
Understand the one-way data flow
Ways of implementing Flux
Understand the architecture of Redux
Defining stores
Understand the concept of Reducers
How to organise reducers
Use action creators
How to dispatch actions
Understand and use redux middleware
How to deal with asynchronous actions (e.g., when using a Rest API)
Asynchronous actions with Redux Thunk
Using Redux Saga to manage the asynchronous lif-cycle
Best practices in structuring your Redux application

React Context

Understand the architecture of React Context
Discuss use-cases for using Context
Defining contexts
Creating Providers and Consumers
Discuss gotchas when using contexts

React platforms (overview, time-allowing)

Introduction and overview of React Native
Overview of Server-Site-Rendering (SSR) (using Next.js)
Using react as a Static-Site-Generator (SSG) (using Gatsby and GraphQL)

React Masterclass

4 days