● HTML Basics, Elements, Attributes, Styles
● Forms, Form Elements, Input Element Types
● Input Attributes, File Paths, Script tag
● HTML & XHTML

● CSS Introduction, Syntax, Selectors, Styling
● Pseudo class, Pseudo Elements
● CSS Tables, CSS Box Models
● CSS Opacity, CSS Navigation Bar, Dropdowns

● JavaScript Statements, Keywords, Functions
● JavaScript Programs, Operators, Functions
● Function Parameters, Function Return Types
● Data Types, Primitive Types

● Object Oriented Programming, Object Creation
● Adding Methods of Objects
● JavaScript Loops & Iteration
● Adding Properties of Objects
● JavaScript Conditional Statements
● Enumerating Properties, Callbacks, JSON

● What is React?
● Why React?
● React version history
● React 16 vs React 15
● Just React – Hello World
● Using create-react-app
● Anatomy of react project
● Running the app
● Debugging first react app

● Working with React. createElement
● Expressions
● Using logical operators
● Specifying attributes
● Specifying children
● Fragments

● Significance of component architecture
● Types of components
● Functional
● Class based
● Pure
● Component Composition

● What is state and it significance
● Read state and set state
● Passing data to component using props
● Validating props using prop Types
● Supplying default values to props using default Props

● Using react key prop
● Using map function to iterate on arrays to generate elements

● Understanding React event system
● Understanding Synthetic event
● Passing arguments to event handlers

● Understand the lifecycle methods
● Handle errors using error boundaries

● What is context
● When to use context
● Create Context Drrr
● Context.Provider
● Context.Consumer
● Reading context in class

● What is code splitting
● Why do you need code splitting
● React.lazy
● Suspense
● Route-based code splitting

● What are hooks
● Why do you need hooks
● Different types of hooks
● Using state and effect hooks
● Rules of hooks

● Setting up react router
● Understand routing in single page applications
● Working with BrowserRouter and HashRouter components
● Configuring route with Route component
● Using Switch component to define routing rules
● Making routes dynamic using route params
● Working with nested routes
● Navigating to pages using Link and NavLink component
● Redirect routes using Redirect Component
● Using Prompt component to get consent of user for navigation
● Path less Route to handle failed matches

● What is redux
● Why redux
● Redux principles
● Install and setup redux
● Creating actions, reducer and store

● What is Immutable.js?
● Immutable collections
● Lists
● Maps
● Sets

● What is React Redux
● Why React Redux
● Install and setup
● Presentational vs Container components
● Understand high order component
● Understanding mapStateToProps and mapDispatchtToProps usage

● Why redux middleware
● Available redux middleware choices
● What is redux saga
● Install and setup redux saga
● Working with Saga helpers
● Sagas vs promises

● Understand the significance of unit testing
● Understand unit testing jargon and tools
● Unit testing react components with Jest
● Unit testing react components with enzyme

● What is webpack
● Why webpack
● Install and setup webpack
● Working with webpack configuration file
● Working with loaders
● Working with plugins
● Setting up Hot Module Replacement

● What is server-side rendering (SSR)?
● Why SSR
● Working with render To String and render To Static Markup methods

● Airline reservation system
● Data visualization software
● Electricity billing system
● Network packet sniffer
● E- healthcare management system