Duration: 5 days – 35 hrs.
Overview
This workshop is aimed at imparting the required knowledge required to build Rich Internet Applications (RIA) using React.js.
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’s components
- Learn React.js best practices
- Compose an application using Flux architecture
- Know how to maintain application state in a Redux Store
- Creating sagas using Redux-saga
- Know how to do module bundling using webpack
- Use React dev tools
- Understand the Event-Driven architecture of Node.js
- Build simple APIs using Node.js
Audience
- Developers
Pre- requisites
- Web development experience with intermediate level of expertise in JavaScript.
- Good To Have Exposure to any server technology (J2EE, .NET, Ruby etc)
Course Content
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
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
- JSX Precompilation
- Using JSX in the server
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
React.js Best Practices
Flux Architecture and Redux
Introduction
- Overview of Reactive programming
- Benefits of Uni directional 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
- Dispatching Async Actions
- Using Middlewares
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
Webpack
- Module Bundling Overiew
- Installation
- Creating Webpack configuration
- Setting up webpack-dev-server
- Configure automatic browser refresh
- Loading Modules
APIs using Node.js
Introduction to Node.js
- Installing Node.js
- Node’s Event Loop
- Writing asynchronous code
Modularizing code
- Understanding built-in modules
- Techniques for modularizing JavaScirpt code
- Using require() to modularize application code
- Using npm for third-party modules
Events and Streams
- Understanding Events
- EventEmitter class
- Understanding Streams
- Reading and writing streams
- Using pipe()
Manipulating File System using ‘fs’
- Creating files and directories
- Copying, moving and renaming files
- Watching for file operations
Node.js and the web
- Handling web requests
- Building a web server
Building web applications using Express.js
- Installing Express.js
- Routing
- Parameters and queries in routing
- Creating REST endpoints
- Serving JSON data
- Serving files
- Working with cookies and sessions
- Authentication and authorization
- Error Handling
