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
