Babel Introduction | JavaScript Bible - JavaScript and ES6 Bootcamp 2019

Book Overview & Buying
Table Of Contents
Feedback & Rating

JavaScript Bible - JavaScript and ES6 Bootcamp 2019

By : Bogdan Stashchuk

Buy this Video

JavaScript Bible - JavaScript and ES6 Bootcamp 2019

By: Bogdan Stashchuk

Buy this Video

Overview of this book

This course covers everything you need to know about JavaScript to become a frontend web developer, a full-stack web developer, or a backend developer. You'll start from the very beginning and learn the fundamentals and basic concepts of JavaScript. Then you will learn new features included in ES6, ES7, and more. Also, you'll explore the Node.js environment for JavaScript code execution and you will understand the difference between a web browser and Node.js. In separate sections, we will discuss Babel, NPM, Webpack, and MongoDB. Also, you will master the most popular JavaScript framework: React. JavaScript Bible – JavaScript and ES6 Bootcamp 2019 was designed for developers with different levels of JavaScript knowledge. If you are a beginner in JavaScript, start with the very first section called JavaScript Basics. If you have some experience with JavaScript, jump directly TO the sections where I cover ES6 topics such as REST/spread parameters, arrow functions, ES6 Classes, and more. By the end of the course, you'll have hands-on experience in developing WITH JavaScript and in front-end development. This course covers everything you need to know about JavaScript and become either Frontend Web developer, or Full-stack Web Developer, or Backend developer. We will start from the very beginning and you will learn the fundamentals and basic concepts of JavaScript. Then you will learn new features included in ES6, ES7, etc. Also, we will dive into the Node.js - environment for JavaScript code execution and you will understand what is the difference between Web Browser and Node.js. In separate sections, we will discuss Babel, NPM, Webpack, and MongoDB. Also, you will learn the most popular JavaScript framework - React. JavaScript Bible was designed for developers with different levels of JavaScript knowledge. Each challenge has a task and solution in separate Git branches. All the code and supporting files for this course are available at - https://github.com/PacktPublishing/JavaScript-Bible---JavaScript-and-ES6-Bootcamp-2019-

Intro

Course Navigation

EXERCISE Files and SOFTWARE Setup

INTRO - Exercise Files and Software Setup

VIDEO - Software Setup Overview

PRACTICE - WINDOWS ONLY - Install "cmder"

PRACTICE - Visual Studio Code Setup

PRACTICE - Launch Node.js and execute test JavaScript file

PRACTICE - Git Overview - PART 1

PRACTICE - Git Overview - PART 2

PRACTICE - Clone remote GIT repository and switch Branches

PRACTICE - Use SourceTree for Git repositories management

JAVASCRIPT BASICS - Intro

INTRO - JAVASCRIPT BASICS - Intro

PRACTICE - Exploring Web Sites in the Browser

PRACTICE - Create first HTML file and start Live Server

PRACTICE - Add favicon to the HTML file

PRACTICE - JavaScript embedded into the HTML

DEMO - Git branches management

PRACTICE - JavaScript in the separate file

CHALLENGE - External Scripts

CHALLENGE - External Scripts - SOLUTION

PRACTICE - JavaScript in the Console of the Browser

JAVASCRIPT BASICS - Types and Variables

INTRO - JAVASCRIPT BASICS - Types and Variables

VIDEO - Object in JavaScript

VIDEO - Primitive vs Reference Value Types

PRACTICE - Exploring Primitive Value Types

PRACTICE - Exploring Reference Type - Object

VIDEO - Variable declaration using "var", "let" and "const"

PRACTICE - Variable declaration and assignment

CHALLENGE - Variable Declaration and Assignment

CHALLENGE - Variables Reusage

VIDEO - Statically vs Dynamically typed Languages

PRACTICE - Dynamic typing in JavaScript

JAVASCRIPT BASICS - Objects

INTRO - JAVASCRIPT BASICS - Objects

VIDEO - Variety of Objects in JavaScript

VIDEO - Objects Modification

PRACTICE and CHALLENGES - Objects - PART 1

PRACTICE and CHALLENGES - Objects - PART 2

