What you’ll learn¶
- State Management in React
- Typescript with React
- Data fetching
Installation and Tool Setup¶
Follow the instructions to install the node version manager program.
Install the latest LTS version of NodeJS
Reopen your current terminal
- Go to https://github.com/coreybutler/nvm-windows/releases and download the latest
- If prompted, install and run through the setup process (logout/login)
Once installed run this command to install the latest version of NodeJS
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.
Install Yarn using NPM This is quickly done by using the below command:
Log out of your windows account and back in to refresh the programs in your path
Close an reopen a new terminal window to use new paths
Test to see if it works
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.
Download and install here:
yarn install- install dependancies (this might take a minute)
yarn dev- start the dev server
React Libraries and State¶
- Explain react component system and how updates propogate using react devtools
- Explain file structure (entrypoints etc. )
- React uses a virtual dom (faster than reading the real DOM) and compares it to the actual dom in order to calculate changes.
React Devtools demo with a basic premade todo app
useEffect, mounting and unmounting
Router setup, defining routes
params in components useParams
React Todo List¶
Setting up a provider¶
Saving state in local storage¶
Make sure content that isn’t on the screen isn’t rendered.
Industry standard state management
Simple state management
And it goes on and on and on.