React Training

Learning Objectives :

  Study the lifecycle of a component and the way it can be controlled.

  Know how to combine side effects like fetching data from an API, in a React component, cleaning up, and using Timers. Discover React’s synthetic event system.

  Manage errors smoothly using Error Boundaries.

Topics :

  Lifecycle of a Component

  Side effects and Lifecycle

  Error Management

  Managing cleanup

   Events

Hands-on :

  Learn working with events and set state properties

  Understand the implementation of an Error Boundary component to prevent errors in child components.

Learning Objectives :

Topics :

   Controlled Form Components

   Uncontrolled Form Components

   Handle inputs effectively

   Building a currency converter – Project

Hands-on :

  Learn to turn an input element into a controlled component.

  Implementation of refs to pull and set data to DOM elements in case necessary.

Learning Objectives :

Get hold of implementing shared logic using render props. Learn to reuse component logic using the HOC pattern.

Topics :

  Render Props

  Higher-Order Components

Hands-on :

  Designing a Currency-Converter component that allows props to provide the result which is later rendered on the screen

  Building a higher-order function empowering App components with tools to retrieve currency rates after conversion

Learning Objectives :

Render children in a DOM node that are outside the parent’s DOM hierarchy. Learn the working of event bubbling with Portals.

 Topics :

   Basics to Portals

   Event bubbling in Portals 

Hands-on workshop description :

   Work with Portals to render a dialog box component in a DOM element

Learning Objectives :

Study the subtleties of data flow in a React application and the problems that occur when sharing global data using props. Study everything about Context API that allows you to share global data without using props.

Topics :

  Unidirectional Data Flow

  Challenges encountered with Props

   The API Context

   Case Study

Hands-on :

  Instantiate a context, and provider and consumer components to trickle data down to the component hierarchy.

Learning Objectives :

Get introduced to the Hooks API and the idea behind them, learn the incorporation of stateful properties in a function component using the useState() hook. Further, learn ingesting data from a Context provider using hooks and to implement the useReducer() hook. Lastly, you shall learn to write your own hook.

 Topics :

  Understanding of Hooks

  The useState hook applications

  Side effects of using the useEffect hook

   The useContext hook

  The useReducer hook

  Write your own hook

Hands-on  :

  Learn building PowerTags component that can easily be used to dynamically add/remove tags or keywords

  Learn implementing useContext hook and consuming data from a context provider

  Learn using the useReducer hook to offload state management and define actions and their resulting state changes

Build a custom hook named ‘useGeoLocation’ that would access the HTML5 GeoLocation API

Learning Objectives :

Topics :

  Basics to Portals

  Event bubbling in Portals

Hands-on  :

  Work with Portals to render a dialog box component in a DOM element.

Learning Objectives :

Use code-splitting to optimize your production bundle. Understand the implementation of code splitting, lazy loading, and suspense when working with React Router.

Topics :

  Suspense and Code splitting

  Lazy Loading and Route Based Code Splitting

Hands-on  :

  React implementation to load two components in need.

  React implementation when working with React Router.

Learning Objectives :

 Topics :

  Server-Side Rendering

  SSR with React – Setup, and Server

  SSR with React – The Toolchain

Learning Objectives :

Explore Redux and understand the need for a dedicated state management solution. Learn to build action creators and add mutation logic in the reducer for the Catalog component. Also get your hands on implementing middleware, async action creators, and data persistence.

 Topics :

  State Management and Redux

  Setting up Redux

  Actions and Reducer for the Catalog

   Using the connect() higher-order function

  Actions and Reducer for the Cart

  Applying Redux Hooks

  Implementation of Middleware and Persistence

Learning Objectives :

Understand the role of testing in application development. Further, learn to write tests using Jest and the React Testing Library. Lastly, you will gain knowledge about React Testing Library, a framework for testing React Components.

Topics :

  Basics to Testing

  Applying Jest with Test Utils from React-DOM

  Applying Jest with the React Testing Library

  Applying Jest with Enzyme