Modern JavaScript Web Development Cookbook电子书

Title Page

Copyright and Credits

Modern JavaScript Web Development Cookbook

Dedication

www.PacktPub.com

Why subscribe?

PacktPub.com

Contributors

About the author

About the reviewers

Packt is searching for authors like you

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Download the color images

Conventions used

Sections

Getting ready

How to do it...

How it works...

There's more...

There's more…

See also

Get in touch

Reviews

Working with JavaScript Development Tools

Introduction

Installing Visual Studio Code for development

How to do it…

How it works…

Extending Visual Studio Code

How to do it…

Adding Fira Code font for better editing

How to do it…

How it works…

Adding npm for package management

How to do it…

How it works…

Creating a project with npm

Installing packages for different purposes

There's more…

Doing version control with Git

How to do it…

There's more…

Formatting your source code with Prettier

How to do it…

How it works…

Documenting your code with JSDoc

How to do it…

How it works…

Adding code quality checks with ESLint

How to do it…

How it works…

There's more…

Adding Flow for data types checks

How to do it…

How it works…

Configuring Flow's linting

Using Flow within VSC

Using Modern JavaScript Features

Introduction

Adding types

Getting started

How to do it...

Basic types in Flow

Union types

Class types

Type aliases

Generic types

Opaque types for safer coding

Working with libraries

Working with strings

How to do it...

Interpolating in template strings

Tagged templates

Writing multiline strings

Repeating strings

Padding strings

Searching in strings

Trimming strings

Iterating over strings

Enhancing your code

How to do it...

Working in strict mode

Scoping variables

Spreading and joining values

Destructuring arrays and objects

Doing powers

Defining functions

How to do it...

Writing arrow functions

Returning values

Handling this in arrow functions

Defining types for arrow functions

Defining default argument values

Programming functionally

How to do it...

Reducing arrays to values

Mapping arrays

Filtering arrays

Producing functions from functions

Doing async calls compactly

Getting started

How to do it...

Doing Ajax calls with promises

Doing Ajax calls with async/await

Working with objects and classes

How to do it...

Defining classes

Extending classes

Implementing interfaces

Static methods

Using getters and setters

Organizing code in modules

How to do it...

Doing modules the IIFE way

Redoing our IIFE module in the modern way

Adding initialization checks

Using more import/export possibilities

Using Flow types with modules

Determining a feature's availability

How to do it...

Developing with Node

Introduction

Checking Node's setup

How to do it…

How it works…

Working with modules

How to do it…

How it works…

Using Flow with Node, directly

How to do it…

How it works…

Using Flow with Node through preprocessing

How to do it…

How it works...

Running your Node code with Nodemon

How to do it...

How it works...

Using promises instead of error first callbacks

How to do it…

How it works…

There's more…

Working with streams to process requests

How to do it…

How it works…

Compressing files with streams

How to do it…

How it works…

Working with a database

Getting ready

How to do it…

Getting a connection

Executing some queries

Updating the database

Getting everything together

How it works…

There's more...

Executing external processes with exec()

How to do it…

How it works…

There's more...

Using spawn() to run a command, and communicating with it

How to do it…

How it works…

Using fork() to run Node commands

How to do it…

How it works…

Implementing RESTful Services with Node

Introduction

Developing a server with Express

How to do it...

How it works...

Adding middleware

Getting ready

How to do it...

How it works...

Getting request parameters

How to do it...

How it works...

Serving static files

How to do it...

How it works...

There's more...

Adding routes

How to do it...

How it works...

Implementing secure connections

How to do it...

How it works...

Adding security safeguards with Helmet

How to do it...

How it works...

Implementing CORS

How to do it...

How it works...

Adding authentication with JWT

How to do it...

How it works...

Tying it all together – building a REST server

How to do it...

How it works...

Handling GETs

Handling DELETEs

Handling PUTs

Handling POSTs

There's more...

Accepting JSON data

Adding the PATCH method for partial updates

Using Restify instead of Express

Allowing filtering, sorting, and pagination

Using GraphQL instead of REST

Implementing a microservice-based architecture

Testing and Debugging Your Server

Introduction

Adding logging with Winston

How to do it...

How it works...

There's more...

Adding HTTP logging with Morgan

How to do it...

How it works...

There's more...

Configuring your server for different environments

How to do it...

How it works...

There's more...

Unit testing your code

How to do it...

Doing functional tests

Using spies

Working with mocks

How it works...

There's more....

Measuring your test coverage

How to do it...

How it works...

Debugging your code

How to do it...

How it works...

Testing simple services from the command line

