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?
o Advantages of scripting languages
o Scripting Language Category
Server Side Scripting Languages
Client Side Scripting Languages
o Scripting Vs Programming
What is JavaScript
o 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
o Text Editor/Source Code Editor
o Web Brower
o React Developer tool
o NPM
o Webpack
o 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
o Using the create-react-app command
o 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
o createElement() Methods
ReactDOM.render() Methods
JSX (Javascript XML)
Chapter 5 - Module Import - Export
What is Module
What is Export
Module - Export
o Types of Export
Default Export
Named Export
o Module - Default Export
o Module – Named Export
Module – Import
o Types of Import
Default Import
Named Import
o Module - Importing Default
o Module - Importing Named
Module - Importing All
Module - Importing default & named
Chapter 6 – Basic JavaScript
The HTML DOM (Document Object Model)
o HTML DOM getElementById() Method
o HTML DOM getElementsByTagName () Method
o HTML DOM getElementsByClassName () Method
o HTML DOM getElementsByName () Method
o HTML DOM querySelector () Method
o HTML DOM querySelectorAll () Method
o HTML DOM innerHTML Property
o HTML DOM innerText Property
o HTML DOM textContent Property
o Differences between innerText, innerHTML and textContent
o outerHTML in javascript
o outerText in javascript
o Changing the Value of an Attribute
o JavaScript is Case Sensitive
The JavaScript Console
o JavaScript console.log()
o JavaScript warn.log()
o JavaScript console.error()
o JavaScript console. clear()
JavaScript Debugging
o The console.log() Method
o Setting Breakpoints
o The debugger Keyword
JavaScript var
JavaScript Arrays
Declare Array with Keyword new
JavaScript Avoid new Array()
Use [] instead new Array()
o Access the Elements of an Array
o Changing an Array Element
o Access the Full Array
o How to Recognize an Array
o Array Properties and Methods
o Looping Array Elements
o JavaScript Array push() Method
o JavaScript Array pop() Method
o JavaScript Array unshift() Method
o JavaScript Array shift() Method
JavaScript Objects
o 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
o Why Functions?
o How to Create a Function in JavaScript?
o Invokes the Function
o JavaScript Function with Parameters
o Function Parameters and Arguments
o Parameter Rules
o Function Argument Missing in JavaScript
o Default Parameter in a Function
o arguments object in JavaScript function
o Rest parameter in JavaScript function
o Difference between Rest Parameter and Arguments Object in JavaScript
o Passing a function as a parameter in JavaScript
o Functions Used as Variable Values
o Functions Can Be Used as Values
o JavaScript Function Invocation
JavaScript dialog boxes
o Alert Dialog Box
o Confirmation Dialog Box
o Prompt Dialog Box
JavaScript Page Redirection
o What is Page Redirection?
Finding a String in a String
Searching for a String in a String
Extracting String Parts
o The slice() Method
o The substring() Method
o The substr() Method
Replacing String Content
The concat() Method
String.trim()
Extracting String Characters
o The charAt() Method
o The charCodeAt() Method
o Property access []
Converting Arrays to Strings
o toString()
o 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
o History back() Method
o History forward() Method
o History go() Method
o History length Property
Numeric Sort
o The Compare Function
o 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
o The Number() method
o The parseInt() method
o The parseFloat() method
JavaScript JSON
o JavaScript JSON parse() Method
o JavaScript JSON stringify() Method
HTML Attributes
o HTML DOM setAttribute() Method
o HTML DOM getAttribute() Method
o HTML DOM hasAttribute() Method
o 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
o Creation Phase
o Execution Phase
Property of execution context
o Variable Object
o Scope Chain
o 'this' Variable
Function Hoisting in JavaScript
Variable Hoisting in JavaScript
Scope Chain & Lexical Scoping in JavaScript
this in JavaScript
JavaScript Object
o JavaScript Objects Are Mutable
o JavaScript Object Properties
o Accessing JavaScript Properties
o JavaScript Object Loop
o Adding/Deleting New Properties in Object
o JavaScript Object Methods
Accessing Object Methods
Adding a Method to an Object
o JavaScript Object.values()
o JavaScript JSON.stringify()
o JavaScript Stringify Functions/Array
JavaScript Object Accessors
o JavaScript Accessors (Getters and Setters)
o Why Using Getters and Setters?
JavaScript Object Constructors
JavaScript Object Prototypes
JavaScript Data Types
o Primitive data type
o 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
o 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
o What is HTML Web Storage?
o What is localStorage?
o What is sessionStorage?
o Set/Updating Entries
o Deleting Entries
o Clearing Everything
o Storing Json Objects
o Checking for Items
o Checking for Support
o 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
o isFinite() Method
o isNaN() Method
o Number.islnteger() Method
Class
Callback hell in JavaScript
Promises in JavaScript
Async Await in JavaScript
Generators in ES6 JavaScript
o What are normal function?
o What are Generators?
Chapter 9 – JSX in Depth (Complete JSX)
JSX in Depth
o Using JSX: Single Element
o Using JSX: Nested Elements
o Expressions in JSX
o Elements Must Be Closed
o Attributes
As string literals
As expressions
o The style attribute changes its semantics
Styling
o Comments
o JSX not allow to use if-else statements
o camelCase is the new standard
o Naming Convention
o How to loop in JSX
Chapter 10 – Babel and webpack in React JS
Babel in React JS
What is Babel?
o Transform syntax
o Polyfill features that are missing in your target environment
o Babel convert JSX syntax.
Webpack in React JS Chapter 11 –React JS
Components in React JS
o Types of components
Functional Components
Class Components
o Create a Function Component
o Create a Class Component
o Component Constructor
o Components in Components
Props in React JS
o Props data types
String
Integer
Boolean
Array
Objects
Functions
o Props in Function-Based Component
o Props in Class-Based Component
o Pure function VS Impure function
o Props are Read-Only
o Passing data from Parent component to Child Component
o Props in the Constructor
o Default Props
o Children Props (Props.children)
PropTypes in React Js
o any
o Boolean
o String
o Number
o func
o array
o object
o symbol
Props Validation
o Flagging Props as Mandatory
o Specifying a Range of Valid Prop Values
o Specifying a set of types for the prop
o Set Default Prop Values
o PropTypes.shape
o Requiring Single Child
o PropTypes: Shape and Types validation
PropTypes.arrayOf()
PropTypes.objectOf()
o PropTypes: instance validation
o An object with warnings on extra properties
Fragments in React Js
State in React Js
o Creating the state Object
o Way to initialize state
Directly inside class (Without Constructor)
Inside the constructor (With Constructor)
o Using the state Object
o 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
o Adding Events
o Event Handlers
Event declaration in plain HTML
Event declaration in React
Prevent the default behavior
o Bind this
o Passing Arguments
o React Event Object
o Why we need to bind() event handlers in Class Components in React
Blame JavaScript, Not React
o Using Arrow Functions to avoid binding `this` in React
o 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
o If
o Element Variables
o logical && operator
o Ternary operator
o Preventing Component from Rendering
o Switch case operator
o Conditional Rendering with enums
React Lists
React Keys
o Using an id as the key
o 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
o Inline CSS
o Normal CSS (External Stylesheet)
o CSS Modules
o Multiple classnames with CSS Modules in React
o CSS in JS
React Sass
o What is Sass
o Can I use Sass?
o 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
o Mounting
o Updating
o Unmounting
Component lifecycle hooks or lifecycle methods
Mounting
o constructor()
o getDerivedStateFromProps()
o render()
o componentDidMount()
Updating
o getDerivedStateFromProps()
o shouldComponentUpdate()
o render()
o getSnapshotBeforeUpdate()
o componentDidUpdate()
Unmounting
o componentWillUnmount
React Component API
o setState()
o forceUpdate()
o findDOMNode()
Hooks in React JS
o When to use a Hooks
o Pre-requisites for React Hooks
o Rules of Hooks
o What exactly is a Hook?
o Advantages of Hooks
o Built-in Hooks
useState
useEffect
useContext
o 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
o Creating Form
o Handling Forms
o Submitting Forms
o Types of component
Uncontrolled component
Controlled component
o Handling Multiple Inputs in Controlled Component
o Difference table between controlled and uncontrolled component
o 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()
o Form with custom inputs in React JS
o Images/Assets in React JS
Inside Public Folder
When use Public Folder
Inside src Folder
o Form Validations in React JS
React Router
o Need of React Router
o React Router Installation
o What is Route?
o Adding Navigation using Link component
o What is < Link> component?
o What is < NavLink> component?
o active styles using NavLink
o React Router Switch
o What is a 404 page?
o How to add a 404 page in react?
o Url Parameters
o Nested Routing in React
o Path and match
match.url
match.path
match.params
o Programmatically navigate
What is Programmatic navigation?
How to Navigate Programmatically in react-router?
o How to Set React Router Default Route Redirect to /home
o Protected Routes
o withRouter
o Custom Routes
o Consuming APIs in React
Consuming APIs Using the Fetch API
Consuming APIs with Axios
MAKING MULTIPLE REQUESTS WITH AXIOS
o Fetch Vs Axios Chapter 12 –React Redux
Introduction to redux
Why should I use Redux
What is React Redux
o What is Actions
o What is Reducers
o What is Store
o What is Dispatch
o What is Connect
o What is Action Types
o What is Action Creators
Redux dependencies
o Redux
o React Redux
o Redux Thunk
o 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)