PRACTICE and CHALLENGES - Objects - PART 3

VIDEO - Global Objects - "window" and "global"

VIDEO - Methods of the Object

JAVASCRIPT BASICS - Functions

INTRO - JAVASCRIPT BASICS - Functions

VIDEO - Introduction to the Functions

VIDEO - Syntax of the Function

PRACTICE - Functions - PART 1

PRACTICE - Functions - PART 2

CHALLENGES - Functions - PART 1

CHALLENGES - Functions - PART 2

VIDEO - Function Expressions vs Function Declarations

PRACTICE - Function Expressions, setTimout(), setInterval()

CHALLENGE - Function Expressions

✔ CHALLENGE - Function Expressions - SOLUTION

JAVASCRIPT BASICS - Operators

INTRO - JAVASCRIPT BASICS - Operators

VIDEO - Operators

VIDEO - Operands, Unary vs Binary Operators and Notations

PRACTICE - Arithmetic Operators - PART 1

PRACTICE - Arithmetic Operators - PART 2

PRACTICE - Comparison Operators - PART 1

PRACTICE - Comparison Operators - PART 2

PRACTICE - Logical Operators - PART 1

PRACTICE - Logical Operators - PART 2

PRACTICE - Operators Precedence and Associativity

CHALLENGES - Operators - PART 1

CHALLENGES - Operators - PART 2

JAVASCRIPT BASICS - Expressions vs Statements

INTRO - JAVASCRIPT BASICS - Expressions vs Statements

VIDEO - Expressions vs Statements - PART 1

VIDEO - Expressions vs Statements - PART 2

PRACTICE - Expressions vs Statements - PART 1

PRACTICE - Expressions vs Statements - PART 2

CHALLENGES - Expressions vs Statements

JAVASCRIPT BASICS - Scopes

INTRO - JAVASCRIPT BASICS - Scopes

VIDEO - Scopes - PART 1

VIDEO - Scopes - PART 2

VIDEO - Undeclared Variables and "use strict"

PRACTICE - Scopes - PART 1

PRACTICE - Scopes - PART 2

CHALLENGES - Scopes

JAVASCRIPT BASICS - Arrays

INTRO - JAVASCRIPT BASICS - Arrays

VIDEO - Arrays

VIDEO - Array Methods

PRACTICE - Arrays - PART 1

PRACTICE - Arrays - PART 2

CHALLENGES - Arrays

JAVASCRIPT BASICS - Loops and Conditional Statements

VIDEO - Introduction to the Loops

VIDEO - "for" Loop

VIDEO - "while" Loop

VIDEO - "do while" Loop

VIDEO - "for in" and "for of" Loops

PRACTICE Loops - PART 1

PRACTICE Loops - PART 2

PRACTICE Loops - Looking for loops in a pubic JavaScript library

VIDEO - Conditional Statements - if, if else and switch

VIDEO - Ternary Operator

PRACTICE - Conditional statements and ternary operator - PART 1

PRACTICE - Conditional statements and ternary operator - PART 2

CHALLENGES - Loops and Conditions - PART 1

CHALLENGES - Loops and Conditions - PART 2

CHALLENGES - Loops and Conditions - PART 3

CHALLENGES - "for in" and Ternary Operator

JAVASCRIPT BASICS - Advanced Topics

PRACTICE - Mutable vs Immutable Values

PRACTICE - "typeof" and "instanceof" Operators

PRACTICE - "new Array", "new String"

PRACTICE - "new Object", "new Function"

PRACTICE - Execution contexts and Execution contexts stack

PRACTICE - "this"

PRACTICE - "call", "apply" methods of the Function

PRACTICE - "bind" method of the Function

PRACTICE - "pass by value" vs "pass by reference"

PRACTICE - IIFE - Immediately Invoked Function Expression

PRACTICE - Synchronous Code Execution

PRACTICE - Events and Events queue

PRACTICE - Callbacks - PART 1

PRACTICE - Callbacks - PART 2

PRACTICE - Closures

ES6 Variables Lifecycles

VIDEO - Recap of the "var"

VIDEO - Scopes - Global, Function and Block

VIDEO - let

VIDEO - const

