JavaScript by Example by S., Dani Akash -- Read -- Imperial Library of Trantor

Index

Preface

What this book covers What you need for this book Who this book is for Conventions Reader feedback Customer support

Downloading the example code Errata Piracy Questions

Building a ToDo List

System requirements

Text editor Node.js

For Windows users For Linux users For Mac users

Google Chrome

ToDo List app

Chrome DevTools Getting started with ES6

Arrow functions let, var, and const Loading the tasks from data Template literals Managing task status Adding new tasks to the list Adding tasks by hitting Enter button Persisting data in the browser Compatibility with older browsers Node.js and npm

Setting up our development environment with Node and Babel

Shipping the code

Summary

Building a Meme Creator

Initial project setup

Responsive designing with flexbox

Flexbox - a quick introduction Designing the Meme Creator

Navigation bar Content area

Webpack module bundler

Modules in JavaScript Bundling modules in Webpack Loaders in Webpack

Bundling Bootstrap in Webpack

Plugins in Webpack

Webpack dev server Optimizing Webpack builds for different environments

Creating .env file in Windows UglifyJsPlugin PurifyCSSPlugin ExtractTextPlugin Cache busting Clean dist folder before generating a new build Source maps in production

Building the Meme Creator

Event handling Rendering an image in the canvas

Reading a file using JavaScript

Rendering text on the canvas

Making a canvas responsive to show large images

Summary

Event Registration App

Event - JS meetup Initial project setup

Adding styles to the page

Validating and submitting the form using JavaScript

HTML forms Reading form data in JavaScript Form validation module

Working with regular expressions in JavaScript

Submitting the form using AJAX

Making network requests in JavaScript What is a Promise? Creating the API call module

Constructing the request details Other network request methods

Back to the form

Adding charts to the website using Chart.js

Adding charts to the canvas elements Setting up tab sections

Adding Google Maps to the web page

Adding Google Maps with a marker

Generating a production build

Shipping the code

Summary

Real-Time Video Call App with WebRTC

Introduction to WebRTC

History of WebRTC JavaScript WebAPIs JavaScript WebRTC API

MediaStream

Using Adapter.js library

RTCPeerConnection and RTCDataChannel

Building the Video Call application Initial project setup Adding styles to the page Building the Video Call app

Creating a room Adding participants to your room

Click to copy text Joining a room

Setters and getters

Adding and removing videos

Selecting a video

Video Call in action

Summary

Developing a Weather Widget

Can you build a Weather Widget? Introduction to web components

HTML templates HTML imports

Building the Weather Widget

Working of the Weather Widget Retrieving the geolocation Creating the weather custom element

Testing the custom element

Attaching a shadow DOM Working with the custom element

Adding dependency modules Retrieving and displaying weather information Adding the current time to the widget Responding to changes in element attributes Using setters and getters

Fixing browser compatibility Essential things to know

Summary

Building a Blog with React

Why use a framework?

Selecting a framework

React

Immutable state Props Building the Counter

The React crash course

Adding and managing states

Managing the state for the input field Managing the state for the tasks Adding new tasks

Preventing mutations using the spread syntax

Advantages of using React

Performance Maintainability Size

Building a blog with React

Creating the navigation bar Implementing routing and navigation using React Router

The routes file Adding routes in the app component Managing history using withRouter Proptype validation Seamless navigation with NavLink

Blog home page

Using child components Displaying post details

Adding a new blog post

Submitting the post

Generating production builds

Summary

Redux

What is Redux?

Flux Introduction to Redux

Store Actions Reducers

Implementing Redux in the blog

The folder structure Initial state Action types Actions

Get all posts Adding a new post

Reducers

The Root Reducer

Store Connecting Redux with React components

The App component Home component Post component The NewPost component

The Redux data flow Persisting Redux store

Summary

← Prev
Back
Next →

← Prev
Back
Next →