Building RIA using React.js, Flux and Redux (with ES6 and Webpack)

  • Soujanya
  • 2 (Registered)
  • (0 Review)
React-JS800x420
29
May

Description:

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

Duration:

3 days or  24 hours

Course Objective:

  • 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

Target Audience:

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

Prerequisites:

  1. Must Have
    • Web development experience with intermediate level of expertise in JavaScript.
  2. Good To Have
    • Exposure to any server technology (J2EE, .NET, Ruby etc)
  3. Infrastructure Requirement
    • Node.js
    • Good Text / JavaScript Editor (Notepad++ / SublimeText / Brackets / Atom )
    • Chrome
    • Internet Connection (Mandatory with permissions to install npm modules from git on demand)

Case Study:

  • Building a “Express like” web framework from the scratch
  • A Task Manager application using Express
  • Real-time chat application using Socket.io
  • Building RESTFul services with Hapi.js

Detailed Coverage:

  1. ES6
    • New in ES6
      • Classes
      • let and const
      • Arrow functions
      • Enhanced Object Literals
      • Destructuring
      • Spread Operator
      • Generators and Iterators
      • Symbols
      • Comprehensions
      • Async Programming using Promises
    • Using Babel.js
  2. RIA/SPA Basics
    • 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 Life-Cycle
      • 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
    • React.js Best Practices
  3. 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 Jest
      • Organizing Unit tests using Jest
      • before & after setup
      • Performing assertions
      • Using Karma.js
      • Using Jest for mocking dependencies
      • Testing React components
      • Testing Stores
  4. Webpack
    • Module Bundling Overiew
    • Installation
    • Creating Webpack configuration
    • Setting up webpack-dev-server

 

Enroll Now

Course Content

Time: 10 weeks

Curriculum is empty

Instructor

0.0

0 rating

5 stars
0%
4 stars
0%
3 stars
0%
2 stars
0%
1 star
0%
Free

Your Dream Course Is Only A Step Away




<


Your Dream Course Is Only A Step Away




<


Your Dream Course Is Only A Step Away




<


Your Dream Course Is Only A Step Away




<


Your Dream Course Is Only A Step Away




<