Duration

5 days

Overview

NodeJS with ReactJS is a full-stack JavaScript solution that helps build fast, robust, and maintainable production web applications using MongoDB, Express, React.js and Node.js. This program helps getting started and avoid useless grunt work and common pitfalls, while keeping the application organized. MongoDB is the leading NoSQL database, empowering businesses to be more agile and scalable. Express is a minimal and flexible node.js web application framework, providing a robust set of features for building single and multi-page, and hybrid web applications. React.js lets participants to extend HTML vocabulary for the application. The resulting environment is extraordinarily expressive, readable, and quick to develop. Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications.

Prerequisites

Before attending this course, students should have general programming experience and knowledge of HTML, CSS and JavaScript.

Day 1

Introduction to TYPESCRIPT

Overview

Environment Setup
Basic Syntax
Types, Variables and Operators
Decision Making and Loops
Functions and Lambda Expressions
Generics
Enums, Number and Strings
Arrays, Tuples & Union
Interface, Classes and Objects
Namespaces & Modules
Ambients, Decorators & Mixins
Introduction to REACT
What react is and what it is not
React concepts
Component composition
How react works
How Virtual DOM works
How react handles data binding
Advantages & Limitations of REACT
Setting up ReactJS Development Environment
Using Webpack / Babel
Using npm & package.json file
Look at an ReactJS application
Organizing source code
React browser plugin
Introduction to JSX
What is JSX
JSX Elements and their surroundings
Attributes in JSX
Nested JSX
JSX Outer Elements
Rendering JSX
HTML attributes in JSX - Class and Id etc
ReactDOM.render()
Passing variables to ReactDOM.render()
The Virtual DOM
If-else in JSX
IIFE in JSX for complex logic
JavaScript expressions
JSX like attribute, boolean or child expression
Lab: HelloWorld Application
Creating a simple React Application
A simple react component with JSX template
Component structure
React render
Pure components

Day 2

Functional components
Class based components
Why use one or the other
Component props and property passing
Props validation with data types
Limitations of props
Using state
When to use state, when to use props
Initialize states and update states
Testing components
Lab: HeaderComponent, FooterComponent and ProductListComponent
Component Life Cycle
Start-up and Mounting Components
Updating Components
Unmounting Components
Calling / Implementing life cycle methods
Setting Properties
Composing Components
Components within Components
Known children and unknown children
Sibling Components and Key
Parent and Child Components
Communication from parent to child
Communication from child to parent
Lab: Communication between ProductComponent and ProductListComponent
Forms
Form components example textbox, textarea, checkbox, radiobutton, select
Controlled form components
Uncontrolled form components
Checkboxes and Radios
Select box with default selected values
Form validation
Lab: ListProductComponent, AddProductComponent, ModifyProductComponent
Event handling
React.js Event Handlers
Synthetic Events
Form
Composition
Focus
Keyboard
Mouse
Clipboard
Selection
Touch
Event Pooling
Other useful events in React
Sharing events across the components
Lab: SeachProductComponent and SortProductComponent
Lab: ShoppingCartComponent – Add products into shopping cart
Styling React Components & Elements
CSS and inline styles
Setting up the react for React bootstrap
Implementing the react bootstrap components
Setting Styles Dynamically
Setting Class Names Dynamically
Enabling & Using CSS Modules
Working with Media Queries
Securing React Applications
JSON Web Tokens (JWT)
Session State
Storing the state on the client
Authentication & Authorization
React Router & Navigation
Loading the router library
Router configuration
Passing and receiving parameters
React-cookie integration

Day 3

Protecting routes on the client
Lab: Participants Registration
Lab: Login, Authentication and Authorization
Lab: Dashboard
Lab: User Profile, My Products
Introduction to MongoDB
Overview of MongoDB
MongoDB fundamentals
Architecture of MongoDB
Database
Collection
Document
Advantages of MongoDB
Why use MongoDB
When to use MongoDB
Install MongoDB
Data Modelling
Create Database
Drop Database
Create Collection
Drop Collection
Data Types
Insert Document
Query Document
Update Document
Delete Document
Queries
Field equality tests
Operators available
Projections
Limiting Records
Paging
Sorting Records

Day 4

Simple Updates and Deletes
Field updates
Field insertions and removal
Document deletion
Existential field values
Indexing and query optimization
Indexing theory
Indexing in practice
Query optimization
More Complex Types of Queries
Existential field values
Aggregations and groups
Aggregations and groups in hierarchical data

Introduction

Foundation
The Node.js framework
Advantages of Node JS
Installing Node.js
Using Node.js to execute scripts
Traditional Web Server Model
Node.js Process Model
Node Projects
The Node Package Manager
Creating a project
The package.json configuration file
Installing Packages Global
Installing Packages Locally
Adding dependency in package.json
Installing packages globally
Updating packages
Scripting through package.json
Automating tasks with Gulp
HTTP
The HTTP protocol
Creating web server
Handling http requests
Sending requests
Building an HTTP server
Rendering a response
Processing query strings
Using Representational State Transfer
Node JS Console
Configuring TLS
File System
Synchronous vs. asynchronous I/O
Path and directory operations
dirname and filename
Synchronous file reads
Synchronous file writes
Asynchronous file reads
Asynchronous file writes
Buffers, Streams, and Events
Using buffers for binary data
Flowing vs. non-flowing streams
Streaming I/O from files and other sources
Processing streams asynchronously
Configuring event handlers
Modules and Unit Testing
Modularization
The CommonJS and RequireJS specifications
Defining modules with exports
Modules are singletons
Creating a package
Module scope and construction
Unit testing frameworks
What to test and how to test it
Building unit tests with Mocha

Day 5

Events
When to use Event Emitters
Binding Functions to Events
Event Requests
Event Listening
What are callbacks
Callback-last
Error-first
Callbacks: Error-first
Errors in Event Emitters
Uncaught Exceptions
Using Domains
Express
The model-view-controller pattern
Defining Jade and Handlebars templates
Building a front-end controller
Defining routes
Creating actions
Configuring Express to use Handlebars
Using REST
Reading POST data
Building Handlebars helpers
Adding middleware
Data Sources
How Node.js connects to databases
Configuration and platform setup
RDBMS databases and NoSQL databases
Connecting to RDBMS and NoSQL databases
Performing CRUD operations
Building client requests to web services

Programme scope, delivery arrangements and suitability are confirmed during enquiry.