Skip Navigation LinksHome > Vendors > IBM > f247g

BRRRN - Building RIA using React.js, Redux & Node.js (with AdvJS, ES6 and Webpack) Training Course

Overview

Duration: 7 days

This workshop is aimed at imparting the required knowledge required to build Rich Internet Applications (RIA) using React.js.

Objectives

At the end of this training course, the participants will: 

  • Understand what React.js is and what problem it solves 
  • Explore the basic architecture of a React.js application 
  • Gain a deep knowledge of React.js components and JSX 
  • Build a working application that uses React.js’s components 
  • Learn React.js best practices 
  • Compose an application using Flux architecture 
  • Know how to maintain application state in a Redux Store 
  • Know how to do module bundling using webpack 
  • Use React dev tools 
  • Building Server APIs using Node.js 
  • Using WebSockets to build realtime applications

Content

ADVANCED JAVASCRIPT 

  • Expressive JavaScript

        o The Flexibility of JavaScript 
        o JavaScript as a Loosely Typed Language 
        o Functions as First-Class Objects 
        o Object Mutability 

  • Functions In Depth oFunction Objects

        o Function Literal 
        o Function Invocation Patterns 
        o Augmenting Types 
        o Recursion & Closures 
        o Functions as Callbacks 
        o Function Currying & Memorization 

  • Closures In Depth 

        o How Closures Work 
        o Private Variables, Callbacks and Timers 
        o Binding Function Contexts 
        o Overriding Function Behavior 

  • Object Orientation With Prototypes

        o Object Instantiation 
        o Constructors 
        o Inheritance and Prototype Chain 
        o Extending Object 
        o Extending Number oInstantiation Issues 
        o Writing class-like code  

ES6

  • New in ES6 

        o Classes olet and const 
        o Arrow functions 
        o Enhanced Object Literals 
        o Destructuring oSpread Operator 
        o Generators and Iterators 
        o Symbols 
        o Comprehensions 
        o Async Programming using Promises 

  • Using Babel.js 


RIA/SPA Basics 

        o Classic Web applications vs Rich Internet applications 
        o Challenges in building Client centric applications 
        o Benefits of RIA Frameworks 
        o Where React.js fits in? 

Building UI using React.js 

  • Introduction 

        o Need for React.js
        o Advantages of Virtual DOM 

  • View Components using JSX 

        o JSX Syntax 
        o Using JSX to create view classes 
        o Creating views without using JSX 
        o JSX Precompilation 
        o Using JSX in the server 

  • Models 

        o Advantages of Immutability 

  • Components 

        o Component Life-Cycle 
        o Virtual DOM 
        o Component Events 
        o Using States and Properties 
        o Initializing States from properties 
        o Accessing DOM nodes using refs 
        o Synthetic Events 
        o Component Compositions 
        o Communication Between Components 
        o Reusable Components 

  • Forms 

        o Controlled Components 
        o Uncontrolled Components 

  • React.js Best Practices 

Flux Architecture and Redux 

  • Introduction

        o Overview of Reactive programming 
        o Benefits of Uni directional data flow 

  • Architecture 

        o Building blocks in Flux 
        o Dispatcher 
        o Stores 
        o Action 
        o Views 

  • Dispatcher

        o The role of dispatcher   
        o Registering callbacks 
        o Triggering Actions 

  • Store

        o The role of Store 
        o Maintain Application State 
        o Event Broadcasting 

  • Reducer 

        o Creating Reducers  
        o Retrieving State 
        o Combining Reducers 

  • Action Creator 

        o Creating Actions 
        o Dispatching actions to the dispatcher 
        o Dispatching Async Actions 
        o Using Middlewares 

  • Views 

        o React Components as Views 
        o State Subscribers 
        o Updating data from the store 

  • React-Redux Bindings 

        o Binding Components to React Store using "Connect" 
        o Injecting Redux Store using Provider 
        o Using Providers with React Routers 

Webpack 

        o Module Bundling Overiew 
        o Installation 
        o Creating Webpack configuration 
        o Setting up webpack-dev-server 
        o Configure automatic browser refresh 
        o Loading Modules 

APIs using Node.js 

  • Introduction to Node.js

        o Installing Node.js 
        o Node’s Event Loop 
        o Writing asynchronous code 

  • Modularizing code

        o Understanding built-in modules 
        o Techniques for modularizing JavaScirpt code 
        o Using require() to modularize application code 
        o Using npm for third-party modules 

  • Events and Streams

        o Understanding Events 
        o EventEmitter class 
        o Understanding Streams 
        o Reading and writing streams 
        o Using pipe() 

  • Manipulating File System using ‘fs’

        o Creating files and directories 
        o Copying, moving and renaming files 
        o Watching for file operations 

  • Node.js and the web 

        o Handling web requests 
        o Building a web server 

  • Building web applications using Express.js 

        o Installing Express.js 
        o Routing 
        o Parameters and queries in routing 
        o Creating REST endpoints 
        o Serving JSON data 
        o Serving files 
        o Working with cookies and sessions 
        o Authentication and authorization 
        o Error Handling 

  • Realtime Applications

        o Using Server Sent Events 
        o Using WebSockets

Audience

Web developer who wants to build best-of-breed web UIs with the simplicity and elegance of JavaScript.

Prerequisites

Must-Have 

  • Web development experience with an intermediate level of expertise in JavaScript. 

Good To Have 

  • Exposure to any server technology (J2EE, .NET, Ruby etc)

Certification

Trainocate Certificate of Attendance

Schedule

Show Schedule for: