React JS Training in Gurgaon

1. Introduction
2. What is React?
3. Real-World SPAs & React Web Apps
4. Writing our First React Code
5. Why Should we Choose React?
   
6. React Alternatives
7. Understanding Single Page Applications and Multi Page Applications
8. Course Outline
   
9. How to get the Most out of This Course
10. Useful Resources & Links
    

1. Module Introduction
2. Understanding "let" and "const"
3. Arrow Functions
4. Exports and Imports
5. Understanding Classes
6. Classes, Properties and Methods
7. The Spread & Rest Operator
8. Destructuring
9. Reference and Primitive Types Refresher
10. Refreshing Array Functions
11. Wrap Up
12. Next-Gen JavaScript - Summary
13. JS Array Functions
    

1. Module Introduction
2. The Build Workflow
3. Using Create React App
4. Understanding the Folder Structure
5. Understanding Component Basics
6. Understanding JSX
7. JSX Restrictions
8. Creating a Functional Component
9. Components & JSX Cheat Sheet
10. Working with Components & Re-Using Them
11. Outputting Dynamic Content
12. Working with Props
13. Understanding the Children Property
14. Understanding & Using State
15. Props & State
16. Handling Events with Methods
17. To Which Events Can You Listen?
18. Manipulating the State
19. Functional (Stateless) vs class (Stateful) Components
20. Passing Method References Between Components
21. Adding Two Way Binding
22. Adding Styling with Stylesheets
23. Working with Inline Styles
    

1. Module Introduction
2. Rendering Content Conditionally
3. Handling Dynamic Content "The JavaScript Way"
4. Outputting Lists (Intro)
5. Outputting Lists
6. Lists & State
7. Updating State Immutably
8. Lists & Keys
9. Flexible Lists
10. Wrap Up
11. Time to Practice - Lists & Conditionals
    

1. Module Introduction
2. Outlining the Problem Set
3. Setting Styles Dynamically
4. Setting Class Names Dynamically
5. Adding and Using Radium
6. Using Radium for Media Queries
7. MUST READ: Enabling CSS Modules
8. Enabling & Using CSS Modules
9. More on CSS Modules
10. Adding Pseudo Selectors
11. Working with Media Queries
12. Useful Resources & Links

1. Module Introduction
2. Understanding Error Messages
3. Finding Logical Errors by using Dev Tools & Sourcemaps
4. Working with the React Developer Tools
5. Using Error Boundaries (React 16+)
   

1. Module Introduction
2. A Better Project Structure
3. Splitting an App Into Components
4. Comparing Stateless and Stateful Components
5. Understanding the Component Lifecycle
6. Converting Stateless to Stateful Components
7. Component Creation Lifecycle in Action
8. componentWillUnmount()
9. Component Updating Lifecycle Hooks
10. Component Updating Lifecycle in Action
11. Updating Lifecycle Hooks (Triggered by State Changes)
12. Performance Gains with PureComponents
13. How React Updates the App & Component Tree
14. Understanding React's DOM Updating Strategy
15. Windows Users Must Read - File Downloads
16. Returning Adjacent Elements (React 16+)
17. React 16.2 Feature: Fragments
18. Understanding Higher Order Components (HOCs)
19. A Different Approach to HOCs
20. Passing Unknown Props
21. Using setState Correctly
22. Validating Props
23. Available PropTypes
24. Using References ("ref")
25. More on the React ref API (16.3)
26. The Context API (React 16.3)
27. More on the Context API (16.6)
28. Updated Lifecycle Hooks (React 16.3)
29. The "memo" Method (16.4)

1. Module Introduction
2. Understanding Http Requests in React
3. Understanding our Project and Introducing Axios
4. Creating a Http Request to GET Data
5. Rendering Fetched Data to the Screen
6. Transforming Data
7. Making a Post Selectable
8. Fetching Data on Update (without Creating Infinite Loops)
9. POSTing Data to the Server
10. Sending a DELETE Request
11. Fixing a Bug
12. Handling Errors Locally
13. Adding Interceptors to Execute Code Globally
14. Removing Interceptors
15. Setting a Default Global Configuration for Axios
16. Creating and Using Axios Instances

