Logicwaves

Home » React

React Training

The most popular front-end framework, build single-page applications using — contexts, hooks, portals, and more!
React Js Certification Online Training
0 +
Professionals trained
0 +
Workshops every month
Countries and counting
0
0 +

Hands-on Trainings

Offerings

Why Learn React ?

React js Online Training

React offers great solutions to developers for front-end programming’s most persistent issues and allows them to build dynamic and interactive web apps with ease. It is an open-source JavaScript library designed by Facebook for creating rich and engaging web applications with speed, efficiency, and minimal coding.

React focuses on individual components that mean, instead of working on the entire web application, it allows a developer to break down the complex UI into simpler components. Even today, seven years past its release React is still one of the most used JavaScript frameworks and is growing rapidly in its path. It is fast, scalable, flexible, powerful, and has a robust developer community that’s rapidly growing.

What will you learn?

1. Core Components
Gain in-depth knowledge of components and building blocks. Also, learn how to build and compose reusable components.
2. JSX

Learn the details of JSX, the syntax extension to JavaScript, for writing prompt render logic.

3. Discover State
Learn and understand the benefits of state, know how it helps you describe changes to your UI using data. Also, learn to build declarative data-driven apps using state.
4. Network requests
Learn the implementation of side effects such as network requests to a backend service or an API for fetching or storing data.
5. Isomorphic applications
Study Isomorphic and construct Isomorphic applications by implementing Server-Side Rendering (SSR)
6. Master Redux
Master Redux together with Redux Hooks, Redux Thunk and different middleware.
7. Test-driven development

Embrace a test-driven development (TDD) method through the usage of Jest, React Testing Library, Enzyme, and more.

8. Build efficient forms

Build efficient forms using controlled and uncontrolled components.
9. Understanding Hooks
Master the superb Hooks API and find out about more about context, blunders boundaries, portals, and many.

10. Reusability and Code sharing

Understand the use of Render Props, Higher Order Components and more to master code sharing and reusability.
11. Go beyond the basics
Learn how to implement routing using React Router, implement code splitting and the Suspense API.

Who Should Take Up React Course

Curriculum

Learning Objectives :

Explore React, understand its composition and the problems it solves when designing UIs and web applications. Get your first hands-on experience with React. Discover the create-react-app utility that builds a React development toolchain for an incredible developer experience.

   What is React ?

  Hello React

  Using the create-react-app

 
Hands-on workshop description :

Build the app that allows the user to key in the text that it reverses and displays on the UI instantaneously.

Learning Objectives :

Gain the knowledge of components and essentials of a React application. Start off with the 2 major types of components that can be built with React including a conceptual look at state and event listeners. Discover JSX, an HTML-like syntax that enables you to express your UI within a React component.

Topics :

   What are Components?

 Types of Components

    JSX

 
Hands-on :

  Design a class component that allows you to type text in a textarea field as it displays the word and character counts that notify you as you typ

  Creating a Card component that you often see on social media platforms

  Write a segment that acts as a list item in a UI that renders a list of booksWrite a segment that acts as a list item in a UI that renders a list of books

Learning Objectives :

  Understand State that allows you to specify changes to your UI using data.

Understand the fundamentals of the Hooks API that let you incorporate state in a Function component.

 Learn how to use props as conduits

  Know how to debug props using type checking.

 

 Topics :

  Understanding State

   Stateful Function Components with Hooks

   Understanding props

   Type Checking with Prop Types

 

 Hands-on :

   Formulating a toggle button for a hypothetical space-craft’s guidance system panel

  Creating a simple theme switcher using state in a function component

  Study the UserCard component that accepts props using data

  Implementing prop type checks in the UserCard

Learning Objectives :

Learn to render lists of components using the map() method along with recognizing the significance of the ‘key’ attributes.

 Topics :

  Applying the map function to render lists

   The “key” attribute

  Managing Fragments

Hands-on :

  Learn using the map function to render lists of components using an Array of movies, also learn to install all-important ‘key’ prop

  Implementing the Fragment operator in a React Component rather than enclosing div component.

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 :
Understand the development of the elements that are controlled by React, also learn fetching data directly from the DOM. Understand the importance of debouncing and other techniques to efficiently handle multiple form elements.
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 :
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  :

  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 :
Understand the requirement for server-side rendered apps and a need to set up a Node.js (Express) server. Learn to build a toolchain using Webpack and Babel that organizes React code on the server and for the client.
 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

React Details

React

$500
React

React is a free and open-source front-end JavaScript library that is used for building interactive UIs and web applications. Its efficiency and flexibility let you compose complex UIs from small and isolated pieces of code called “components”.

Being in one of the most famous JavaScript UI libraries React for sure has millions of downloads every month. The best part is its features- it is complex, efficient, user-friendly, and fast. React is and will stay an in-demand skill in web development. Once you master React, you can become a much sought-after developer.

Once you have mastered React, you can learn:

   Node.js

   MongoDB

React Installation

Here are 4 easy ways to install React :

  Directly adding the React JavaScript file into the web page

  Using create-react-app

   With Codepen

  Using CodeSandbox

React Benefits
React is faster is due to its of its virtual DOM that renders everything in JavaScript and changes the things that are changed in actual DOM. Another feature that makes React work efficiently is the keys in Arrays through which React allows fast array changes in elements.

Have More Questions ?

Level Up Your AI Skills

Start Now

Drop us a message and we will guide you to the best course and pricing for your goals

You can also reach us at below platforms

Start your AI Journey

Fill in your details for personalized course recommendations

Get notified for Scheduled Training

Register for Free Webinar

Get notified for Webinar Leads