VIDEO - Variables Usage Guidelines

VIDEO - Var, Let or Const?

CHALLENGE 1-1 - let, var and const

✔ CHALLENGE 1-1 - let, var and const - SOLUTION

CHALLENGE 1-2 - let, var and closures

✔ CHALLENGE 1-2 - let, var and closures - SOLUTION

VIDEO - JavaScript Engine Phases

VIDEO - Variable Lifecycle Phases

VIDEO - Var lifecycle

VIDEO - Undeclared variable lifecycle

VIDEO - Let lifecycle

VIDEO - Const lifecycle

VIDEO - Function lifecycle - Part 1

VIDEO - Function lifecycle - Part 2

VIDEO - What is finally hoisting?

DEMO - Putting different variables lifecycles together

✔ DEMO - Putting different variables lifecycles together - SOLUTION, Part 1

✔ DEMO - Putting different variables lifecycles together - SOLUTION, Part 2

CHALLENGE 1-3 - Variable Lifecycles

✔ CHALLENGE 1-3 - Variable Lifecycles - SOLUTION

VIDEO - Variables Phases Section Summary

ES6 Arrow functions

VIDEO - Introduction to the Arrow Functions Section

VIDEO - Traditional JavaScript Functions Overview.

VIDEO - Introduction to the Arrow Functions

VIDEO - Arrow Functions syntax

PRACTICE - Arrow Functions

VIDEO - Arrow Functions and "this".

VIDEO - Regular functions instead of Arrow Functions

CHALLENGE 2-1 - Regular vs Arrow Functions

CHALLENGE 2-1 - Regular vs Arrow Functions - SOLUTION

VIDEO - Arguments in the Functions

VIDEO - Arrow Functions Summary

ES5.1 Array Helper Methods

VIDEO - forEach() Overview

PRACTICE - forEach()

CHALLENGE 3-1 - forEach() with Index

✔ CHALLENGE 3-1 - forEach() with Index - SOLUTION

VIDEO - map() Overview

PRACTICE - map()

CHALLENGE 3-2 - map() JSON to Object

✔ CHALLENGE 3-2 - map() JSON to Object - SOLUTION

VIDEO - filter() Overview

PRACTICE - filter()

VIDEO - find() Overview

PRACTICE - find()

CHALLENGE 3-3 - find() Single Post

✔ CHALLENGE 3-3 - find() Single Post - SOLUTION

VIDEO - every() and some() Overview

PRACTICE - every() and some()

CHALLENGE 3-4 Is Array of Numbers Sorted?

✔ CHALLENGE 3-4 Is Array of Numbers Sorted? - SOLUTION

CHALLENGE 3-5 Are Arrays Equal or not?

✔ CHALLENGE 3-5 Are Arrays Equal or not? - SOLUTION

CHALLENGE 3-6 Check if Element is in Array

✔ CHALLENGE 3-6 Check if Element is in Array - SOLUTION

VIDEO - includes() Overview

PRACTICE - includes()

CHALLENGE 3-7 Includes() with Array or Object

✔ CHALLENGE 3-7 Includes() with Array or Object - SOLUTION

CHALLENGE 3-8 Push Element to Array if Not Exists

✔ CHALLENGE 3-8 Push Element to Array if Not Exists - SOLUTION

VIDEO - reduce() Overview

PRACTICE - reduce()

CHALLENGE 3-9 Reduce Array of Objects

✔ CHALLENGE 3-9 Reduce Array of Objects - SOLUTION

CHALLENGE 3-10 Reduce Array of Objects to Object

✔ CHALLENGE 3-10 Reduce Array of Objects to Object - SOLUTION

VIDEO - Do you know how sort() works?

VIDEO - Sorting Algorithms Overview

VIDEO - Stable vs Unstable Sort

VIDEO - sort() Overview

VIDEO - sort() without Arguments

VIDEO - sort() Analyze sorting algorithms

VIDEO - sort() Algorithms in different browsers

CHALLENGE 3-11 sort() Array of objects

✔ CHALLENGE 3-11 sort() Array of objects - SOLUTION

CHALLENGE 3-12 sort() Long Array of objects

