Duration
3 days
Day 1
Introduction to TypeScript
a. What is TypeScript?
b. Benefits of TypeScript
c. Setup the Environment
d. First TypeScript Example
Installation Overview
a. Setup
b. Creating the Project
c. Using a Third-Party Package
d. Adding Commands
Using the TypeScript Compiler
a. Understanding the Project Structure
b. Using the Node Package Manager
c. Compiling TypeScript Code
Understanding Static Types
a. Understanding Static Types
Using Functions
a. Defining Functions
Using Arrays, Tuples, and Enums
a. Working with Arrays
b. Working with Tuples
c. Using Enums
Working with Classes and Interfaces
a. Using Constructor Functions
b. Using Classes
c. Using Interfaces
Day 2
Introduction to ReactJS
Introduction to "Modern (ES5)" JavaScript
a. JavaScript Refresher
b. Introduction to ES2015 (ES6)
c. Basic language features
d. Creating variables
e. Functions, functional programming and nesting functions
f. Global variables, this keyword in JavaScript
Introduction to REACT
a. What react is and what it is not
b. React concepts
c. Component composition
d. How react works
e. How Virtual DOM works
Setting up ReactJS Development Environment
a. Using npm & package.json file
b. Look at an ReactJS application
c. Organizing source code
d. React browser plugin
Creating a simple React Application
a. A simple react component with JSX template
b. Component structure
c. React render
d. Component properties and property passing
e. Props validation with data types
f. States, initialize states and update states
g. Pure components
Using JSX
a. Components
b. HTML attributes example. Class and Id etc
c. Child Components and Namespaced components
d. JavaScript expressions in JSX like attribute, boolean or child expression
e. If-else in JSX
Event handling
a. React.js Event Handlers
b. Synthetic Events
c. Keyboard
d. useful events in React
React Styles
a. CSS and inline styles
React Router & Navigation
a. Loading the router library
b. Router configuration
c. Passing and receiving parameters
d. React-cookie integration
Day 3
ReactJS and TypeScript Environment
Understanding ReactJS and TypeScript
a. Create ReactJS
b. Setting up Typescript in React App using --typescript flag
c. Understanding "js" files
d. Understanding "ts" files
e. Knowing the "ts" and "tsx" extension
React TypeScript Component
a. Creating a Component in Typescript
b. Recognize the required import statement
c. The props and state with datatype declaration
d. Creating function with TypeScript anchor.
Functions
a. Know the React.FC (Function Component)
b. Creating function with FC
c. Function compilation identification
d. the "useState" example
e. Function return with few data type using pipe "|"
f. Using void and undefined
Interface
a. Creating interface
b. Set properties using data type
c. Using switch with "action.type"
d. Type and object
e. Using Action with types.
Project Running
a. Run the full compiled project
b. Recap of ReactJS and TypeScript
Programme scope, delivery arrangements and suitability are confirmed during enquiry.