React Development

Abstract

“React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes” (https://facebook.github.io/react/)
Is it really painless?

During this 4 days’ course, we will discuss how to write modern JavaScript and how React can help you build UIs more easily. We will focus on understanding React architecture and explore the strengths and weaknesses of this library.

At the end of the course you will be able to decide whether React is your next favorite JavaScript library (probably yes …)

Target Audience

Developers

Prerequisites

  • Good familiarity with one of the OOP popular languages like Java or C#
  • Basic familiarity with JS
  • Basic familiarity with WEB world including HTTP, CSS, HTML
  • No Angular experience is required

Content

Advanced JavaScript:

  • Strict Mode
  • Useful JavaScript “tricks”
  • Closure is expensive
  • IIFE
  • Modules: AMD, CJS and Module Pattern
  • Naïve Classes using Module Pattern
  • Prototypical classes & inheritance
  • __proto__ vs. Function.Prototype
  • Profiling Memory consumption of closures & classes

 ECMAscript6 & Typescript:

  • Block scoped variables
  • Arrow Function
  • Template String
  • Computed Properties
  • Destructing Assignment
  • Modules
  • Classes
  • Symbol Type
  • Iterators
  • Generators
  • Map/Set & friends
  • Typed Arrays
  • Promise
  • Proxy
  • Reflection

Introducing React:

  • Installing
  • Introduction to Virtual DOM
  • Creating elements
  • Rendering elements
  • Introduction to JSX

Understanding React:

  • Stateless vs State full components
  • Reactive component
  • Lifecycle methods
  • Integrating 3rd party library
  • Updating a component
  • Validation
  • Collection Component
  • Components interaction
  • Forms
  • Tooling
  • Testability

Advanced Component:

  • Build complex component
  • JSX Gotchas
  • React context
  • Refs to component
  • Immutability
  • PureRenderMixin
  • Reconciliation
  • Integration with Web Components

State Management with Redux:

  • Motivation & Principles
  • Actions
  • Reducers
  • Store
  • Data Flow
  • Integrate with React
  • Async Actions & Flow
  • Middleware
  • API

React Router:

  • Configuration
  • Route Matching
  • History
  • Index & Links
  • Dynamic Routing
  • Confirming Navigation
  • Component Lifecycle
  • Bundling
  • Redux Integration

Duration

4 days

Next public course

10-13/9/2017

Enroll Now
Contact us
Share: