Full-stack Application Development using ReactJS, Express and TypeScript

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 keyword. 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)

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

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

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

Single Page Applications (SPA) development with 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

Building React components and applications with TypeScript – 6 h

• Development workflow and tools – using create-react-app and templates
• Project setup and configuration using package.json
• 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

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 React.Children utilities
• Exercise: React WebStore project– AJAX with Fetch API, Markdown, events, children, forms, controlled and uncontrolled components, refs, animations

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

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

New lifecycle methods – 3h

• Component mounting, updating, unmounting and error handling callback methods
• getDerivedStateFromProps()
• getSnapshotBeforeUpdate()
• getDerivedStateFromError()
• componentDidCatch()

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

Other novelties in React 16+ - 3h

• Fragments
• Portals
• Error boundaries
• Async rendering
• Code splitting and lazy loading with React.lazy()
• React.Suspense

Dependency Injection (DI) of custom application services using React Context – 4 h

• When to use Context
• React.createContext
• Context.Provider
• Class.contextType
• Context.Consumer
• Context.displayName
• Dynamic Contexts
• Updating Context from a nested component
• Consuming multiple Contexts
• Caveats using Context
• Example: Switching themes in WebStore application

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 – props.match.params
• Route templates and optional route parameters
• Path-to-RegExp matching.
• Applying withRouter HО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

Testing React Components – unit and end-to-end (E2E, UI) testing using – 6h

• Jest,
• Enzyme
• TestCafe

Using Component Libraries – 6h

• Material-UI,
• React-Toolbox,
• Semantic-UI-React,
• React-Bootstrap

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 Store.subscribe()
• Dispatching Actions using Store.dispatch()
• Connecting Redux with 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 Router and React Router Redux libraries.
• Implementing TODO application using React, Redux and TypeScript
• Time-travel debugging using Redux Devtools

Server side application development with Node.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

REST service API development using Express.js – 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 quering 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.