Course Content

  Chapter 1 - Introducing Course

• About Sahosoft
• Basic Recursion
• Course Introduction
• Course Overview
• Where to find the Course Source Code

  Chapter 2 - Introducing React JS

• What is React JS | React JS Introduction
• What is a scripting language?
  • Advantages of scripting languages
  • Scripting Language Category
    • Server Side Scripting Languages
    • Client Side Scripting Languages
  • Scripting Vs Programming
• What is JavaScript
  • What is JavaScript used for?
• What is JavaScript library
• What is the difference between JavaScript library and framework?
• React JS vs Angular
• Why React? 
• Advantages of React JS | Features of React
• Disadvantages of React JS | Limitations of React
• Where to use react JS
• What is single page application
• You should have a basic understanding to learn React

Chapter 3 - Setup Environment

• How to Setup React JS Project using CDN Links
• Basic Requirement to setup development environment 
  • Text Editor/Source Code Editor
  • Web Brower
  • React Developer tool
  • NPM
  • Webpack
  • Babel
• Complete Visual Studio Code 
• Complete NPM
• How to Install React Developer tool

Chapter 4 - Setup/Create React JS Project

• How to Setup/Create React JS Project using NPM
  • Using the create-react-app command
  • Using the NPM command (Using Webpack and Babel)
• React JS Folder Structure
• DOM   VS Virtual DOM
• How is Virtual DOM faster?
• How does React Use Virtual DOM?
• Strict mode in React JS
• Extends and Implements in React JS

• render() Methods
• React elements
  1. createElement() Methods
• ReactDOM.render() Methods 
• JSX (Javascript XML)

Chapter 5 - Module Import - Export

• What is Module 
• What is Export 
• Module - Export
  • Types of Export
    • Default Export
    • Named Export
  • Module - Default Export 
  • Module – Named Export 
• Module – Import
  • Types of Import
    • Default Import
    • Named Import
  • Module - Importing Default
  • Module - Importing Named
• Module - Importing All
• Module - Importing default & named

Chapter 6 – Basic JavaScript

• The HTML DOM (Document Object Model)
  • HTML DOM getElementById() Method
  • HTML DOM getElementsByTagName () Method
  • HTML DOM getElementsByClassName () Method
  • HTML DOM  getElementsByName () Method
  • HTML DOM  querySelector () Method
  • HTML DOM  querySelectorAll () Method
  • HTML DOM innerHTML Property
  • HTML DOM  innerText   Property
  • HTML DOM  textContent     Property
  • Differences between innerText, innerHTML and textContent 
  • outerHTML in javascript
  • outerText  in javascript
  • Changing the Value of an Attribute
  • JavaScript is Case Sensitive
• The JavaScript Console
  • JavaScript console.log() 
  • JavaScript warn.log()
  • JavaScript console.error()
  • JavaScript console. clear()
• JavaScript Debugging
  • The console.log() Method
  • Setting Breakpoints
  • The debugger Keyword
• JavaScript var
• JavaScript Arrays
  • Declare Array with Keyword new
    • JavaScript Avoid new Array()
  • Use [] instead new Array()
  • Access the Elements of an Array
  • Changing an Array Element
  • Access the Full Array
  • How to Recognize an Array
  • Array Properties and Methods
  • Looping Array Elements
  • JavaScript Array push() Method
  • JavaScript Array pop() Method
  • JavaScript Array unshift() Method
  • JavaScript Array shift() Method
• JavaScript Objects
  • Creating Objects in JavaScript
    • By object literal
    • By creating instance of Object directly (using new keyword)
    • By using an object constructor (using new keyword)
• JavaScript undefined
• JavaScript Empty Values
• JavaScript Null Values
• Difference between null, undefined in JavaScript
• JavaScript Functions
  • Why Functions?
  • How to Create a Function in JavaScript?
  • Invokes the Function
  • JavaScript Function with Parameters
  • Function Parameters and Arguments
  • Parameter Rules
  • Function Argument Missing in JavaScript
  • Default Parameter in a Function
  • arguments object in JavaScript function
  • Rest parameter in JavaScript function
  • Difference between Rest Parameter and   Arguments Object in JavaScript
  • Passing a function as a parameter in JavaScript
  • Functions Used as Variable Values
  • Functions Can Be Used as Values
  • JavaScript Function Invocation