1. Module Introduction
2. Planning an App in React - Core Steps
3. Planning our App - Layout and Component Tree\
4. Planning the State
5. Setting up the Project
6. Creating a Layout Component
7. Starting Implementation of The Burger Builder Container
8. Adding a Dynamic Ingredient Component
9. Adding Prop Type Validation
10. Starting the Burger Component\
11. Outputting Burger Ingredients Dynamically\
12. Calculating the Ingredient Sum Dynamically
13. Adding the Build Control Component
14. Outputting Multiple Build Controls
15. Connecting State to Build Controls
16. Removing Ingredients Safely
17. Displaying and Updating the Burger Price
18. Adding the Order Button
19. Creating the Order Summary Modal
20. Showing & Hiding the Modal (with Animation!)
21. Implementing the Backdrop Component
22. Adding a Custom Button Component
23. Implementing the Button Component
24. Adding the Price to the Order Summary
25. Adding a Toolbar
26. Using a Logo in our Application
27. Adding Reusable Navigation Items
28. Creating a Responsive Sidedrawer
29. Working on Responsive Adjustments
30. More about Responsive Adjustments
31. Reusing the Backdrop
32. Adding a Sidedrawer Toggle Button
33. Adding a Hamburger Icon
34. Improving the App - Introduction
35. Prop Type Validation
36. Improving Performance
37. Using Component Lifecycle Methods
38. Changing the Folder Structure
    

1. Module Introduction
2. Firebase & The Right Database
3. Creating the Firebase Project
4. Creating the Axios Instance
5. Sending a POST Request
6. Displaying a Spinner while Sending a Request
7. Handling Errors
8. Retrieving Data from the Backend
9. Removing Old Interceptors
10. Useful Resources & Links
    

1. Module Introduction
2. Routing and SPAs
3. Setting Up Links
4. Setting Up the Router Package
5. react-router vs react-router-dom
6. Preparing the Project For Routing
7. Setting Up and Rendering Routes

1. Rendering Components for Routes
2. Switching Between Pages
3. Using Links to Switch Pages
4. Using Routing-Related Props
5. The "withRouter" HOC & Route Props
6. Absolute vs Relative Paths
7. Absolute vs Relative Paths (Article)
8. Styling the Active Route
9. Passing Route Parameters
10. Extracting Route Parameters
11. Parsing Query Parameters & the Fragment
12. Using Switch to Load a Single Route
13. Navigating Programmatically
14. Additional Information Regarding Active Links
15. Understanding Nested Routes
16. Creating Dynamic Nested Routes
17. Redirecting Requests
18. Conditional Redirects
19. Using the History Prop to Redirect (Replace)
20. Working with Guards
21. Handling the 404 Case (Unknown Routes)
22. Loading Routes Lazily
23. Lazy Loading with React Suspense (16.6)
24. Routing and Server Deployment
25. Time to Practice – Routing
    

1. Module Introduction
2. Building the Checkout Container
3. Setting Up Routing & Routes
4. Navigating to the Checkout Page
5. Navigating Back & To Next Page
6. Passing Ingredients via Query Params
7. Navigating to the Contact Data Component
8. Order Submission & Passing Data Between Pages
9. Adding an Orders Page
10. Implementing Navigation Links
11. Fetching Orders
12. Outputting the Orders
    

1. Module Introduction
2. Analyzing the App
3. Creating a Custom Dynamic Input Component
4. Setting Up a JS Config for the Form
5. Dynamically Create Inputs based on JS Config
6. Adding a Dropdown Component
7. Handling User Input
8. Handling Form Submission
9. Adding Custom Form Validation
10. Fixing a Common Validation Gotcha
11. Adding Validation Feedback
12. Improving Visual Feedback
13. Showing Error Messages
14. Handling Overall Form Validity
15. Working on an Error
    

1. Module Introduction
2. Understanding State
3. The Complexity of Managing State
4. Understanding the Redux Flow
5. Setting Up Reducer and Store
6. Dispatching Actions
7. Adding Subscriptions
8. Connecting React to Redux
9. Connecting the Store to React
10. Dispatching Actions from within the Component
11. Time to Practice - Dispatching Actions
12. Passing and Retrieving Data with Action
13. Switch-Case in the Reducer
14. Updating State Immutably
15. Updating Arrays Immutably
16. Immutable Update Patterns
17. Outsourcing Action Types
18. Combining Multiple Reducers
19. Understanding State Types
20. Time to Practice - Redux Basics
21. Combining Local UI State and Redux
    

1. Module Introduction
2. Installing Redux and React Redux
3. Basic Redux Setup
4. Finishing the Reducer for Ingredients
5. Connecting the Burger Builder Container to our Store
6. Working on the Total Price Calculation
7. Redux & UI State
8. Adjusting Checkout and Contact Data
   

