React Fiber

This workshop is delivered through Online or classroom-based (on request).
 
This workshop is about 24 hours and the detailed workshop on React Fiber would be around 40 hours

ECMA 2015,2016/ES6,ES7

• Transpilers let const Arrow functions and function expressions Template literals ES 6 and Arrays Classes Instance variables methods constructors object Creation Inheritance function default arguments Object Destructuring Spread Operator Modules import and export

React Fiber

• What is React Fiber Why React Fiber React Fiber architecture Async Rendering Virtual Stack Frameworks Fibers in nutshell Declarative Programming Virtual DOM UI Tree Diff Algorithm Rendering Env DOM,Native,VR,Hardwares Browsers Async API’s requestIdCallback animationCallback React 16 Getting Started

React Getting Started

• Installation React cli - create-react-app Hello World Introducing JSX Component Introduction ES 6 Class Pattern Arrow Function pattern Variable Pattern

Components

• Component Composition Parent and Child Composition HTML Attributes

Components and Styling

• Component Styling Bootstrap Integration className attribute Style attribute Building Layouts 

Data and React

• How to supply data to Component JavaScript Expressions in JSX Props Introduction State Overview Supplying Primitive data Supplying Literal Objects 

Lists and Keys

• Rendering multiple elements Basic list Component Keys Embedding Map in JSX

State

• What is state State representation Changing State Handling Events Life Cycle Methods setState The Data Flows Down Conditional Rendering Forms

React Router

• What is Router Routing Getting Started BrowserRouter Route Link Nested Routing location history match

React Fiber Implementation – React 16

• React Fiber is so Called React 16 Exploring React 16 Features Error Handling using Error Boundaries in React 16 New Life Cycle Hooks Render Multiple Elements without a Wrapping Element in a Component in React 16 Render Text Only Components in React 16 Render Elements Outside the Current React Tree using Portals in React 16 Define DOM Attributes in React 16 Call setState with null to Avoid Triggering an Update in React 16 Render Multiple Elements using React.Fragment and the JSX Fragment 

Redux

• Introduction Redux Redux Core Concepts Three Principles Redux Flow Installing Redux

Redux Getting Started

• Pure Functions and Immutability Reducers Store Object Store API overview Actions Action Creator Dispatching an Store Getting State Action Creators

Redux Middlewares and Async Programming

• What is Middlewares Why it is important Types of Middlewares Basic middleware implementation Async Actions Introduction Async Actions Implementations Redux-thunk Middleware Redux-Promise Redux- Observables

React and Redux Binding

• React and Redux work Flow Provider connect Example to Connect React and Redux Router and React Router