“REACT” Frontend Development Course Structure
Duration – 120 Hrs (4 Months)
Module 1: JavaScript, jQuery, ES6
JavaScript Types (Internal, External), Variables, Dialogue Boxes, Output, Operators (Logical, Assignment), Data Types,
Class-Object, Events & Event Listener, String & Methods, Array & Methods, Date & Moment, Loop (For, For/of, For/in,
While), Typeof & Type Conversion, RegExp, Errors (Try, Catch, Finally, Throw), Scope, Hoisting, this Keyword, Call-
Apply-Bind Functions, Arrow Functions, Async (Callback, Promise, Async/Await), JSON (Stringify, Parse, Objects),
Debugging, Timing Events, Location, Storage & Cookies.
jQuery CDN, Selectors, Events, Effects, Add Elements (Append, Prepend, After, Before), Remove Elements (Remove,
Empty), Manipulating CSS (AddClass, RemoveClass, ToggleClass, CSS), AJAX (GET, POST, LOAD)
Review of ES6 features.
Module 2: Introduction & Usage of TS (TypeScript)
Simple types and Special types, Arrays, Tuples, Object Types, Enum, Interface, Union, Function Return types,
Casting, Generics, Null, Undefined, Optional Chaining
Module 3: Introduction & Installation of React with TypeScript
React Introduction, Installation & Architecture, Library vs. Framework, Virtual DOM, Features, App Creation, JSX.
Module 4: React Fundamentals
Keys, Refs, Lists, Fragments , Rendering Elements along with Conditional Rendering, Components (Class, Functional,
Stateful, Stateless, Pure), Component Lifecycle, Difference between the Components, Events, Synthetic Events.
Forms using Formik and Yup (Validation)
Module 5: Props and States
Initialization, Defining and Updating of State, PropTypes, Unidirectional Data Flow, Props Validation, State vs Props,
Mutability and Immutability
Module 6: Hooks in React
Introduction of React Hooks, useState() , useEffect(), useRef(), useMemo(), useCallback(), Context
Module 7: React Router
Introduction of React Router, URL Parameters, Memory Router, Browser Router, Hash Router, Routes, Route, Link,
Switch, NavLink, Code Splitting (React.lazy, Suspense, Fallback), Nested Routing, Dynamic Routing, Protected Routing
with Authentication.
Module 8: REST API & React
Fundamentals of REST API, Methods, API integrations, Display Data using DataTable, CRUD application using ready
APIs, Error Handling.
Add-on: SSO with Google
Module 9: Redux
Introduction of React Redux, Redux -State, Store, Actions, Reducer, useSelector(), useDispatch(), useReducer() Add-on:
Redux Toolkit
Project Work
Once all modules have been successfully completed, students will be assigned a full-stack
application development project. The project will involve using provided functionality APIs to build
an industry-standard application. This will include creating a front-end user interface in React
with TypeScript and connecting it with the functional APIs. The project will be reviewed and
approved by a project manager directly from the industry.