• JavaScript dialog boxes
  • Alert Dialog Box
  • Confirmation Dialog Box
  • Prompt Dialog Box
• JavaScript Page Redirection
  • What is Page Redirection?
• Finding a String in a String
• Searching for a String in a String
• Extracting String Parts
  • The slice() Method
  • The substring() Method
  • The substr() Method
• Replacing String Content
• The concat() Method
• String.trim()
• Extracting String Characters
  • The charAt() Method
  • The charCodeAt() Method
  • Property access []
• Converting Arrays to Strings
  • toString() 
  • join() 
• Deleting Elements from Array
• Converting a String to an Array
• Splicing an Array
• Merging (Concatenating) Arrays
• Slicing an Array
• Sorting an Array
• Reversing an Array
• The History Object
  • History back() Method
  • History forward() Method
  • History go() Method
  • History length Property
• Numeric Sort
  • The Compare Function
  • Find the Highest (or Lowest) Array Value
• Sorting Object Arrays
• Array.map()
• Array.filter()
• Array.find()
• Array.findIndex()
• Array.reduce()
• Array.reduceRight()
• Array.every()
• Array.some()
• Using Math.max() & Math.min() on an Array
• JavaScript Array includes() Method
• Array valueOf() Method
• JavaScript Array fill() Method
• The toString() Method
• Converting Variables to Numbers
  • The Number() method
  • The parseInt() method
  • The parseFloat() method
• JavaScript JSON
  • JavaScript JSON parse() Method
  • JavaScript JSON stringify() Method
• HTML Attributes
  • HTML DOM setAttribute() Method
  • HTML DOM getAttribute() Method
  • HTML DOM hasAttribute() Method
  • HTML DOM removeAttribute() Method

Chapter 7 – Advance JavaScript

• How JavaScript Works
• What is Execution Context 
• What is Execution Stack 
• What is Creation Phase 
• What is Execution Phase
• Phase of execution context
  • Creation Phase
  • Execution Phase
• Property of execution context
  • Variable Object
  • Scope Chain
  • 'this' Variable
• Function Hoisting in JavaScript
• Variable Hoisting in JavaScript
• Scope Chain & Lexical Scoping in JavaScript
• this in JavaScript
• JavaScript Object
  • JavaScript Objects Are Mutable
  • JavaScript Object Properties
  • Accessing JavaScript Properties
  • JavaScript Object Loop
  • Adding/Deleting New Properties in Object
  • JavaScript Object Methods
    • Accessing Object Methods
    • Adding a Method to an Object
  • JavaScript Object.values()
  • JavaScript JSON.stringify()
  • JavaScript Stringify Functions/Array
• JavaScript Object Accessors
  • JavaScript Accessors (Getters and Setters)
  • Why Using Getters and Setters?
• JavaScript Object Constructors
• JavaScript Object Prototypes
• JavaScript Data Types
  • Primitive data type
  • Non-primitive (reference) data type
• Pass by Value Vs Pass by Reference in JavaScript
• Shallow copy and Deep copy in JavaScript
• Functions is First Class Citizens
• Callback Function in JavaScript
• Higher Order Function in JavaScript
• Immediately Invoked Function Expression - IIFE
  • Advantages of IIFE
• Closure in JavaScript
• Call Method in JavaScript
• Apply Method in JavaScript
• The Difference Between call() and apply()
• Bind Method in JavaScript
• forEach() Method in JavaScript
• for of loop in JavaScript
• for in loop in JavaScript
• localStorage and sessionStorage in JavaScript
  • What is HTML Web Storage?
  • What is localStorage?
  • What is sessionStorage?
  • Set/Updating Entries
  • Deleting Entries
  • Clearing Everything
  • Storing Json Objects
  • Checking for Items
  • Checking for Support
  • Iterating Over Items
• What is Synchronous Programming in JavaScript
• What is Asynchronous Programming in JavaScript
• Synchronous vs Asynchronous Programming in JavaScript
• Why Asynchronous?
• Event Loop in JavaScript

