Duration: 3 days – 21 hrs.
Overview
This workshop teaches the participants how to design and develop server-side applications using the event-driven, non-blocking model framework Node.js. This program inducts the participant in basic concepts of the JavaScript as well as node.js language
so that the participant is well equipped to build end-to-end application using Node and React.
Objectives
- Use some custom web applications as well as some already existing application for
- React Development and testing.
- Combine both Node js and React mainly focusing on the basic with lots of hands on exercise.
Audience
- Developers
Pre- requisites
- Participants are expected to have a basic understanding of JavaScript
Course Content
What is react?
- Installation
- Getting Started
- Add React to a Website
- Create a New React App
React
- Hello World
- Introducing JSX
- Rendering Elements
- Components and Props
- State and Lifecycle
- Handling Events
- Conditional Rendering
- Lists and Keys
- Forms
- Lifting State Up
- Composition vs Inheritance
- Accessibility
- Code-Splitting
- Context
- Error Boundaries
- Forwarding Refs
- Fragments
- Higher-Order Components
- Integrating with Other Libraries
- JSX In Depth
- Optimizing Performance
- Portals
- Profiler
- React Without ES6
- React Without JSX
- Reconciliation
- Refs and the DOM
- Render Props
- Static Type Checking
- Strict Mode
- Typechecking With PropTypes
- Uncontrolled Components
- Web Components
Hooks
- Introducing Hooks
- Hooks at a Glance
- Using the State Hook
- Using the Effect Hook
- Rules of Hooks
- Building Your Own Hooks
- Hooks API Reference
Introduction Typescript
- Modules
- Types
- Interfaces
- Functions
- Classes
- Implementing Interfaces
- Describing Constructors Using Interfaces
- Generics
- Union Type
- Intersection Type
- Type Alias
- Using External Packages and Their Types
- Declaration Merging
- Utility Types
How TypeScripts extends JavaScript to add more safety and tooling
- Primitives
- Any
- Literals
- Union and Intersection Types
- Unknown and Never
- Type Primitives
- Tuples
- Build-in Utility Types
- Nullable Types
- Meta-Types
- Conditional Types
- Discriminate Types
- Indexed Types
- Mapped Types
- Language
- Soundness
- Structural Typing
- Type Guards
- Type Widening and Narrowing
- Language Extensions
- Enums
- Nominal Typing
- Types vs Interfaces
React with Typescript
- Introduction
- Function Components
- Class Components
- Higher Order Components – React Redux
- Higher Order Components – Creating HOCs
- Render Props
- Event Handling
- Introduction to Hooks
- Hooks: useState
- Hooks: useEffect
Building a demo application using Typescript and React
- Use everything we have learn to make the application
- Best practices while using React with Typescript
- Debugging Basics
Concurrent Mode
- Introducing Concurrent Mode
- Suspense for Data Fetching
- Concurrent UI Patterns
- Adopting Concurrent Mode
- Concurrent Mode API Reference
Jest
- Setting up Jest without create-react-app
- Enzyme Introduction and Setup?
- Using Enzyme in a Test
- Types of Tests
- Testing Asynchronous Code
- Setup and Teardown
- Mock Functions
- Jest Platform and Community
Jest Guides
- Snapshot Testing
- Async Example
- Timer Mocks
- Es6 Class Mocks
- Bypassing Module mocks
- Using with webpack
- Using with puppeteer
- Using with MongoDB and DynamoDB
- DOM Manipulation
- Watch Plugins
- Migration to Jest and Architecture
Framework Guides
- Testing React Apps few demo and few custom made apps
- Testing React Native Apps and Web Framework
- In Depth Look in Globals, Expect, Mock Functions, Jest Object and Configuring Jest
- Jest CLI Options
Introduction to Node.js
- Installing Node.js
- Node’s Event Loop
- Alternatives to Node.js
- Writing asynchronous code
Modularizing code
- Understanding built-in modules
- Techniques for modularizing JavaScirpt code
- Using require() to modularize application code
- Using npm for third-party modules
- Handling Exceptions
Events and Streams
- Understanding Events
- EventEmitter class
- Understanding Streams
- Reading and writing streams
- Using pipe()
Accessing Local Resources
- Process Object
- Manipulating File System
- Understanding Buffers
Node.js and the web
- Handling web requests
- Building a web server
- Understanding the need for web sockets
- Realtime interaction using socket.io
Node.js Eco System
- Node Packages
- Packages of interest
- Deciding Factors
- Summary and Conclusion
Node.js and the web in detail
- Handling web requests
- Building a web server
- Understanding the need for web sockets
- Realtime interaction using socket.io