✔ CHALLENGE 3-12 sort() Long Array of objects - SOLUTION

VIDEO - sort() Summary

VIDEO - Array helper methods Summary

ES6 Template Literals

VIDEO - Template Literals Overview

VIDEO - Tagged Templates Overview

CHALLENGE 4-1 Template Literals

✔ CHALLENGE 4-1 Template Literals - SOLUTION

CHALLENGE 4-2 Default tagged template

✔ CHALLENGE 4-2 Default tagged template - SOLUTION

ES6 Rest/Spread Operators and Default Function Parameters

VIDEO - Rest Parameters Overview

PRACTICE - Rest Parameters

VIDEO - Spread Operator Overview

PRACTICE - Spread Operator

CHALLENGE 5-1 Rest and Spread Operators

✔ CHALLENGE 5-1 Rest and Spread Operators - SOLUTION

VIDEO - Default Function Parameters Overview

PRACTICE - Default Function Parameters

CHALLENGE 5-2 Default value without default parameters

✔ CHALLENGE 5-2 Default value without default parameters - SOLUTION

CHALLENGE 5-3 Generate Missing Unique IDs

✔ CHALLENGE 5-3 Generate Missing Unique IDs - SOLUTION PART 1

✔ CHALLENGE 5-3 Generate Missing Unique IDs - SOLUTION PART 2

✔ CHALLENGE 5-3 Generate Missing Unique IDs - SOLUTION PART 3

✔ CHALLENGE 5-3 Generate Missing Unique IDs - SOLUTION PART 4

ES6 Enhanced Object Literals

VIDEO - Enhanced Object Literals Overview

PRACTICE - Enhanced Object Literals

CHALLENGE 6-1 Enhanced Object Literals

✔ CHALLENGE 6-1 Enhanced Object Literals - SOLUTION

ES6 Array and Object Destructuring

VIDEO - Destructuring Overview

PRACTICE - Array Destructuring

CHALLENGE 6-2 Array Destructuring

✔ CHALLENGE 6-2 Array Destructuring - SOLUTION

CHALLENGE 6-3 Destructure Result of the Function

✔ CHALLENGE 6-3 Destructure Result of the Function - SOLUTION

PRACTICE - Object Destructuring - PART 1

VIDEO - New Variable Names and Default Values in Object Destructuring

PRACTICE - Object Destructuring - PART 2

CHALLENGE 6-4 Object Destructuring

✔ CHALLENGE 6-4 Object Destructuring - SOLUTION

CHALLENGE 6-5 Object Destructuring and Array Helper Methods

✔ CHALLENGE 6-5 Object Destructuring and Array Helper Methods - SOLUTION

CHALLENGE 6-6 Delete Object Properties

✔ CHALLENGE 6-6 Delete Object Properties - SOLUTION

ES6 Classes, Prototypes and Function Constructors

VIDEO - Class-based vs Prototype-based

VIDEO - What is inheritance?

VIDEO - Prototype Chain

VIDEO - __proto__ and [[Prototype]]

VIDEO - What is Prototype?

VIDEO - Don't reassign __proto__

VIDEO - Native Prototypes - PART 1

VIDEO - Native Prototypes - PART 2

VIDEO - Prototypal Inheritance in JavaScript

PRACTICE - Function Constructors - PART 1

VIDEO - Function Constructors Overview

PRACTICE - Function Constructors - PART 2

PRACTICE - Function Constructors - PART 3

VIDEO - Object.create() Overview

PRACTICE - Object.create()

PRACTICE - Function Constructors - PART 4

VIDEO - Function Constructors - New Prototype in the Chain

CHALLENGE 7-1 Insert Prototype into the Existing Prototype Chain

CHALLENGE 7-1 Insert Prototype into the Existing Prototype Chain - SOLUTION

VIDEO - "instanceof" and "typeof" in the Prototype Chain

CHALLENGE 7-2 Fix Mistakes in the Function Constructors

CHALLENGE 7-2 Fix Mistakes in the Function Constructors - SOLUTION

VIDEO - Classes - Overview

VIDEO - Classes vs Function Constructors

PRACTICE - Classes - PART 1

PRACTICE - Classes - PART 2

