Skip to content

React Workshop


What you’ll learn

  • State Management in React
  • Typescript with React
  • Data fetching
  • Virtualisation
  • Redux

Installation and Tool Setup



  1. Follow the instructions to install the node version manager program.

    GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

  2. Install the latest LTS version of NodeJS

    nvm install --lts
  3. Reopen your current terminal


  1. Go to and download the latest .exe release file
  2. If prompted, install and run through the setup process (logout/login)
  3. Once installed run this command to install the latest version of NodeJS

    nvm install lts


If you’re unfamiliar with how to use a package manager I would recommend installing Yarn, an alternative to the built-in Node Package Manager.

  1. Install Yarn using NPM This is quickly done by using the below command:

    npm install --global yarn
  2. Restart

    • Windows

      Log out of your windows account and back in to refresh the programs in your path

    • Mac/Linux

      Close an reopen a new terminal window to use new paths

  3. Test to see if it works

    yarn --version


If you’re using Linux then it’s likely that GIT is probably already installed.

On windows and mac you can install it by downloading and installing the executable/app, here.



If you don’t know what Git is then you can have a quick read of our Intro to Git blog post.

Introduction to Git


Download and install here:

Visual Studio Code - Code Editing. Redefined



React Developer Tools

Redux (Optional)

Redux DevTools

Project Setup

Project Template

New Project - Vercel


  1. yarn install - install dependancies (this might take a minute)
  2. yarn dev - start the dev server

TypeScript Intro

React Libraries and State

  • Explain react component system and how updates propogate using react devtools
  • Explain file structure (entrypoints etc. )

Virtual DOM

  • React uses a virtual dom (faster than reading the real DOM) and compares it to the actual dom in order to calculate changes.

State Updates

React Devtools demo with a basic premade todo app



useEffect, mounting and unmounting


React Router

Router setup, defining routes

then after

params in components useParams

React Todo List

Setting up a provider


Saving state in local storage

Data Fetching



Getting Started with React Virtuoso | React Virtuoso


Make sure content that isn’t on the screen isn’t rendered.


Production-Ready Animation Library for React | Framer Motion


State Management

Industry standard state management

Redux Toolkit | Redux Toolkit

Simple state management

React Hooks for Data Fetching - SWR

Component Frameworks

Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

MUI: The React component library you always wanted

Primitives - Radix UI

Introduction - Semantic UI React


And it goes on and on and on.