Introduction

This is a sample npm project created to teach the basics of TypeScript and React.

Setup Steps:

1. Download Node
2. Clone this repo (do not use a networked drive like OneDrive or Google Drive)
3. Open the main folder of this repo in your terminal, and run npm install. This will download the relevant JS libraries in the "node_modules" folder - don't delete this
4. In the terminal, run npm run dev to start the development server. This has hot reloading so as soon as you change the src file and save it, the web browser page will update.
5. Install the following VS Code extensions (if you haven't already):
   • "ES7+ React/Redux/React-Native snippets"
   • Any additional typescript extensions you find
6. Win

Introduction to programming languages used:

These links are for quickly learning the syntax / programming methodologies of the languages we will need for the project, you don't need to learn it all, but these act as very good references for syntax / common functions in the respective languages

• Javascript Summary(learnXinY)

• Typescript Summary (learnXinY)

• [Less important] HTML Summary (learnXinY)

• [Less Important] CSS Summary (learnXinY)

Stuff to watch:

• Typescript in 100 seconds

• React in 100 seconds: introduces the concept of react

• React useState hool: introduces the concept of state to react components

• React useContext hook: introduces the useContext hook to allow state to be accessed by several components

• [optional]React budget app tutorial: this is the same project that is in this repo, but uses JS instead of TypeScript. This video walks through the development steps, but is a little long. However it is very informative and shows an interative improvement process, so I strongly encourage watching, even on 1.5x speed or something.