Getting ready

How to do it...

Testing more complex sequences of calls with Postman

Getting ready

How to do it...

Doing basic requests

Adding some checks

Chaining requests

How it works...

There's more...

Documenting and testing your REST API with Swagger

How to do it...

Writing our specs

Enabling Swagger

How it works...

Developing with React

Introduction

Starting out with React

How to do it...

How it works...

There's more...

Reinstalling your tools

How to do it...

Reinstalling Flow and Prettier

Reinstalling ESLint

How it works...

Defining components

How to do it...

Creating the application

Creating the basic App component

Creating the RegionsInformationTable component

Creating the CountryFilterBar component

Creating the ResultsDataTable component

Creating the ExpandableCard component

How it works...

There's more...

Handling state

How to do it...

How it works...

There's more...

Composing components

How to do it...

How it works...

Handling life cycle events

How to do it...

How it works...

Simplifying component development with Storybook

How to do it...

How it works...

There's more...

Enhancing Your Application

Introduction

Adding SASS for separate styling

How to do it…

How it works…

Creating StyledComponents for inline styling

How to do it…

How it works…

Making your application responsive to screen sizes

How to do it…

How it works…

Resizing elements

Reordering elements

Hiding or showing elements

Making your application adaptive for enhanced usability

How to do it…

How it works…

Making a global application with internationalization and localization

How to do it…

How it works…

Setting up for accessibility (a11y)

How to do it…

How it works…

Solving static problems

Solving runtime problems

There is more

Expanding Your Application

Introduction

Managing state with Redux

Getting ready

How to do it...

Defining actions

Writing a reducer

Defining the store

Building our components

Connecting components to the store

Defining the main page

How it works...

See also

Doing async actions with redux-thunk

How to do it…

Defining the actions

Writing the reducer

Modifying the country drop-down list

Modifying the region table

Setting up the main application

Using thunks

How it works…

There's more…

Adding routing with react-router

Getting started

How to do it…

How it works…

There's more…

Adding authorization to routes

How to do it…

Creating a login component

Defining actions and the reducer

Creating a component to protect a route

How it works…

There's more…

Code splitting for performance

Getting ready

How to do it…

How it works…

There's more…

Debugging Your Application

Introduction

Logging with style

Getting ready

How to do it…

How it works…

Debugging with the React Developer Tools

Getting Ready

How to do it…

How it works…

Debugging with the standalone tool

Getting ready

How to do it…

How it works…

Logging Redux with redux-logger

Getting ready

How to do it…

Setting up our counter application

Setting up our region application

How it works…

Logging the counter application

Logging the region application

Debugging Redux with the Redux Developer Tools

Getting ready

How to do it…

How it works…

Connecting routing for debugging

Getting ready

How to do it…

How it works…

Testing Your Application

Introduction

Testing components with Jest and Enzyme

Getting ready

How to do it...

Testing a component without events

Testing a component with events

How it works...

Testing reducers and mappings

How to do it...

How it works...

Testing actions and thunks

Getting ready

How to do it...

How it works...

Testing changes with Snapshots

How to do it...

How it works...

Running the tests

The produced snapshot files

Regenerating snapshots

Measuring test coverage

How to do it...

How it works...

Creating Mobile Apps with React Native

Introduction

Setting things up

How to do it...

How it works...

There's more...

Adding development tools

How to do it...

Adding ESLint

Adding Flow

Adding Prettier

How it works...

Using native components

Getting ready

How to do it...

How it works...

There's more...

Adapting to devices and orientation

How to do it...

How it works...

There's more...

Styling and laying out your components

How to do it...

How it works...

Adding platform-specific code

How to do it...

How it works...

There's more...

Routing and navigating

How to do it...

How it works...

There's more...

Testing and Debugging Your Mobile App

Introduction

Writing unit tests with Jest

Getting ready

How to do it...

How it works...

Adding snapshot testing

How to do it...

How it works...

Measuring test coverage

How to do it...

How it works...

Using Storybook to preview components

Getting ready

How to do it...

How it works...

Debugging your app with react-native-debugger

Getting started

How to do it...

How it works...

Debugging in an alternate way with Reactotron

Getting ready

How to do it...

How it works...

Creating a Desktop Application with Electron

Introduction

Setting up Electron with React

How to do it...

How it works...

Adding Node functionality to your app

How to do it...

How it works...

Building a more windowy experience

How to do it...

How it works...

Testing and debugging your app

How to do it...

How it works...

There's more...

Making a distributable package

How to do it...

How it works...

Other Books You May Enjoy

Leave a review - let other readers know what you think