React Workshop

Video

What you’ll learn

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

Installation and Tool Setup

NodeJS

Mac/Linux

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

Windows

1. Go to https://github.com/coreybutler/nvm-windows/releases 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
   

Yarn

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
   

Git

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.

Git

Github

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

VSCode

Download and install here:

Visual Studio Code - Code Editing. Redefined

Devtools

React

React Developer Tools

Redux (Optional)

Redux DevTools

Project Setup

Project Template

New Project - Vercel

Commands

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

TypeScript Intro

https://www.youtube.com/watch?v=zQnBQ4tB3ZA

React Libraries and State

https://www.youtube.com/watch?v=Tn6-PIqc4UM

• 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

Hooks

useState

useEffect, mounting and unmounting

useContext

React Router

Router setup, defining routes

then after

params in components useParams

React Todo List

Setting up a provider

UI

Saving state in local storage

Data Fetching

Extras

Virtualisation

Getting Started with React Virtuoso | React Virtuoso

react-window

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

Animation

Production-Ready Animation Library for React | Framer Motion

react-spring

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

React-Bootstrap

And it goes on and on and on.

Comments