“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 ([Link], 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.
