Fullstack Application Development using ReactJS, Express and TypeScript


Target audience: Beginner to intermediate level web developers with practical experience using HTML, CSS and JavaScript.

Course duration: Duration of the course is 120 hours in total.

Expected outcomes:

During the workshop participants will:

  • learn how to set up different kinds of TypeScript projects – front-end with React and Redux, back-end with Node.js and Express, as well as how to integrate them in a full-stack project using REST/JSON APIs;
  • practice development of type-safe components, single page apps, and backend services;
  • implement real-time server-push event streaming using Socket.IO;
  • understand how to boost development performance with TypeScript, and different tooling alternatives;
  • implement unit, integration and functional (UI, E2E) tests with Jest, Enzyme, and TestCafe;
  • become proficient in debugging full-stack applications written in TypeScript.

 

Course Description:

The course provides in-depth study of state-of-the-art TypeScript, ReactJS, NodeJS, and Express platform for rapid development of modern, component-based, mobile-first, responsive full-stack web applications, that are easy to extend and maintain. The covered topics include:

  1. Introduction to HTML5, CSS and JavaScript – 12h
  • HTML 5 – base tags, semantic markup, styling
  • CSS 3 – selectors, positioning, colours, gradients, backgrounds, borders, animations and transforms, fonts, box model and layout, grid system, Flexbox
  • SASS – variables, nesting, @import, @mixin, @extend, Sass functions (string, numeric, list, map, selector, introspection, color), CSS modules
  • VS Code and VS Code extensions, linting, developing, running and debugging JS programs using browser (Chrome, Firefox) and NodeJS consoles.
  • JavaScript language constructs – values, operators, expressions, keywords, comments, data types, variables and scopes, naming conventions, regex
  • Object-oriented JavaScript – prototypes, object literals and constructors, inheritance, overriding, and polymorphism, properties and methods, JavaScript Object Notation (JSON) serialization and parsing
  • Arrays in depth – creating, reading, writing, adding and deleting elements, iteration, main methods new array methods, immutability
  • Functional programming – function literals, Immediately Invoked Function expressions – IIFE, passing arguments, defaults, methods, using this using call(), apply(), bind(), closures and callbacks, higher-order functions
  • HTML DOM – DOM object tree, selection and manipulation, DOM events and event handlers, Browser Object Model (BOM), asynchronous behaviours
  • Web Design HOW-TOs – menus, responsive header and navbar, mobile-first design, cards, icons, dropdowns, search bar, sidebar, tabs and vertical tabs, accordion, hover, gallery, slide show, scrolling, sticky navbar, opening and collapsing navigation, breadcrumbs, button groups, icon fonts, social media buttons, progress indicators, modals and overlays, transparency, zooming, forms, file uploads, tables, pagination and filtering, tooltips, alerts, snackbars
  • New HTML 5 APIs – History, Drag-and-Drop, File, Geolocation, Local/Session Storage, Audio, Video, Camera, Canvas, Web Workers
  • Google APIs – Charts, Fonts, Maps etc.
  • Web Components and Shadow DOM
  • Material Design (MD)
  1. HTTP Client and Fetch APIs – 6 h
  • AJAX requests using XMLHttpRequest and Fetch API
  • HTTP request methods, headers and content types (MIME)
  • response callbacks, status codes and headers.
  • Cross Origin Resource Sharing (CORS)
  • event streaming
  • Server Sent Events (SSE).
  • Web Sockets
  1. Novelties in ES6+ – 6 h
  • Object-oriented JavaScript
  • Prototypes and inheritance in JavaScript, ES6+ class syntax
  • Functional JS – closures and callbacks, this, call, apply, bind, arrow functions
  • New operators in ES6 – rest, spread, object and array destructuring
  • Template strings
  • Symbols, iterators and generators in ES6+, for-of
  • New classes in ES6: Map, Set
  • Asynchronous programming in ES6+: Promises and their composition, async, await – async request composition demo using Github API
  • Modules and module systems – ES 6 / CommonJS
  1. TypeScript – 6h
  • Design by contract – components and interfaces
  • Advantages of strong typing for larger projects
  • TypeScript intelliSense and editor support
  • TypeScript type system and future JavaScript features
  • Bootstrapping a TypeScript project – tools, tsconfig.json, compiler options
  • Basic and custom types
  • Classes, functions and interfaces – object, function, dictionary and tuple interfaces
  • Using custom types
  • Use of “this” in functions
  • Arrow functions
  • Generics – exercise: building a generic repository
  • Advanced types – intersection types, union types, type guards, nullable types and null checks, type aliases, literal types, type inference, contextual typing, and type compatibility, optional parameters and properties, type declarations and overloading
  • TS modules – imports, exports, default exports and imports, destructuring, importing a module for side-effects only
  • Advanced functions
  • Use of advanced types
  • Async, await, async iterators and generators in TS
  • Decorators – class, method, field and argument decorators in TS
  • TSX syntax extension– integration with ReactJS
  1. Single Page Applications (SPA) developmentwith ReactJS and Typescript– 2h 
  • Model-View-Controller (MVC), Model-View-Presenter (MVC), Model-View-ViewModel (MVVM) – MV*patterns, front and back-end architecture (router, models, views), application design and development
  • Component oriented development with ReactJS – main features, virtual DOM, reactive data binding, pure fuctions, functional and class components
  1. Building React components and applications with TypeScript – 6 h
  • Development workflow and tools – using create-react-app and templates
  • Project setup and configuration usingjson
  • React top level API: React, ReacrDOM, ReactDOMServer.
  • Rendering custom and DOM elements
  • Building React components and applications – functional and class components
  • Composing components using properties
  • Introduction to TSX
  • Managing components’ state and lifecycle
  • Stateful components – react states, setting initial state, updating state, useState() hook, lifting state up
  • Lists and keys, reconciliation
  • Events in React, managing DOM events
  • Composition vs Inheritance
  • Thinking in React
  • Using React Developer Tools Chrome extension
  • Exercise: building React TODOs application
  1. TSX in depth – 4h
  • Props, children, ownership, and TSX in depth
  • Showing dynamic values
  • Conditional rendering
  • Spread Attributes
  • TSX Children – TypeScript expressions as children, functions as children
  • Child reconciliation, stateful children and dynamic children using keys
  • Using Childrenutilities
  • Exercise: React WebStore project– AJAX with Fetch API, Markdown, events, children, forms, controlled and uncontrolled components, refs, animations
  1. Working with forms – 6h
  • Forms and form components, validation
  • Interactive props, controlled and uncontrolled components
  • Form building using higher-order React components
  • Using Formik library to build React forms with client side validation
  1. Components composition in depth – 6h
  • Refs and the DOM
  • Forwarding Refs
  • Using uncontrolled components
  • Render props
  • Higher-Order Components (HOCs)
  • Typechecking component property values
  • Strict mode
  • Web Components
  • Performance optimization using immutability – shouldComponentUpdate and PureComponent
  1. New lifecycle methods – 3h
  • Component mounting, updating, unmounting and error handling callback methods
  • getDerivedStateFromProps()
  • getSnapshotBeforeUpdate()
  • getDerivedStateFromError()
  • componentDidCatch()
  1. Building purely functional components using new Hooks API – 6 h
  • Introducing to Hooks
  • Using the State Hook
  • Using the Effect Hook
  • Rules of Hooks
  • Building Your Own Hooks
  • Basic Hooks – useState, useEffect, useContext
  • Additional Hooks – useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue
  • Examples and exercises
  1. Other novelties in React 16+ – 3h
  • Fragments
  • Portals
  • Error boundaries
  • Async rendering
  • Code splitting and lazy loading with lazy()
  • Suspense
  1. Dependency Injection (DI)of custom application services using React Context – 4 h
  • When to use Context
  • createContext
  • Provider
  • contextType
  • Consumer
  • displayName
  • Dynamic Contexts
  • Updating Context from a nested component
  • Consuming multiple Contexts
  • Caveats using Context
  • Example: Switching themes in WebStore application
  1. SPA routing using React Router v5 – 8 h
  • Core, web, native
  • <Router>, <BrowserRouter>, <MemoryRouter>, <StatticRouter>
  • Defining routes using <Route>– component, render & children properties
  • Properties provided to the rendered component – match, location and history
  • Index routes and exact matching
  • Route parameters – match.params
  • Route templates and optional route parameters
  • Path-to-RegExp
  • Applying withRouterHОC.
  • <Link>, active links with <NavLink>
  • Simultaneous navigation to multiple components
  • Choosing single route with <Switch>
  • Route redirection with <Redirect>
  • Path-less routes.
  • Recursive routes.
  • Routing animations.
  • Programmatic navigation.
  • Defining hooks
  • <Prompt> component.
  • Code splitting& lazy loading of routed modules
  • Exercise: adding routing to WebStore application
  1. Testing React Components – unit and end-to-end (E2E, UI) testing using – 6h
  • Jest,
  • Enzyme
  • TestCafe
  1. Using Component Libraries – 6h
  • Material-UI,
  • React-Toolbox,
  • Semantic-UI-React,
  • React-Bootstrap
  1. Redux – predictable state container for JavaScript apps – 8h
  • Flux and Redux design patterns
  • Redux – combining reactive uni-directional data flows with event sourcing and state reduction, main principles
  • Reducers: (state, action) => state.
  • Main components and their interaction – action creators, actions, dispatcher, store, selectors, views (components) and controller-views (containers)
  • Creating Redux components using Redux Toolkit
  • Designing state representation
  • Handling Actions using separate Reducers
  • Combing reduces into single Root Reducer using combineReducers()
  • Registering listeners via subscribe()
  • Dispatching Actions using dispatch()
  • Connecting Reduxwith React using React Redux bindings
  • Presentational and container components.
  • Implementing async actions using redux-thunk
  • Asynchronous data-flows using applyMiddleware()
  • Extended Redux routing support using Redux Routerand React Router Redux
  • Implementing TODO application using React, Redux and TypeScript
  • Time-travel debugging using Redux Devtools
  1. Server side application development with js and TypeScript – 8h
  • Non-blocking IO
  • NodeJS event loop
  • Using callbacks and promises
  • Continuation-passing style (CPS)
  • npm package manager
  • Executiong scripts using REPL
  • CommonJS modules
  • Global objects in Node.js
  • Development of HTTP servers and clients
  • Server side routing
  • HTTP method handler implementations
  • HTTP clients using http.get() and http.request().
  • Modularization of NodeJS application
  • Serving static files (using File System module) – asynchronous vs. synchronous, completion callbacks, using promises
  • Buffers
  • Basic file and directory operations
  • Events, streams, and pipes – EventEmitter, custom events, readable, writable, duplex и transform streams
  • Examples: HTTP requests / responses, fs write streams, zlib streams, stdin, stdout
  • Server push event streaming using SocketIO
  1. REST service API development usingjs – 14h
  • Express routing and request handlers
  • Generating Express apps using express-generator (CLI)
  • Express application structure
  • Model-view-controller (MVC).
  • Express API – configuration, settings, environment
  • Using Express middleware –
  • Defining own middleware functions
  • Middleware application
  • Routes mounting
  • Route params
  • Error handling middleware
  • Serving static resources using Express(express.static middleware)
  • Using embedded, third-party, and custom middleware модули.
  • Storing and querying data using NoSQL DB (MongoDB)
  • Object to Document Mapping (ODM) using Mongoose
  • Using SQL DBs (MySQL).
  • REST (REpresentational State Transfer) architectural style.
  • Building RESTful / JSON APIs using Express.
  • Securing REST APIs using token-based authentication (JSON Web Token – JWT)
  • User management, route-based handler authentication and authorization
  • Exercise: building full-stack WebStore SPA using React, Redux, Node.js, Express, and MongoDB JSON/REST API.

The workshop contains one third lecture materials and two thirds lab exercises. Lectures and exercises will be conducted in parallel and will not be divided in separate sessions in order to achieve immediate reinforcement of theoretical discussions with practical examples and exercises.

During the workshop participants will get practical experience using state-of-the-art TypeScript, ReactJS, NodeJS, and ExpressJS for rapid full-stack application development. The learning is conducted in small groups – up to 15 participants using problem-based methodology. During the workshop there will be opportunity for discussion of additional questions the participants are interested in.