ReactJS Masterclass

Course Overview

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

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

• Building Reusable components
• Working with state
• Adding routing to your applications
• Adding form processing to your applications
• Use patterns such as higher-order-components and render-props
• Use state management solutions (Redux, Context)
• Use hooks for functional components
• 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 rational behind React
• Define 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)

• Define functional components
• How to work with props
• Understand what components transpile to
• Define ES6 class components
• 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)

Routing

• Discuss different routing libraries
• Introduce and use react-router (including different routers)
• How to define routes
• List the various options (exact, strict, etc)
• Using Path parameters
• Defining child routes
• Using exclusive routing with switch
• Use the different rendering techniques (component, render and children)
• Detailed discussion on the different rendered properties (match, location and history)
• Use declarative navigation (Link, NavLink, Redirect, etc)
• Using custom Location objects
• Passing state between views
• Imperative navigation using the History API

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 Formik

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

Redux & Flux

• 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

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

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) (usng Gatsby and GraphQL)