Course intro

1. About the course.
2. What you'll learn.
3. Course GitHub repositories (slides and labs).

Working with Git (and GitHub)

JavaScript Overview

1. Historical overview in 10 minutes (or how the history repeats itself).
2. JavaScript standards: ES5, ES6, ...ES2018 and ES.Next?
3. The difference between JavaScript and other OOP languages.
4. JavaScript data types: "is everything an object"?

Functions and Function Expressions

1. Function Declaration vs. Function Expression vs. Function Constructor.
2. Immediately-invoked function expressions (IIFE).
3. Functions as first-class citizens
4. Scope.
5. Closures.
6. Recursion

OOP in JavaScript

1. OOP in a nutshell.
2. OOP in JavaScript.
3. Object creation.
4. Object properties (including ES6 syntax).

Go deep into the "this" context

1. "this" in global context.
2. "this" in function invocation context (strict or non-strict).
3. "this" in method invocation context.
4. "this" in constructor invocation context.
5. "this" in call(), apply() and bind() methods.

OOP - Inheritance in JavaScript

1. Classical (class-based) Inheritance vs. Prototypal Inheritance.
2. Classical (class-based) Inheritance in JavaScript.
3. Prototypal Inheritance in JavaScript.
4. Prototypal Inheritance - How it works?

Other ES6 Features

1. Template literals.
2. New string methods.
3. The Arrow function syntax.
4. Default parameter values.
5. The spread operator.
6. Rest parameters.
7. Destructuring assignment.
8. New object literal features.
9. Object.assign() method.
10. The Class Syntax.
11. The for-of loop.
12. New data structures (Maps, Sets, Typed Arrays).

Map/Filter/Reduce Array methods

1. map().
2. filter().
3. reduce().

JavaScript Exceptions

1. What are Exceptions?
2. Exception handling.
3. Throwing exceptions.
4. Custom exceptions.

Regular Expressions in JavaScript

1. Regular Expressions basis.
2. Regex Syntax.
3. Create RegExp in JavaScript.
4. Use RegExp in JavaScript.

Design Patterns Overview. Creational Patterns.

1. What are design patterns?
2. the Constructor Pattern.
3. The Factory Pattern.
4. The Singleton Pattern.
5. The Module Pattern.

Member patterns

1. Public/Private/Privileged - clarify the concepts.
2. Private and Privileged Members - the Crockford Pattern.
3. Private and Privileged Members in object prototype.

Structural Patterns

1. Mixins.
2. Decorator.
3. Iterator.
4. Observer.

Concise review of JavaScript Best Practices

Introducing the TodoApp project

1. Todo App gif

Client-Server Communications on HTTP

1. HTTP protocol overview: Request and Response Message Formats.
2. HTTP Request Methods.
3. The "GET" Request Method.
4. The "POST" Request Method.
5. Other HTTP Request Methods.
6. The concepts: IP, Port, host, DNS.
7. Setting up a node.js local server. Look at conf and hosts file.
8. Let's code - The guts of Simple User Registration App.

AJAX-Asynchronous JavaScript And XML

1. What is AJAX?
2. the XMLHttpRequest object
3. the Fetch API

WebServices and JSON

1. WebServices Overview.
2. RESTfull WebServices
3. JSON syntax and tooling.
4. XML vs JSON.
5. Third Party APIs.

Hands on HTTP Requests with fake JSON REST server

1. Setup json-server and DB
2. Define the Endpoints
3. Explore the Endpoints with Postman
4. Implement the REST todoApp

Client-side Storages

1. Cookies.
2. SessionStorage.
3. LocalStorage.

NodeJS and NPM Overview

1. What is NodeJS?
2. What is NPM?
3. Initialize node project with NPM
4. Share a node project
5. Package installation

The Basics and beyond

1. Why TypeScript?
2. Overview of basic types
3. Function types
4. Classes in TypeScript. Public, private, and protected modifiers.

Introduction to React

1. Setup the environment.
2. What is React?
3. The node package manager overview.
4. Write your first react app
   • The simplest "hello world" react app, using CDN.
   • The simplest "hello world" react app, using npm.
   .
5. Get familiar with create-react-app CLI.

React Components and Elements

1. What's in an React element.
2. React Elements vs DOM Elements.
3. React Virtual DOM.
4. How React updates the DOM Elements.
5. Hands on the Demo App.

React JSX

1. What is JSX and why you'd want to use it?
2. Embed Expressions in JSX (and JSX into JSX).
3. Define Attributes with JSX.
4. JSX transpiling.
5. Hands on the Demo App.

Rendering lists in React

1. How to render lists in React.
2. Why using keys?
3. Where to set the keys?
4. The rules for keys.
5. What values should be keys?

React Props and State

1. What is Component props?
2. What is Component state?
3. Stateful components
4. Changing state
5. State vs Props
6. Hands on the Demo App.

Events handling in React

1. DOM Events and Event Bubbling.
2. The Event Loop.
3. React Event Handlers.
4. Async Event Handlers.
5. Hands on the Demo App.

Forms in React

1. How React handle Forms?

React Virtual DOM

1. Overview.
2. How the DOM is updated.

Components Lifecycle

1. Components Lifecycle.
2. Hands on the Demo App.

React Hooks

1. useState()
2. useEffect()

State Management in React

1. Manage the state outside of React - overview.
2. Use global data in components with Context API - overview.

Hands on React Demo Project

Course projects: review and discussion

More on objects in JS

1. Iterate over objects
2. Copy (clone) objects

Promises. Async/Await

React Router

Online resources

Projects/Tasks