Chapter 8 – ES6/ES7/ES8

• What is ECMAScript?
• ECMAScript Editions
• var, let & const
• Template Literals in JavaScript
• Template literals (template strings) Method
• Array Destructuring 
• Object Destructuring
• Default Parameters
• Rest Parameters
• Fat Arrow Function
• Spread Operator
• Math.sign()
• Math.trunc()
• Exponentiation Operator
• Numbers & Global Methods
  • isFinite() Method
  • isNaN() Method
  • Number.islnteger() Method
• Class
• Callback hell in JavaScript
• Promises in JavaScript
• Async Await in JavaScript
• Generators in ES6 JavaScript
  • What are normal function?
  • What are Generators?

Chapter 9 – JSX in Depth (Complete JSX)

• JSX in Depth 
  • Using JSX: Single Element
  • Using JSX: Nested Elements
  • Expressions in JSX
  • Elements Must Be Closed
  • Attributes
    • As string literals
    • As expressions
  • The style attribute changes its semantics
    • Styling
  • Comments
  • JSX not allow to use if-else statements
  • camelCase is the new standard
  • Naming Convention
  • How to loop in JSX

Chapter 10 – Babel and webpack in React JS

• Babel in React JS
• What is Babel?
  • Transform syntax
  • Polyfill features that are missing in your target environment
  • Babel convert JSX syntax.
• Webpack in React JS

Chapter 11 –React JS

• Components in React JS
  • Types of components
    • Functional Components
    • Class Components
  • Create a Function Component
  • Create a Class Component
  • Component Constructor
  • Components in Components
• Props in React JS
  • Props data types
    • String
    • Integer
    • Boolean
    • Array
    • Objects
    • Functions
  • Props in Function-Based Component
  • Props in Class-Based Component
  • Pure function VS Impure function
  • Props are Read-Only
  • Passing data from Parent component to Child Component
  • Props in the Constructor
  • Default Props
  • Children Props (Props.children)
• PropTypes in React Js
  • any 
  • Boolean
  • String
  • Number
  • func 
  • array
  • object
  • symbol
• Props Validation
  • Flagging Props as Mandatory
  • Specifying a Range of Valid Prop Values
  • Specifying a set of types for the prop
  • Set Default Prop Values
  • PropTypes.shape
  • Requiring Single Child
  • PropTypes: Shape and Types validation
    • PropTypes.arrayOf()
    • PropTypes.objectOf()
  • PropTypes: instance validation
  • An object with warnings on extra properties
• Fragments in React Js
• State in React Js
  • Creating the state Object
  • Way to initialize state
    • Directly inside class (Without Constructor)
    • Inside the constructor (With Constructor)
  • Using the state Object
  • Changing the state Object
    • The setState() Method
      • setState accepts a function as its parameter
      • setState accepts a callback
      • setState is asynchronous (*)
      • reconciliation process
    •  
• Call super(props) before using this.props
• Never call setState() inside constructor()
• Difference between State and Props
• React Events
  • Adding Events
  • Event Handlers
    • Event declaration in plain HTML
    • Event declaration in React
    • Prevent the default behavior
  • Bind this
  • Passing Arguments
  • React Event Object
  • Why we need to bind() event handlers in Class Components in React
    • Blame JavaScript, Not React
  • Using Arrow Functions to avoid binding `this` in React
  • Supported Events in React JS
• How to access child's state from parent component in React
• How to update parent state from child component in React
• Passing data from child components to parent components
• Composing Components
• Extracting Components
• Updating the Rendered Element
• React Conditional Rendering
  • If
  • Element Variables
  • logical && operator
  • Ternary operator
  • Preventing Component from Rendering
  • Switch case operator
  • Conditional Rendering with enums
• React Lists 
• React Keys
  • Using an id as the key
  • Using the index as the key
• Nesting Lists in JSX
• Looping Over an Object Instead of an Array
• Extracting Components with Keys
• Embedding map() in JSX
• React Components Styling
  • Inline CSS
  • Normal CSS (External Stylesheet)
  • CSS Modules
  • Multiple classnames with CSS Modules in React
  • CSS in JS 
