ReactJS Training
By
QSHORE TECHNOLOGIES

Trainer has 10+ Years of Experience in IT Industry and he is working into one of the reputed company, also having 6+ years of training experience.

Overall 10980 got placed into reputed MNC companies all over the india. 

Introduction to web development?

Html Essentials

• Introduction to HTML
• HTML Boilerplate
• Comments
• Paragraph Elements
• Heading Elements
• Introduction to the Chrome Inspector
• List Elements
• Anchor Tags
• Images

Semantics Html

•  What Exactly Is HTML5?
• Block vs. Inline Elements
• Elements: HR, BR, Sup & Sub
• Intro to Semantic Markup

HTML FORMS and TABLES

• Introducing HTML Tables
• Tables: TR, TD, and TH Elements
• Tables: Thead, Tbody, and Tfoot Elements
• Tables: Colspan & Rowspan
• The Form Element
• Common Input Types
• HTML Buttons
• The Name Attribute
• Radio Buttons, Checkboxes, & Selects
• Range & Text Area
• HTML5 Form Validations

CSS

• CSS Essential Training
• Introducing the CSS Box Model
• Understanding the Box Model
• Understanding Margin Collapsing and Removing Default Margins
• Applying Shorthand’s in Practice
• Understanding Box Sizing
• Understanding the Display Property
• Understanding an Unexpected "inline-block" Behavior
• Pseudo Classes & Pseudo Elements
• Working with "font-weight" & "border"
• Using Multiple CSS Classes & Combined Selectors
• Classes or IDs
• Selecting the Opposite with :not()

Position Elements

• Working with the "fixed" Value
• Creating a Fixed Navigation Bar
• Understanding the Z-Index
• Adding a Badge to our Package
• Styling & Positioning with "absolute" and "relative"
• Working with "overflow" and Relative Positioning
• Introducing "sticky" Positioning

Size and Units

• An Overview of Available Sizes & Units
• Fixed Positioning & "%" and Absolute Positioning & "%"
• Fixing the Height 100%
• Defining the Font Size in the Root Element
• "min-width/height" & "max-width/height"
• "rem" & "em"
• Understanding the Viewport Units "vw" &"vh"
• Using "auto" to Center Elements

Responsive

• Viewport Metatag (HTML) and Media Queries
•  Media Queries and Break Points

Forms and css

• Understanding Advanced Attribute Selectors
• Styling the Form Elements
• Validation Feedback

Flex Box

• Flexbox Principles , Flexbox Basics
• flex-direction, justify-content,
• flex-wrap - Multiple Rows & Wrapping Inside Flex Containers
• align-content - Justifying Content Along the Cross Axis
• order , align-self ,flex-grow, flex-shrink, flex-basis 

CSS Transition

• Understanding and Applying Transitions
• CSS "transition" Property Deep Dive
• Working with Timing Functions
• Transitions & "display"
• Using CSS Animations
• CSS "animation" Property Deep Dive
• Adding Multiple Keyframes
• Adding Animations to our Customers Page

JS

 Introdction to JS

• Values and Variables
• Data Types
• let, const and var
• Operators
• Strings and Template Literals
• Decisions: if / else Statements
• Type Conversion
• Truthy and Falsy Values
• Equality Operators: == vs. ===
• Boolean Logic
• Logical Operators
• The switch Statement
• Statements and Expressions
• The Conditional (Ternary) Operator

Intermediate

• JavaScript Releases: ES5, ES6+
• Functions
• Function Declarations vs. Expressions
• Arrow Functions
• Functions Calling Other Functions
• Arrays
• Basic Array Operations (Methods)
• Objects
• Object Methods
• Iteration: The for Loop
• Looping Arrays, Breaking and Continuing
• Looping Backwards and Loops in Loops
• The while Loop
• Converting and Checking Numbers
• Math and Rounding

DOM

• What's the DOM and DOM Manipulation
• Selecting and Manipulating Elements
• Handling Click Events
• Selecting, Creating, and Deleting Elements
• Styles, Attributes and Classes
• Types of Events and Event Handlers
• Passing Arguments to Event Handlers

Modern Operators and Strings

• Destructuring Arrays
• Destructuring Objects
• The Spread Operator (...)
• Rest Pattern and Parameters
• Short Circuiting (&& and ||)
• The Nullish Coalescing Operator (??)
• Logical Assignment Operators
• Looping Arrays: The for-of Loop
• Enhanced Object Literals
• Optional Chaining (?.)
• Looping Objects: Object Keys, Values, and Entries
• Sets
• Maps: Fundamentals
• Maps: Iteration
• Working With Strings

More on Function

