Course Outline


Pre-requisites

  • Participants must have good knowledge of JavaScript
  • Functional programming concepts like closures and the behavior of the this keyword
  • Object oriented programming concepts like Constructor functions and prototypes
  • ES6 basic concepts especially arrow functions, classes, let, const, module support, template strings.
  • A working knowledge of Node.js is also essential to this course

Duration

2-5 days (covering a subset of the topics - contact us for more information/customization)

Lab Setup

Hardware Configuration

Participants must have access to a system with the following hardware configuration:

  • 2GB of free RAM, 20GB of free disk space and full network connectivity

Software configuration

  • Ubuntu 16.04 Desktop Edition (sudo/root access required)
  • Firefox and Chrome browsers
  • Firebug

Course Outline for React, Redux and MobX

Introduction
  • Functions as first class objects
  • ES6 Concepts
  • Pure functions
  • Webpack
Setting up the Dev environment
  • Webpack
  • Webpack HMR
  • Case study: Atom with Emmet and other Plugins
  • React Developer Tools Chrome Extension
Introduction to React
  • Evolution of client-side MVC and component based architectures
  • Hello World
  • Introduction to JSX
  • Component based architecture
  • Composing Components
  • Props and States
  • Component life cycle
  • Lists and keys
  • Handling events
  • Forms
Getting into depth
  • Type checking with proptypes
  • Controlled components
  • Parent to child and child to parent communication
  • State management challenges, Observer pattern and Event Emitters
  • Communication across the component hierarchy
  • refs and context
Patterns
  • Mixin pattern
  • Container and Presentation Components
  • Higher Order Components
  • Composition vs Inheritance and comparison of paradigms
  • Anti-patterns
Integrating 3rd party components
  • React-select case study
  • React data grid
React Router
  • Introduction to Routing and History APIs
  • Introduction to React Router
  • URL parameters
  • Redirects
  • Link component
  • history manipulation
State management
  • Need for state management
  • Redux (without React)
  • React with Redux
  • Mobx
  • Comparison of different state management solutions
React Testing
  • React Test Utilities
  • Shallow rendering
  • Jest
  • Enzyme
  • Mocha

The classroom training will be provided in Bangalore (Bengaluru), Chennai, Hyderabad or Mumbai and will be conducted in the client's premises. All the necessary hardware/software infrastructure must be provided by the client.