React/Typescript Demo App

Setup

1. Install node.js, get the recommended v8.x LTS version. npm should be automatically added to your path. After install, open a command prompt and run npm. You should be shown some help text.
2. Install Visual Studio Code
3. Add the following extensions to VS Code:
   • Debugger for Chrome
   • TSLint
   • Prettier - Code formatter
   • TypeScript Import Sorter
4. Set the following settings in VS Code. You can paste them directly into the user settings json file.

"files.trimTrailingWhitespace": true,
"breadcrumbs.enabled": true,
"typescript.preferences.quoteStyle": "double",
"typescript.updateImportsOnFileMove.enabled": "always",
"typescript.preferences.importModuleSpecifier": "relative",
"[typescript]": {
    "editor.formatOnSave": true
},
"importSorter.importStringConfiguration.quoteMark": "double",
"importSorter.generalConfiguration.sortOnBeforeSave": true

Build

1. Use a terminal to navigate to the project folder. Any terminal (cmd, powershell, git bash, ...) should work. You can also use the terminal built into VS Code.
2. Run npm ci to restore packages.
3. Run npm run build-dev to build the frontend. If you're going to make changes, use npm run watch to have webpack continue running and auto compile on save.

Reading List

• Typescript Reference
• React Docs - Has tutorial, some advanced usage info, and API reference.
• Redux Docs - Basics and advanced make up the Redux tutorial, introduction section is also recommended reading.
• typesafe-actions library - leveraging the TS type system with Redux actions.
• react-redux library - provides the glue between the two (containers).
• react-redux-typescript guide - collection of good info for working with React & Redux in TS.
• redux-thunk
• NOTE This demo uses observables instead of thunk
• redux-observables
• RxJS Observables Overview