• React Sass
  • What is Sass
  • Can I use Sass?
  • Create a Sass file
• How to Add Google Font into React Applications
• How to Type Emoji in VS Code in 2020 | VS Code Emoji Extension
• How to Add Font Awesome Icon in React App
• How to Install and Use Bootstrap in React JS
• How to use Material UI Icons in React App
• How to use Material UI in React App
• ES7 ReactReduxGraphQLReact-Native snippets
• Phase of Component
• Phase of Component
  • Mounting
  • Updating
  • Unmounting
• Component lifecycle hooks or lifecycle methods
• Mounting
  • constructor()
  • getDerivedStateFromProps()
  • render()
  • componentDidMount()
• Updating
  • getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()
• Unmounting
  • componentWillUnmount
• React Component API
  • setState()
  • forceUpdate()
  • findDOMNode()
• Hooks in React JS
  • When to use a Hooks
  • Pre-requisites for React Hooks
  • Rules of Hooks
  • What exactly is a Hook? 
  • Advantages of Hooks
  • Built-in Hooks
    • useState
    • useEffect
    • useContext
  • Custom Hook in React JS
• Higher order components or HOC in React JS
• Context in React JS (Context API) 
• useContext hook and multiple context in React JS
• useReducer hook in React JS
• Context with useContext and useReducer for state management in React JS
• Form in React JS
  • Creating Form
  • Handling Forms
  • Submitting Forms
  • Types of component
    • Uncontrolled component
    • Controlled component
  • Handling Multiple Inputs in Controlled Component
  • Difference table between controlled and uncontrolled component
  • React Refs
    • How to create Refs
    • How to access Refs
    • Refs current Properties
    • Add Ref to DOM elements
    • Callback refs
    • Pass ref from a parent component to a child component using callbacks
    • The ref attribute as a string
    • Forwarding a ref from one component to another
    • Using ref for form validation
    • React with useRef()
  • Form with custom inputs in React JS
  • Images/Assets in React JS
    • Inside Public Folder
      • When use Public Folder  
    • Inside src Folder
  • Form Validations in React JS
• React Router 
  • Need of React Router
  • React Router Installation
  • What is Route?
  • Adding Navigation using Link component
  • What is < Link> component?
  • What is < NavLink> component? 
  • active styles using NavLink
  • React Router Switch
  • What is a 404 page?
  • How to add a 404 page in react?
  • Url Parameters
  • Nested Routing in React
  • Path and match
    • match.url
    • match.path
    • match.params
  • Programmatically navigate
    • What is Programmatic navigation?
    • How to Navigate Programmatically in react-router?
  • How to Set React Router Default Route Redirect to /home
  • Protected Routes
  • withRouter
  • Custom Routes
  • Consuming APIs in React 
    • Consuming APIs Using the Fetch API
    • Consuming APIs with Axios
      • MAKING MULTIPLE REQUESTS WITH AXIOS
  • Fetch Vs Axios

Chapter 12 –React Redux

• Introduction to redux
• Why should I use Redux
• What is React Redux
  • What is Actions
  • What is Reducers
  • What is Store
  • What is Dispatch
  • What is Connect
  • What is Action Types
  • What is Action Creators
• Redux dependencies
  • Redux 
  • React Redux 
  • Redux Thunk 
  • Redux DevTools Extension 
• What is Provider
• Extending Redux functionality
• Combine more than one reducer in redux
• useSelector and useDispatch hooks in react redux

Chapter 13 – Third Party Packages Implementation

• React Table
• node-sass
• sweetalert2
• react-tabs
• react-responsive-modal
• React Feather Icons
• React-Toastify
• React Count To
• React Google Charts
• react-helmet
• react-slick
• React Multilingual with redux
• react-slide-toggle
• React Sticky Box
• react-infinite-scroll-component
• react-input-range
• Stripe payment gateway in react js

Chapter 14 – Overview of JSON Web Tokens (JWT) 

• JSON Web Tokens
• How JWT Tokens Are Used
• Adding JWT to HTTP Header
• How The Server Makes Use of JWT Tokens?

Chapter 15 – Live Project Training

• e commerce Project (Like FilpKart, Amazon)