React JS:

React.js is a popular JavaScript library for building user interfaces, particularly single-page applications where you need a dynamic and responsive user experience. React.js often just called React.

React provides a powerful, flexible, and efficient way to build modern user interfaces, making it a popular choice for both small and large-scale projects and the strong ecosystem of tools and libraries built around it, such as React Router for routing, Redux for state management, and Next.js for server-side rendering.

Why to use React JS

Using React.js can offer numerous benefits for web development projects. Here’s a rundown of why many developers choose React:

1. Component-Based Architecture

• Reusability: Components in React are reusable, which means you can create a piece of UI once and use it in multiple places throughout your application. This promotes code reuse and consistency.
• Encapsulation: Each component manages its own state and logic, which makes it easier to reason about the parts of your UI in isolation.

2. Virtual DOM

• Performance: React’s virtual DOM allows for efficient updates by minimizing direct manipulation of the actual DOM. Changes are first made in the virtual DOM and then applied to the actual DOM in the most efficient way possible.
• Optimized Rendering: React’s reconciliation algorithm helps in optimizing the rendering process, leading to faster performance for dynamic applications.

3. Declarative Syntax

• Ease of Use: React’s declarative approach lets you describe what the UI should look like at any given state, rather than detailing how to achieve that state. This makes your code more predictable and easier to debug.
• Enhanced Readability: The code is often more readable and easier to maintain since it focuses on the “what” rather than the “how”.

4. JSX Syntax

• HTML-Like Code: JSX allows you to write HTML-like code within JavaScript, which can make the development process more intuitive and close to the design process.
• Enhanced Development Experience: The JSX syntax can help developers visualize the UI structure more clearly and integrate it with JavaScript logic seamlessly.

5. Strong Ecosystem and Community

• Rich Ecosystem: React has a robust ecosystem of tools, libraries, and extensions. Popular ones include React Router for routing, Redux or Context API for state management, and Next.js for server-side rendering.
• Active Community: A large and active community means that you’ll have access to extensive resources, tutorials, and third-party libraries. The community support can help in solving problems and learning new best practices.

6. React Hooks

• Functional Components: Hooks allow you to use state and other React features without writing class components. This makes functional components more powerful and simplifies code.
• Cleaner Code: Hooks can help reduce the complexity of components by using simpler and more reusable pieces of logic.

7. Unidirectional Data Flow

• Predictability: React’s one-way data binding ensures that data flows in a single direction, making it easier to understand how data changes affect the UI. This can simplify debugging and state management.

8. Scalability

• Large-Scale Applications: React is well-suited for building large-scale applications. Its component-based architecture and ecosystem tools help manage complexity as the application grows.

9. Server-Side Rendering (SSR) and Static Site Generation (SSG)

• Improved Performance: With frameworks like Next.js, React supports server-side rendering and static site generation, which can improve the initial load time and SEO of your application.

10. Integration with Other Technologies

• Versatility: React can be integrated with other libraries and frameworks, making it flexible for use in various tech stacks. It can also be used with mobile development frameworks like React Native.

Module 1: Introduction

• React JS Introduction
• What is a scripting language?
• Scripting Vs Programming
• What is JavaScript
• What is JavaScript library
• What is the difference between JavaScript library and framework?
• React JS vs. Angular
• Why React?
• Features and Limitations of React
• Where to use react JS
• What is single page application

Module 2: 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

Module 3: 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 o createElement() Methods
• render() Methods
• JSX (JavaScript XML)

Module 4: – Module Import – Export

• What is Module?
• Module – Export
  • What is Export
  • Types of Export
    • Default Export
    • Named Export
  • Module – Import
    • Types of Import
      • Default Import
      • Named Import
    • Module – Importing All

Module 5: Basic JavaScript

• The HTML DOM (Document Object Model)
• The JavaScript Console
• JavaScript
• JavaScript var
• JavaScript Arrays
• JavaScript Objects
• 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
• JavaScript Page Redirection
• Finding a String in a String
• Searching for a String in a String
• Extracting String Parts
• Replacing String Content
• The concat() Method
• trim()
• Extracting String Characters
• 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() , 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
• HTML Attributes

Module 6: 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
• 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

Module 7: 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

Module 8: 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

Module 9: 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
  • shape
  • Requiring Single Child
  • PropTypes: Shape and Types validation
    • arrayOf()
    • 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
    • url
    • path
    • 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

Module 10: 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

Module 11: 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

Module 12: 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?