Course Description:
React is a JavaScript library for building user interfaces. It makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug. Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM. No assumptions are made about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native.
Module 1 - Introduction
- Introduction to Web Design, Single Page Web Apps and React Web Apps
- Installation of NodeJS and React
- Creating the First App
- Understanding the requirements of a React App
Module 2 – Modern JavaScript (ES6)
- Introduction to Modern JavaScript and ES6 standards
- Running JS on Node
- Understanding “let” and “const”
- Arrow Function
- Exports and Imports
- Classes and Methods
- Spread and Rest Operators
- Destructuring
- Working with Arrays and Functions
Module 3 – React Features and Syntax
- Understanding the Folder Structure
- Understanding Component
- Understanding JSX and its Restrictions
- Creating a Functional Component
- Working with Components & Re-Using Them
- Working with Props
- Working with State
- Handling Events with Methods
- Manipulating the State
- Using the useState() Hook for State Manipulation
- Stateless vs Stateful Components
- Passing Method References Between Components
- Adding Two Way Binding
- Adding Styling with Stylesheets
Module 4 – Lists and Conditionals
- Rendering Content Conditionally
- Handling Dynamic Content
- Working with Lists & State
- Updating State Immutably
- Lists & Keys
- Flexible Lists
Module 5 – Styling React Components and Elements
- Setting Styles Dynamically
- Setting Class Names Dynamically
- Working with Styled Components
- More on Styled Components
- Styled Components & Dynamic Styles
- Working with CSS Modules & Media Queries
Module 6 – React Internal Concepts
- Optimizing the Project Structure
- Splitting an App Into Components
- Comparing Stateless and Stateful Components
- Class-based vs Functional Components
- class Component Lifecycle
- Component Creation Lifecycle
- Component Update Lifecycle (for props Changes)
- Component Update Lifecycle (for state Changes)
- Working with useEffect() in Functional Components
- Cleaning up with Lifecycle Hooks & useEffect()
- Using shouldComponentUpdate for Optimization
- Optimizing Functional Components with React.memo()
- Using PureComponents instead of shouldComponentUpdate
- Understanding How React Updates the DOM
- Rendering Adjacent JSX Elements
- Using React.Fragment
- Higher Order Components (HOC)
- Passing Unknown Props
- Setting State Correctly
- Using PropTypes
- Using Refs
- Refs with React Hooks
- Understanding Prop Chain Problems
- Using the Context API
- contextType & useContext()
Module 7 – HTTP, AJAX and Axios
- Understanding Http Requests in React
- Introducing Axios
- Creating a Http Request to GET Data
- Rendering Fetched Data to the Screen
- Transforming Data
- Making a Post Selectable
- Fetching Data on Update
- POSTing Data to the Server
- Sending a DELETE Request
- Setting a Default Global Configuration for Axios
- Creating and Using Axios Instances
Module 8 - Working on a Project
Module 9 – Routing in SPA and Multi-Page App
- Routing and SPAs
- react-router vs react-router-dom
- Switching Between Pages
- Using Links to Switch Pages
- Using Routing-Related Props
- The "withRouter" HOC & Route Props
- Absolute vs Relative Paths
- Styling the Active Route
- Passing Route Parameters
- Extracting Route Parameters
- Parsing Query Parameters & the Fragment
- Using Switch to Load a Single Route
- Navigating Programmatically
- Understanding Nested Routes and Dynamic Nested Routes
- Redirecting Requests
- Conditional Redirects
- Using the History Prop to Redirect (Replace)
- Working with Guards
- Handling the 404 Case (Unknown Routes)
- Loading Lazy Routes
- Lazy Loading with React Suspense
- Routing and Server Deployment
Module 10 – Forms and Form Validation
- Creating a Custom Dynamic Input Component
- Setting Up a JS Config for the Form
- Dynamically Create Inputs based on JS Config
- Adding a Dropdown Component
- Handling User Input
- Handling Form Submission
- Adding Custom Form Validation
- Adding Validation Feedback
- Showing Error Messages
- Handling Overall Form Validity
- Working on an Error
Module 11 – Working on a Project
React Training center in West Delhi, Uttam nagar. Best certified computer course curriculum for professional learning institute near Dwarka, Uttam Nagar, Jankapuri, Tilak Nagar, Subhash Nagar, Tagore Garden, Rajouri Garden, Ramesh Nagar, Moti Nagar, Kirti Nagar, Shadipur, Patel Nagar, Rajendra Place, Karol Bagh, Jhandewalan, Ramakrishna Ashram, Connaught Place, vikaspuri, najafgarh, Delhi Cantt, Dhaula Kuan, Palam Colony, Palam Villag, Dabri, Hari Nagar, Fateh Nagar, Raja Garden, Punjabi Bagh, Shivaji Park, Paschim Vihar, Peeragarhi, Inderlok, Netaji Subhash Place, Pitampura, Rohini, Chandni Chowk, New Delhi, East Delhi, North Delhi, West Delhi.
