Building RIA using React.js, Flux and Redux

Inquire now

Course Overview:

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

Course Objectives:

  • 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 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

Pre-requisites:

  • Web development experience with advanced level of expertise in JavaScript.
  • Must be familiar with ES6
  • Exposure to any server technology (J2EE, .NET, Ruby etc)

Target Audience:

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

Course Duration:

  • 28 hours – 4 days

Course Content:

RIA/SPA Basics

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

Building UI using React.js

  • Introduction
    • Need for React.js
    • Advantages of Virtual DOM
  • View Components using JSX
    • JSX Syntax
    • Using JSX to create view classes
    • Creating views without using JSX
  • Models
    • Advantages of Immutability
  • Components
    • Component Lifecycle
    • Virtual DOM
    • Component Events
    • Using States and Properties
    • Initializing States from properties
    • Accessing DOM nodes using refs
    • Synthetic Events
    • Component Compositions
    • Communication Between Components
    • Reusable Components
  • Forms
    • Controlled Components
    • Uncontrolled Components
  • Unit Testing React.js Components
  • js Best Practices

Flux Architecture and Redux

  • Introduction
    • Overview of Reactive programming
    • Benefits of Unidirectional data flow
  • Architecture
    • Building blocks in Flux
    • Dispatcher
    • Stores
    • Action
    • Views
  • Dispatcher
    • The role of dispatcher
    • Registering callbacks
    • Triggering Actions
  • Store
    • The role of Store
    • Maintain Application State
    • Event Broadcasting
  • Reducer
    • Creating Reducers
    • Retrieving State
    • Combining Reducers
  • Action Creator
    • Creating Actions
    • Dispatching actions to the dispatcher
    • Using Middlewares
    • Dispatching Async Actions using Thunk middleware
  • Views
    • React Components as Views
    • State Subscribers
    • Updating data from the store
  • React-Redux Bindings
    • Binding Components to React Store using “Connect”
    • Injecting Redux Store using Provider
    • Using Providers with React Routers
  • Testing
    • Overview of Mocha & expect (chai.js)
    • Organizing Unit tests using Mocha
    • before & after setup
    • Performing assertions using expect
    • Using Karma.js
    • Using Jest for mocking dependencies
    • Testing React components
    • Testing Stores
    • Summary and Closing Remarks

 

Course Customization Options

To request a customized training for this course, please contact us to arrange.

Inquire now

Best selling courses

This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.