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