• How Passing Arguments Works: Value vs. Reference
• First-Class and Higher-Order Functions
• Functions Accepting Callback Functions
• Functions Returning Functions
• Closures

Array and Methods

• Simple Array Methods
• The new at Method
• forEach
• The map Method
• The filter Method
• The reduce Method
• The find Method
• The findIndex Method

Dates in JS

• Creating Dates
• Operations With Dates
• Internationalizing Dates (Intl)
• Internationalizing Numbers (Intl)
• Timers: setTimeout and setInterval

OOPs

•  What is Object-Oriented Programming?
• OOP in JavaScript
• Constructor Functions and the new Operator
• ES6 Classes
• Setters and Getters
• Static Methods
• Object.create
• Inheritance "Classes": Constructor Functions
• Encapsulation: Protected Properties and Methods
• Encapsulation: Private Class Fields and Methods

Asynchronous JS

• Consuming Promises with Async/Await
• Error Handling With try...catch
• Returning Values from Async Functions
• Running Promises in Parallel

Modern JS

• Modern JavaScript Development
• Modules in JavaScript
• Exporting and Importing in ES6 Modules
• The Module Pattern
• CommonJS Modules
• Introduction to NPM

React JS

• Basic of React and working with components
• Introduction to React js
• Creating a new React Project
• What Are Components? And Why Is React All About Them?
• What is JSX?
• Adding Basic CSS Styling
• Passing Data via "props"

State in React

• Listening to Events & Working with Event Handlers Variations on Event Handlers
• Working with "State"
• Introducing the State System 
• A Closer Look at the "useState" Hook  
• Understanding the Re-Rendering Process
• State can be updated in many ways!
• Adding Form Inputs
• Listening to User Input
• Working with Multiple States
• Using One State Instead (And What's Better)
• Updating State That Depends On The Previous State
• Handling Form Submission
• Adding Two-Way Binding
• Child-to-Parent Component Communication (Bottom-up)
• Lifting The State Up
• Controlled vs Uncontrolled Components & Stateless vs Stateful Components

Css in React

• Setting Dynamic Inline Styles
• Setting CSS Classes Dynamically
• Introducing Styled Components
• Styled Components & Dynamic Props
• Styled Components & Media Queries
• Using CSS Modules
• Dynamic Styles with CSS Modules

Rendering list and Condition

• Rendering Lists of Data
• Using Stateful Lists
• Understanding "Keys"
• Outputting Conditional Content
• Adding Conditional Return Statements

Hooks

• useEffect
• useState
• useReducres
• Context Api
• Fragments
• Portals
• Refs

Debugging and optimization

• Understanding React Error Messages
• Analyzing Code Flow & Warnings
• Working with Breakpoints
• Using the React DevTools
• How React Really Works
• Component Updates In Action
• A Closer Look At Child Component Re-Evaluation
• Preventing Unnecessary Re-Evaluations with React.memo()
• Preventing Function Re-Creation with useCallback()
• useCallback() and its Dependencies
• A Closer Look At State & Components
• Understanding State Scheduling & Batching
• Optimizing with useMemo()

Using API with React

•  Overview of HTTP Requests
• Understanding the API
• Making an HTTP Request
• Using Async:Await
• Data Fetching Cleanup
• Thinking About Data Flow
• Child to Parent Communication
• Implementing Child to Parent Communication
• Handling Form Submission
• Handling Input Elements
• Running the Search
• Reminder on Async:Await
• Handling List Updates
• What's So Complex About Forms?
• Dealing With Form Submission & Getting User Input Values
• Adding Basic Validation
• Providing Validation Feedback
• Handling the "was touched" State
• React To Lost Focus
• Refactoring & Deriving States
• Managing The Overall Form Validity
• Applying Our Hook & Knowledge To A New Form

Routing

• What is Routing & Why?
• Installing React Router
• Defining & Using Routes
• Working with Links
• Using NavLinks
• Adding Dynamic Routes with Params
• Extracting Route Params
• Using "Switch" and "exact" For Configuring Routes
• Working with Nested Routes
• Redirecting The User
• Redirecting & Extracting Params
• Nested Routes
• Adding a "Not Found" Page
• Implementing Programmatic (Imperative) Navigation
• Query Parameters
• Getting Creative With Nested Routes

Redux

•  Redux vs React Context
• Creating a Redux Store for React
• Providing the Store
• Using Redux Data in React Components
• Dispatching Actions From Inside Components
• Attaching Payloads to Actions
• Working with Multiple State Properties
• How To Work With Redux State Correctly
• Adding State Slices
• Connecting Redux Toolkit State
• Migrating Everything To Redux Toolkit
• Working with Multiple Slices
• Reading & Dispatching From A New Slice
• Splitting Our Code
• Understanding Async Thunks

React Projects