1. Module Introduction
2. Adding Middleware
3. Using the Redux Devtools
4. Executing Asynchronous Code - Introduction
5. Introducing Action Creators
6. Action Creators & Async Code
7. Handling Asynchronous Code
8. Restructuring Actions
9. Where to Put Data Transforming Logic?
10. Using Action Creators and Get State
11. Using Utility Functions
12. A Leaner Switch Case Statement
13. An Alternative Folder Structure
14. Diving Much Deeper
    

1. Module Introduction
2. Installing the Redux Devtools
3. Preparing the Folder Structure
4. Creating Action Creators
5. Executing Asynchronous Code
6. Fetching Ingredients Asynchronously
7. Initializing Ingredients in the BurgerBuilder
8. Changing the Order of our Ingredients Manually
9. Adding Order Actions
10. Connecting Contact Data Container & Actions
11. The Order Reducer
12. Working on Order Actions
13. Redirect to Improve UX
14. Combining Reducers
15. Handling Purchases & Updating the UI
16. Resetting the Price after Purchases
17. Fetching Orders (via Redux)
18. Checking our Implemented Functionalities
19. Refactoring Reducers
20. Refactoring Reducers Continued
    

1. Module Introduction
2. Understanding Authentication in Single Page Applications
3. Required App Adjustments
4. Adding an Auth Form
5. Adding Actions
6. Getting a Token from the Backend
7. Adding Sign-In
8. Storing the Token
9. Adding a Spinner
10. Logging Users Out
11. Accessing Protected Resources
12. Updating the UI Depending on Auth State
13. Adding a Logout Link
14. Forwarding Unauthenticated Users
15. Redirecting the User to the Checkout Page
16. Persistent Auth State with localStorage
17. Fixing Connect + Routing Errors
18. Ensuring App Security
19. Guarding Routes
20. Displaying User Specific Orders
    

1. Module Introduction
   
2. Fixing the Redirect to the Frontpage
3. Using updateObject in the Entire App
4. Sharing the Validation Method
5. Using Environment Variables
6. Removing console.log()s
7. Adding Lazy Loading
   

1. Module Introduction
2. What is Testing?
3. Required Testing Tools
4. What To Test?
5. Writing our First Test
6. Testing Components Continued
7. Jest and Enzyme Documentations
8. Testing Components Correctly\
9. Testing Containers
10. How to Test Redux
    

1. Module Introduction
2. Deployment Steps
3. Building the Project
4. Example: Deploying on Firebase
   

• JavaScript + HTML + CSS fundamentals are required
• You DON'T need to be a JavaScript expert to succeed in this course!
• ES6+ JavaScript knowledge is beneficial but not a must-have
• NO prior React or any other JS framework experience is required!

After completion of React Training, you will be able to:

–Understand the Base Features & Syntax

–Working with Lists and Conditionals

–Styling React Components & Elements

–Debugging React Apps

–Diving Deeper into Components & React Internal

–A Real App: The Burger Builder (Basic Version)

–Reaching out to the Web (Http / Ajax)

–Burger Builder Project: Accessing a Server

–Multi-Page-Feeling in a Single-Page-App: Routing

–Adding Routing to our Burger Project

–Forms and Form Validation

–Redux

–Adding Redux to our Project

–Redux Advanced

–Redux Advanced: Burger Project

–Adding Authentication to our Burger Project

–Improving our Burger Project

–Testing

–Deploying the App to the Web

We at Gyansetu understand that teaching any course is not difficult but to make someone job-ready is the essential task. That's why we have prepared capstone projects which will drive your learning through real-time industry scenarios and help you clearing interviews.

All the advanced level topics will be covered at Gyansetu in a classroom/online Instructor-led mode with recordings.

No prerequisites. This course is for beginners.

Gyansetu is providing complimentary placement service to all students. Gyansetu Placement Team consistently works on industry collaboration and associations which help our students to find their dream job right after the completion of training.

• Our placement team will add React JS skills & projects to your CV and update your profile on Job search engines like Naukri, Indeed, Monster, etc. This will increase your profile visibility in top recruiter search and ultimately increase interview calls by 5x.
• Our faculty offers extended support to students by clearing doubts faced during the interview and preparing them for the upcoming interviews.
• Gyansetu’s Students are currently working in Companies like Sapient, Capgemini, TCS, Sopra, HCL, Birlasoft, Wipro, Accenture, Zomato, Ola Cabs, Oyo Rooms, etc.

• Gyansetu trainers are well known in Industry; who are highly qualified and currently working in top MNCs.
• We provide interaction with faculty before the course starts.
• Our experts help students in learning Technology from basics, even if you are not good at basic programming skills, don’t worry! We will help you.
• Faculties will help you in preparing project reports & presentations.
• Students will be provided Mentoring sessions by Experts.