React with TypeScript

Overview

This course combines our React and TypeScript training courses to provide a comprehensive overview of how to build modern SPAs (Single Page Application) using two of today's most compelling technologies.

React is a 2nd generation web framework, created by Meta to simplify the creation of complex, browser-based Single Page Applications. It offers a declarative, component-based approach that enables the rapid creation of SPAs without resorting to the custom attributes and dirty checking used by Angular. The React component model is at its best when combined with modern JavaScript (ES2015+) or (even better) TypeScript.

TypeScript is a type safe superset of JavaScript that allows us to write clean, simple code that runs anywhere JavaScript does. Unlike other languages that also transpile to JavaScript, the interop between JavaScript and TypeScript is a primary engineering concern. As a superset, all JavaScript skills and legacy code are readily reusable. TypeScript's type safety brings many additional benefits over JavaScript, including catching bugs at compile time instead of run time, advanced static analysis tooling, powerful refactorings, better IDE experience, and much more.

Outline

Introduction and Setup

• Why do we need TypeScript?
• What is Transpilation?
• The difference between the TypeScript compiler and Babel
• Setting up a build environment with Webpack
• Support for TS in the IDE
• Configuring TypeScript via tsconfig.json
• Decoding the transpiled output

TypeScript Fundamentals

• The basic types supported by TS
• The power of type inference
• Comparing any and unknown
• The difference between Casting and Type Assertions
• TypeScript as a superset of Modern JavaScript
• Enhancements to function declarations
• Using function types and higher order functions
• How function overloading works in TypeScript
• Numeric, String and const enumerations

Object Oriented TypeScript

• The TypeScript class model in depth
• Access modifiers and support for JavaScript private
• Enforcing contracts via interfaces
• Readonly properties and Accessors
• Support for generic types and constraints

Advanced TypeScript

• Advanced features of TS interfaces
• The difference between object literals and type literals
• Using string and number literals as Types
• Type Aliases, Unions and Intersections
• Smart Casting and Type Guards
• Defining mapped types and the infer keyword
• Utility types and type programming
• ts-toolbelt and utility-types
• Using class Decorators
• Understanding Symbols
• Generator functions
• Writing asynchronous TypeScript

Testing TypeScript

• Mock objects in a strongly typed world
• Leveraging the Builder pattern
• Testing asynchronous TypeScript

Introducing React

• How Angular and React evolved from earlier frameworks
• Overview of the React architecture and the Virtual DOM
• The trade-offs between a Virtual DOM and dirty checking
• Using the JSX syntax to create and initialise React Elements
• Comparing coding in React to Angular
• Setting up a project for React development

Getting Started with React

• Creating basic components that use JSX
• Using properties to pass data to components
• Nesting and managing parent-child relationships
• Transpiling both JSX and ES6 using Babel
• Adding Jest to unit test your components
• Using snapshots for rapid unit test construction
• Verifying component UI structure programmatically

Building Single Page Web Applications

• Using the lifecycle callbacks for React components
• Persisting values using the state property
• Designing hierarchies of components for complex UIs
• Interacting with RESTful services
• Modularising your design for unit and integration testing
• Building and testing a complete SPA-based Web App
• Adding Routing to your application
• Optimising performance by removing redundant renders

React Hooks

• Functional Components vs Class Components
• Reselect's evolution into React Hooks
• Managing state with useState
• Adding side effects with useEffect
• The importance of memoization to performance
• Leveraging useMemo and useCallback
• Writing custom hooks

Styling React Apps

• Identifying styling options
• Global styles and avoiding name collisions
• Encapsulating styles using CSS Modules
• Inline styles for dynamic styles
• Using styled-components for dynamic styles

Advanced Topics (Optional)

• Lazy loading components and code-splitting
• Accessing references to HTML elements
• Customising create-react-app
• Internalisation using react-intl
• End-to-End testing with Cypress

Combining React with Redux (Optional)

• Problems when managing complex state in SPAs
• Using a framework to centralise and manage state
• Creating and using Stores, Actions and Reducers
• Manipulating your data as a sequence of transitions
• Using Redux Toolkit to reduce boilerplate
• Grouping state, actions and reducers into Slices
• Asynchronous actions, thunks and Redux middleware
• Adopting Redux Thunk as your default Redux middleware
• Advantages of Redux Saga for more complex scenarios
• Redux dev tools

Requirements

React with TypeScript course delegates must be proficient JavaScript developers. A primer in the languages can be provided to level set all delegates to the latest language features.