Overview of React with Redux
This corporate training program provides an introduction to React.js, its various components and designing basic applications using React.js and Redux.
Duration
3 Days
Prerequisite for React with Redux
A good experience of Javascript is required to attend this training program.
Course Outline for React with Redux
Overview
- What is React? What problem does it solve?
- What is Redux? What problem does it solve?
- Overview of NodeJS
ES2015 and JSX
- ES2015 features which impact React and Redux
- How to create components with ES2015
- Using Babel for ES2015 and JSX
- Using WebPack with React/Redux Development
- ECMAScript 6 (ES6) Fundamentals
- Classes
- ES Modules
- Arrow Functions
- Template Literals
- Scoping using let and const Keywords
- Spread Syntax and Rest Parameters
- Async, await, generator
- Destructuring
- React – Creating Components
- Using createClass
- Extending React.Component
- Stateless Functions
- Referencing DOM Elements
- React – Create Element & JSX
- Rendering
- Passing Props
React – Working with State
- Initializing State
- Updating State
- Working with Forms
- React Router
- ReactLink
- Principle of One-Way and Two-Way Data Binding o Server-side rendering with Node and the benefits.
- Best Practices
Composing Components
- Sibling Components and Keys
- Parent and Child Components
- Props and State
Component Life-Cycle
- Events
- Functions
- Error handling
Working with foundation for RWD integration with React
- Webpack
- Module Bundling Overview
- Installation
- Creating Webpack configuration
- Setting up webpack-dev-server
- Configure automatic browser refresh
- Loading Modules
- Optimizing rebundling of react components
- Using Less/Sass loaders
- Hot loading components
Flux o Introduction to flux o Flux design pattern o Flux vs MVC
- Redux – Store
- Dispatching Actions
- Subscribing Components
- Working with Middleware
- Redux – Reducer Functions
- Immutable Programming and State
- Setting up and Handling Actions
- Combining Reducer Functions
- Asynchronous Actions
- React-Redux Bindings
- Binding Components to React Store using “Connect”
- Injecting Redux Store using Provider
- Unit Testing – Tools
- Jest & Enzyme
- TestUtils
- React 16 new features
- Error Handling
- Custom Dom Attributes
- Better server-side rendering