Pre-Requisite
Basic Understanding of Web and HTML
Course Content
ES6 Introduction and Understanding of basics
- Let, const, block scoping
- arrow functions
- default function params
- rest and spread operator
- object literals, template literals
- destructuring in-depth
- ES6 Modules and classes
- Iterators and Generators
- New Array Extensions and Collections
TypeScript
- Introduction
- Declaring variables, basic types and type annotations
- Enums, arrays and tuples
- Interfaces intro, duck typing, extending interfaces
- Classes and Generics across all types
- Modules and Namespaces
Installing Node.js
- Download and Install
- Node REPL
- First Hello World
Modules and npm
- Anatomy of a module
- Private code
- Accessing and using modules
- npm commands
Event Emitter
- When to use Event Emitters
- Binding Functions to Events
- Examples
- Creating an Event Emitter
- Error Handling
- Callbacks: Error-first
Streams
- What are streams
- Read Stream API; Write Stream API
- Flow Control
- Piping
- Duplex Stream; Transform Stream
- Node for Web HTTP Module
Express JS
- Starting Express JS
- Understanding Middleware
- Router
- Handling HTTP Request
- Sending HTML Response using Template Enginer
- Making REST API
- Working GET,POST.PUT,Delete requests
- Sending Static JSON as Response
Test Driven Development
- Linters
- Configuring Linters ,Using it with Visual Studio code
- ESLint Rules
- TDD in details (Tools for Unit tessting)
- JSUnit; Jasmine
- Minification tools
- Install and setup karate
- Uisng Karate for API Testing,
- Handling Response, Report Generation
React Introduction
- React introduction,
- Understanding “what” and “why” React
- Environment Setup for React Application
- VS Code extensions for ES6, React
React Essential Features and Syntax
- React App Project Directory Structure
- React Component Basic
- Understanding JSX
- Limitations of JSX
- Working with Components and Reusing Components
React Components, Props and State
- Understanding and using Props and State
- Handling Events with methods
- Manipulating the State
- Functional (Stateless) VS Class (Stateful) Components
- Parent – Child Communication
- Dynamically rendering contents
- Showing Lists, List and keys
React Component life cycle
- Updating life cycle hooks
- PureComponents
- React’s DOM Updating Strategy
- Fragments
React Hooks
- Why do you need hooks
- Different types of hooks
- Moving from classes to functional components
- useState Hook and useEffect Hook
- Data Fetching with hooks/replacing the class lifecycle methods
- Fetching data on component mount with useEffect
- Using the useRef Hook
- Displaying loading state with useState
- Error Handling and displaying errors with useState
- The useReducer Hook
- Using the useContext Hook
- Best practices for React Projects
HTTP Requests/Ajax Calls
- HTTP Requests in React
- Introduction of Axios package
- HTTP GET Request, fetching & transforming data
- HTTP POST, DELETE, UPDATE
- Handing Errors
React Forms and Form Validation
- Creating a Custom Dynamic Input Component
- Handling User Input
- Handling Form Submission
- Dynamically Create Inputs based on JS Config
- Adding Validation Feedback
- Showing Error Messages
- Handling Overall Form Validity
React Routing
- Routing and SPAs
- Setting Up the Router Package
- react-router vs react-router-dom
- Preparing the Project For Routing
- Switching Between Pages, Routing-Related Props
- Passing & extracting route/query parameters
- Using Switch to Load a Single Route
- Navigating Programmatically
React Context API
- Introduction to React context
- When to use context
- Create Context
- Context.Provider
- Context.Consumer
- CRUD Example With Context API
REDUX – React State Management
- Redux
- React Thunk
- Creating actions, reducer and store
- Application Using React & Redux
Code-Splitting
- What is code splitting
- Why do you need code splitting
- React.lazy
- Suspense
- Route-based code splitting
Immutable.js
- Introduction to Immutable.js
- Immutable collections
- List,Set,Map
Testing
- Understand the significance of unit testing
- Understand unit testing jargon and tools
- Unit testing react components with Jest
Deployments
- DEPLOYMENTS
- Introduction to deployment
- Deploying the React Application
Server Side Rendering
- Introduction to SSR
- Need for SSR
Project
- Introduction to project
- Project Discussion
- Layout and High Level Design
- Creating the scafolidng for the project
- Development
