Skip to content

ReactJS Training Template

Overview

React is a JavaScript-based UI development library. Facebook and an open-source developer community run it. Although React is a library rather than a language, it is widely used in web development. The library first appeared in May 2013 and is now one of the most commonly used frontend libraries for web development. ReactJS documentation link can be found here

Topics

Sr No.TopicsEfforts (in hrs)
1React Introduction
1.1What is React?1
1.2What makes the React faster? What is VDOM?3
1.3Why React is used?1
2Module bundler and basics
2.1ES6 features and pure functions - Fat arrow function, spread operator, destructuring, template string, classes and extends, etc3
2.2Webpack1
2.3What is module bundling? Examples of module bundlers1
2.4
  • What is webpack
  • How to configure or implement it with react and redux
3React Components and States
3.1JSX1
3.2What are the Components and states1
3.3Types of Components and their differences1
3.4Component’s Life Cycle and sequences to be followed4
3.5Naming conventions to define the Components and how to import and export the Components0.5
3.6Reusability of the Components1
3.7Why key is required for iterating over the components?0.5
3.8How to manage states inside the Components using functions1
3.9How to define functions and why to bind the functions1
3.10Practical on components3
3.11How to pass data and functions as a props in the child components and how to use those functions as a props0.5
3.12Practical on components with passing the props and executing the functions3
3.13React Hooks4
4React Router Dom
4.1What is React Router and why it is necessary to use?1
4.2How to define and access child routes?1
4.3How to pass data using routes?1
4.4How to create independent chunks for the components using react router3
4.5Practical on React router to render the components2
5Actions - AXIOS
5.1What is the Action? Why it is necessary to use Actions and when to use it?1
5.2What is AXIOS?1
5.3How to define an Action? with Practical3
5.4What are the Promises? Why to use it? with Practical3
5.5Action generator/creator2
5.6How to get the Response from APIs using Action directly in the Components(w/o using Redux) - Practical3
5.7What are the Action_Types? Why is it necessary to create it?0.5
6Storage - React Redux
6.1Why we need storage? What is Redux and Flux?2
6.2What is React Redux and why it is necessary to use?0.5
6.3What’s the Redux’s state and use with implementation?2
6.4What is the Middleware in React Redux? What are those? Which one to use and why? How to apply multiple middleware?3
6.5What are the Reducers, Combined Reducer?1
7React + Actions + Redux
7.1What are the Providers?1
7.2How to Connect Redux with the Components2
7.3What are the use of Action_types, payloads?1
7.4How to set the data(Response from APIs) from Actions to the Redux?2
7.5How to use the Redux data in the Components?2
7.5Redux hooks3
8redux-saga
8.1Different side effects provided by redux-saga6
OptionalRXJS
1Observables
2Observer
3subscription and unsubscription
4operators
OptionalRedux-Observable
1Different pipeline methods
2Cancellation of action
OptionalReact with typescript
1Namespace
2Runtime type declaration
3Prop interface
4Static/optional/advanced typing
Total Hours81.5