PRACTICE - Classes - PART 3

CHALLENGE 7-3 Convert Function Constructors to Classes

CHALLENGE 7-3 Convert Function Constructors to Classes - SOLUTION

CHALLENGE 7-4 Extend Array

CHALLENGE 7-4 Extend Array - SOLUTION

CHALLENGE 7-5 Custom Push Method for Arrays

CHALLENGE 7-5 Custom Push Method for Arrays - SOLUTION

VIDEO - React and ES6 Classes

CHALLENGE 7-6 Classes in React - Additional Button

CHALLENGE 7-6 Classes in React - Additional Button - SOLUTION

Babel Introduction

Babel Module Introduction

VIDEO - What is Compiler?

VIDEO - Compiled vs Interpreted languages

VIDEO - Transpiler

VIDEO - Transpling vs Compiling

VIDEO - ES5, ES6 and JavaScript

VIDEO - What Babel does?

VIDEO - Why do we need Babel?

VIDEO - ES6 support by Browsers

VIDEO - How many browsers need compiled ES5 code?

PRACTICE - Babel in action - ES6 Rest operator

PRACTICE - Compare performance - ES6 Rest Operator(Node.js)

PRACTICE - Compare Performance - ES6 Rest Operator (Google Chrome)

CHALLENGE - Compare Performance - ES6 Destructuring

CHALLENGE - Compare Performance - ES6 Destructurng - SOLUTION

VIDEO - What is User Agent?

VIDEO - Serve different JS files to different browers

VIDEO - Different JS files on the server

PRACTICE - Browser detection on the client

CHALLENGE - Detect feature support in the Browser

CHALLENGE - Detect feature support in the Browser - SOLUTION

CHALLENGE - Insert different script tags into the DOM

CHALLENGE - Insert different script tags into the DOM - SOLUTION

VIDEO - How Babel Works?

PRACTICE - Online Babel Compiler

VIDEO - Install Babel Globally

PRACTICE - Compile JS file using Babel

VIDEO - Plugins and Presets

NPM - Node Package Manager

VIDEO - Introduction to the NPM

PRACTICE - Exploring NPM packages

VIDEO - Package.json and init

VIDEO - Semantic Versioning

VIDEO - Packages Installation

PRACTICE - Install package in the project

CHALLENGE - Install Semver package

✔ CHALLENGE - Install Semver Package - SOLUTION

PRACTICE - Install Browserslist - package with own dependencies

VIDEO - Dependencies and Development Dependencies

PRACTICE - Examine Development Dependencies

PRACTICE - Browser App vs Server Package

CHALLENGE - Clock Browser Application

✔ CHALLENGE - Clock Browser Application - SOLUTION

VIDEO - Clock Challenge Summary

VIDEO - Browser App vs Public Package

PRACTICE - Exploring Package Information and Versions

PRACTICE - Installing Specific Package Version

VIDEO - Why package-lock.json file is needed?

CHALLENGE - Reinstall old package version without lock file

✔ CHALLENGE - Reinstall old package version without lock file - SOLUTION

VIDEO - How lock file is handled

VIDEO - Lock file summary

VIDEO - Update NPM packages overview

CHALLENGE - Update project dependencies

✔ CHALLENGE - Update project dependencies - SOLUTION

VIDEO - Introduction to the NPM scripts

PRACTICE - Start npm script

CHALLENGE - Create prestart script

✔ CHALLENGE - Create prestart script - SOLUTION

PRACTICE - Custom NPM scripts

CHALLENGE - Run NPM scripts simultaneously

✔ CHALLENGE - Run NPM scripts simultaneously - SOLUTION

VIDEO - NPM .bin Folder with Executable Scripts

PRACTICE - Explore .bin Folder on the Mac

PRACTICE - Explore .bin Folder on Windows

VIDEO - NPM Scripts Wrap-Up

Customer Reviews

5 star

4 star

3 star

2 star

1 star

JavaScript Bible - JavaScript and ES6 Bootcamp 2019

By : Bogdan Stashchuk

JavaScript Bible - JavaScript and ES6 Bootcamp 2019

By: Bogdan Stashchuk

Overview of this book

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access