Introduction to React using TypeScript

Software Requirements

• Google Chrome and/or Firefox with Firebug
• Other modern browsers as desired
• IDE/development environment of your choice
• Other free software and lab files that Accelebrate would specify, including Node.js

React and TypeScript Training Outline

Introduction

Package Manager (npm/Yarn)

• npm
• What is Node.js?
• What is npm?
• Using npm
• npm Scripts
• Yarn
• Why Yarn?
• npm vs. Yarn
• Installation
• Using Yarn

Compiler Setup

• Setup TypeScript Compiler (tsc)

ES6/ES2015

• Classes
• Scope (var, let, const)
• Arrow Functions
• Modules
• Template Literals
• Default, Rest, Spread
• Default
• Rest
• Spread
• Destructuring
• Optional Parameters
• Object.assign()
• Object Initializer

TypeScript

• Understanding TypeScript, ES6, and ES5
• How TypeScript Works
• Who is Behind TypeScript?
• Type Annotations
• Classes
• Fields
• Parameter Properties
• Member visibility (public, private, protected)
• Automatically Import Modules
• Nullable Parameters
• Interfaces

Project Setup (Create React App)

• Create new Project
• Folder Structure
• Browser Support
• Styles and Assets
• Dependencies

Best Practices (Code Organization & Conventions

React Overview

• Why React?
• What is it?
• Why it is useful?
• Angular, React Compared
• Web application architectures
• Server-side web application architecture
• Single-page web application architecture
• React Architecture

Elements

• Hello World in JavaScript
• Hello World in React

JSX

• Replacing createElement
• Embedding Expressions
• Specifying Attributes

Virtual DOM

Components

• Creating an Element
• Create a Function Component
• Rendering a Component
• Creating a Class Component
• Composing & Reuse

Props

• Read-only
• String Literals vs. Expressions
• Function vs. Class Components

Events

• Listening/Subscribing/Wiring to an Event
• In Vanilla JavaScript
• In React: Function Component
• In React: Class Component
• Binding
• Why Binding is Necessary?
• Class Method
• Arrow Function
• Passing Parameters
• Using Arrow Functions
• Using Bind
• Handling Events
• Using Arrow Functions
• Using Bind
• Synthetic Events

State

• Definition
• State in Function Components
• useState Hook
• State in Class Components
• Mutating state with setState
• Using State Correctly
• Data Flows Down

Side Effects & Lifecycle

• useEffect Hook
• What does useEffect do?
• Using useEffect
• useEffect Demo
• What are Lifecycle Methods
• Understanding Mounting
• Common vs. Less Common Methods
• Using Lifecycle Methods

Conditional Rendering

• If, else
• Conditional Operator (?)
• Logical (&&) Operator

Lists

• In Vanilla JavaScript: for loop, array.forEach, array.map
• In React: using Elements, Components
• Why Keys are Needed

Component Architecture

• Reuse
• Component Communication
• Design Patterns
• Container and Presentation Components
• Composition vs. Inheritance

Forms

• Controlled Components
• Reuse of Change Logic across Multiple Inputs
• Handling Form Submission
• Controlling Other Form Elements: select, textarea, number
• Validation
• Uncontrolled Components

HTTP

• Axios library
• Fetch API
• Using with React (HTTP GET)
• Refactoring for Reuse
• HTTP POST, PUT, DELETE

Routing (React Router)

• Installation
• Basics
• Handling Not Found (404) (as time permits)
• Parameters (Url & Query) (as time permits)
• Nesting (as time permits)

Hooks

• Defined
• Why Hooks?
• No Breaking API Changes
• Hooks API
• useState
• useEffect
• Custom Hooks
• Rules of Hooks

Build & Deploy (as time permits)

• Building a React Application for Production
• Deploying a React Application
• Serving Apps with Client-Side Routing
• Customizing Environment Variables

React with TypeScript

• Installation/Setup
• Props Interfaces
• State Interfaces
• Typing Event Handlers