React: Building Modern Web Applications电子书

React: Building Modern Web Applications

Table of Contents

React: Building Modern Web Applications

Meet Your Course Guide

Course Structure

Course journey

The Course Roadmap and Timeline

1. Course Module 1: Reactive Programming with JavaScript

1. Introduction and Installation

A 10,000-foot overview

An easier way to handle user interface programming

Programming paradigms

Installing the tools required

Installing Node.js

Installing the Starter Kit for ReactJS

Installing Git

2. Core JavaScript

The strict mode

Variables and assignment

Comments

Flow control

A note on values and NaN

Functions

Explanation

Loops

Taking a look at ECMAScript 6

3. Reactive Programming – The Basic Theory

Declarative programming

The war on Heisenbugs

The Flux Architecture

Complete UI teardown and rebuild

JavaScript as a Domain-specific Language

The Big-Coffee Notation

4. Demonstrating Nonfunctional Reactive Programming – A Live Example

The history of a game with multiple ports

The HTML for the web page

Using a content distribution network wherever we can

Some simple styling

A fairly minimal page body

The JavaScript that animates that page

A brief syntax note – Immediately Invoked Function Expression

Variable declaration and initialization

The function used to start or restart the game

The function that creates game levels

Getting our hands dirty with ReactJS classes

Tick-tock, tick-tock – the game's clock ticks

GAME OVER

5. Learning Functional Programming – The Basics

Custom sort functions – the first example of functional JavaScript and first-class functions

This leads us to array.filter()

Illusionism, map, reduce, and filter

Fool's gold – extending Array.prototype

Avoiding global pollution

The map, reduce, and filter toolbox – map

The reduce function

The last core tool – filter

An overview of information hiding in JavaScript

Information hiding with JavaScript closures

6. Functional Reactive Programming – The Basics

A trip down computer folklore's memory lane

Advanced prerequisites for Hello, World!

Distinguishing the features of functional reactive programming

If you learn just one thing...

Learn what you can!

JavaScript as the new bare metal

7. Not Reinventing the Wheel – Tools for Functional Reactive Programming

ClojureScript

Om

Bacon.js

Brython – a Python browser implementation

Immutable.js – permanent protection from change

Jest – BDD unit testing from Facebook

Implementing the Flux Architecture using Fluxxor

8. Demonstrating Functional Reactive Programming in JavaScript – A Live Example, Part I

What we will be attempting in this chapter

This project's first complete component

The render() method

Triggering the actual display for what we have created

9. Demonstrating Functional Reactive Programming in JavaScript with a Live Example Part II – A To-do List

Adding a to-do list to our application

Including ReactJS add-ons in our project

Setting the appropriate initial state

Making text editable

Heavy lifting with render()

Inner functions used to render

Building the result table

Rendering our result

Differentiating columns visually

10. Demonstrating Functional Reactive Programming in JavaScript: A Live Example Part III – A Calendar

Play it again Sam – an interesting challenge

Classical Hijaxing works well

Built with usability in mind, but there's still room to grow

Plain old JavaScript objects are all you need

Progressive disclosure that starts simply

A render() method can easily delegate

Boring code is better than interesting code!

A simple UI for simply non-recurring entries...

The user can still opt-in for more

Avoiding being clever

Anonymous helper functions may lack pixie dust

How far in the future should we show?

Different stripes for different entry types

Now we're ready to display!

Let's be nice and sort each day in order

Let them use Markdown!

One thing at a time!

The holidays that inspired this calendar

11. Demonstrating Functional Reactive Programming in JavaScript with a Live Example Part IV – Adding a Scratchpad and Putting It All Together

Adding a WYSIWYG scratchpad, courtesy CKeditor

Bringing all things together into one web page

This book is about ReactJS, so why use CKeditor?

CKeditor – small free offerings, and small is beautiful

Including CKeditor in our page

Integrating all four subcomponents into one page

Persistence

One detail – persisting the CKeditor state

12. How It All Fits Together

A review of the terrain covered

Could the Mythical Man-Month have been avoided?

ReactJS is just a view, but what a view!

Programming is fun again!

2. Course Module 2: React.js Essentials

1. Installing Powerful Tools for Your Project

Approaching our project

Getting data from the Twitter Streaming API

Filtering data with Snapkite Engine

Creating the project structure

Creating package.json

Reusing Node.js modules

Building with Gulp.js

Creating a web page

2. Create Your First React Element

Understanding the virtual DOM

Pending

Creating React Elements with JavaScript

The type parameter

The props parameter

The children parameter

Rendering React Elements

Creating React Elements with JSX

3. Create Your First React Component

Stateless versus stateful

Creating your first stateless React component

Creating your first stateful React component

4. Make Your React Components Reactive

Solving a problem using React

Planning your React application

Creating a container React component

5. Use Your React Components with Another Library

Using another library in your React component

Understanding React component's lifecycle methods

Mounting methods

The getInitialState method

The componentWillMount method

The componentDidMount method

Unmounting methods

The componentWillUnmount method

6. Update Your React Components

Understanding component lifecycle's updating methods

The componentWillReceiveProps method

The shouldComponentUpdate method

The componentWillUpdate method

The componentDidUpdate method

Setting default React component properties

Validating React component properties

Creating a Collection component

7. Build Complex React Components

Creating the TweetList component

Creating the CollectionControls component

Creating the CollectionRenameForm component

Creating the Button component

Creating the CollectionExportForm component

8. Test Your React Application with Jest

Why write unit tests?

Creating test suits, specs, and expectations

Installing and running Jest

Creating multiple specs and expectations

Testing React components

9. Supercharge Your React Architecture with Flux

Analyzing your web application's architecture

Creating a dispatcher

Creating an action creator

Creating a store

10. Prepare Your React Application for Painless Maintenance with Flux

Decoupling concerns with Flux

Refactoring the Stream component

Creating CollectionStore

Creating CollectionActionCreators

Refactoring the Application component

Refactoring the Collection component

Refactoring the CollectionControls component

Refactoring the CollectionRenameForm component

Refactoring the TweetList component

Refactoring the StreamTweet component

Build and go beyond

3. Course Module 3: Learning ECMAScript 6

1. Playing with Syntax

The let keyword

Declaring function scoped variables

Declaring block scoped variables

Re-declaring variables

The const keyword

The scope of constant variables

Referencing the objects using constant variables

Default parameter values

The spread operator

Other usages of the spread operator

Making array values a part of another array

Pushing the values of an array into another array

Spreading multiple arrays

The rest parameter

The destructuring assignment

The array destructuring assignment

Ignoring values

Using the rest operator in the array destructuring assignment

Default values for variables

Nested array destructuring

Using the destructuring assignment as a parameter

The object destructuring assignment

Default values for the variables

Destructuring computed property names

Destructuring nested objects

Using the object destructuring assignment as a parameter

The arrow functions

The value of "this" in an arrow function

Other differences between the arrow and traditional functions

The enhanced object literals

Defining properties

Defining methods

The computed property names

2. Knowing Your Library

Working with numbers

The binary notation

The octal notation

The Number.isInteger(number) method

The Number.isNaN(value) method

The Number.isFinite(number) method

The Number.isSafeInteger(number) method

The Number.EPSILON property

Doing Math

Trigonometry related operations

Arithmetic related operations

Miscellaneous methods

The Math.imul(number1, number2) function

The Math.clz32(number) function

The Math.sign(number) function

The Math.trunc(number) function

The Math.fround(number) function

Working with strings

Escaping larger code points

The codePointAt(index) method

The String.fromCodePoint(number1, …, number 2) method

The repeat(count) method

The includes(string, index) method

The startsWith(string, index) method

The endsWith(string, index) function

Normalization

A case study

Template strings

Expressions

Multiline strings

Raw strings

Arrays

The Array.from(iterable, mapFunc, this) method

The Array.of(values…) method

The fill(value, startIndex, endIndex) method

The find(testingFunc, this) method

The findIndex(testingFunc, this) method

The copyWithin(targetIndex, startIndex, endIndex) function

The entries(), keys(), and values() method

Collections

Array buffers

Typed arrays

Set

WeakSet

Map

WeakMap

Object

The __proto__ property

The Object.is(value1, value2) method

The Object.setPrototypeOf(object, prototype) method

The Object.assign(targetObj, sourceObjs…) method

3. Using Iterators

The ES6 symbols

The "typeof" operator

The "new" operator

Using symbols as property keys

The Object.getOwnPropertySymbols() method

The Symbol.for(string) method

The well-known symbols

The iteration protocols

The iterator protocol

The iterable protocol

Generators

The return(value) method

The throw(exception) method

The "yield*" keyword

The "for…of" loop

The tail call optimization

Converting the non-tail calls into the tail calls

4. Asynchronous Programming

The JavaScript execution model

Writing asynchronous code

The asynchronous code involving events

The asynchronous code involving callbacks

Promises to the rescue

The Promise constructor

The fulfillment value

The then(onFulfilled, onRejected) method

The catch(onRejected) method

The Promise.resolve(value) method

The Promise.reject(value) method

The Promise.all(iterable) method

The Promise.race(iterable) method

The JavaScript APIs based on Promises

The Battery Status API

The Web Cryptography API

5. Implementing the Reflect API

The Reflect object

The Reflect.apply(function, this, args) method

The Reflect.construct(constructor, args, prototype) method

The Reflect.defineProperty(object, property, descriptor) method

Understanding the data properties and accessor properties

The Reflect.deleteProperty(object, property) method

The Reflect.enumerate(object) method

The Reflect.get(object, property, this) method

The Reflect.set(object, property, value, this) method

The Reflect.getOwnPropertyDescriptor(object, property) method

The Reflect.getPrototypeOf(object) method

The Reflect.setPrototypeOf(object, prototype) method

The Reflect.has(object, property) method

The Reflect.isExtensible(object) method

The Reflect.preventExtensions(object) method

The Reflect.ownKeys(object) method

6. Using Proxies

Proxies in a nutshell

Terminology

The Proxy API

Traps

The get(target, property, receiver) method

Rules

The set(target, property, value, receiver) method

Rules

The has(target, property) method

Rules

The isExtensible(target) method

Rules

The getPrototypeOf(target) method

Rules

The setPrototypeOf(target, prototype) method

Rules

The preventExtensions(target) method

Rules

The getOwnPropertyDescriptor(target, property) method

Rules

The defineProperty(target, property, descriptor) method

Rules

The deleteProperty(target, property) method

Rules

The enumerate(target) method

Rules

The ownKeys(target) method

Rules

The apply(target, thisValue, arguments) method

The construct(target, arguments) method

The Proxy.revocable(target, handler) method

Use Case

The uses of proxies

7. Walking You Through Classes

Understanding the Object-oriented JavaScript

The JavaScript data types

Creating objects

Understanding inheritance

The constructors of primitive data types

Using classes

Defining a class

The class declaration

The class expression

The prototype methods

The get and set methods

The generator method

The static methods

Implementing inheritance in classes

The computed method names

The attributes of properties

Classes are not hoisted!

Overriding the result of the constructor method

The "Symbol.species" static accessor property

The "new.target" implicit parameter

Using "super" in the object literals

8. Modular Programming

The JavaScript modules in a nutshell

Implementing modules – the old way

The Immediately-Invoked Function Expression

Asynchronous Module Definition

CommonJS

Universal Module Definition

Implementing modules – the new way

Creating the ES6 modules

Importing the ES6 modules

The module loader

Using modules in browsers

Using modules in the eval() function

The default exports vs. the named exports

Diving into an example

4. Course Module 4: Mastering React

1. Dynamic Components, Mixins, Forms, and More JSX

Dynamic components

How it works

Mixins

How it works

Forms

Controlled components - the read-only input

How it works

Controlled components - the read and write input

How it works

Isn't that harder than it needs to be?

Controlled components – a simple form

How it works

But what about the best practices?

Refactoring the form to be data driven

How it works

Validation

Validation types

Field-level validation

Form-level validation

The react-validation-mixin example

Getting the code

Running the code

Getting the code

2. Anatomy of a React Application

What is a single-page application?

Three aspects of a SPA design

Build systems

Choosing a build system

Module systems

CommonJS

AMD

Our module choice

CSS preprocessors

Compiling the modern JS syntax and JSX templates

Front-end architecture components

The front-end router

Front-end models

Views, view models, and view controllers

Messaging and eventing

Other utility needs

The application design

Creating wireframes

Main data entities and the API

Main views, site map, and routes

3. Starting a React Application

Application design

Creating wireframes

User-related views

Post-related views

Data entities

Main views and the sitemap

Preparing the development environment

Installing and configuring Webpack

The Webpack configuration

Entry and output sections

The plugins section

The resolve section

The module section

Considerations before starting

React and rendering

Browser support

Form validation

Starting the app

The directory structure

The mock database

index.html

js/app.jsx

Main views

Linking views with React Router

js/views/appHeader.jsx

js/views/login.jsx

4. React Blog App Part 1 – Actions and Common Components

Reflux actions

Reusable components and base styles

Base styles

Inputs and loading indicator

The BasicInput component

The loader component

The application header

5. React Blog App Part 2 – Users

Code manifest

Application runtime configuration

Mixins and dependencies

Reading and writing cookies

The form utilities mixin

User-related stores

The session context store

The user store

User views

The log in view

The create user view

Mixins and lifecycle methods

The user profile image

Form validation and submission

The user view component

The user list view

The user view

Other affected views

The app header

6. React Blog App Part 3 – Posts

Code manifest

The posts store

Post views

Post create/edit

Mixins and lifecycle methods

Form submission

The post view

The post list component

The post list view

Other affected views

The user view

7. React Blog App Part 4 – Infinite Scroll and Search

Infinite scroll loading

Infinite scroll code manifest

Modifying the posts store

Modifying the post list component

Searching posts

Search feature code manifest

The search store

Modifying the posts store

Modifying the application header

Modifying the post list component

Final thoughts

Suggested improvements

Level up the blog app

8. Animation in React

Animation terms

CSS transitions using class switching

JavaScript code

CSS source

Animating DOM enter and exit

Popover menus

JavaScript source

CSS source

List filtering

JavaScript source

CSS source

Using the React-Motion animation library

How React-Motion works

Clock animation

JavaScript source

CSS source

5. Course Module 5: Getting Started with React Native

1. Exploring the Sample Application

Installing Xcode

Running the sample application

A sneak peek at the sample application

Experimenting with the sample application

2. Beginning with the Example Application

Generating the projects

Xcode and the iOS simulator

The Android SDK and emulator

Modifying the React Native starter template

Structuring the application

Creating the SimpleButton component

Navigation

The Navigator component

Navigator.NavigationBar

The NoteScreen – first pass

3. Working with Styles and Layout

React CSS

Style Sheet

Styling the SimpleButton component

Layout and Flexbox

Flex container

Flex items

Horizontal and vertical centering

Absolute positioning

Styling the NavigationBar component

Changing the Android Material Theme

Styling the NoteScreen

4. Displaying and Saving Data

Lists

Understanding props

Using state

Passing callbacks in props

Creating new notes

Using AsyncStorage

Deleting notes

5. Working with Geolocation and Maps

Introducing the Geolocation API

The location permission in iOS

Tagging notes with geolocation

NoteLocationScreen

MapView

6. Integrating Native Modules

Adding images to notes

Installing react-native-camera on iOS

Searching for Native Modules

Using the camera component

Viewing images

The image component

Deleting images

Connecting the final pieces

7. Releasing the Application

Generating the static bundle in iOS

Testing the static bundle in iOS

Creating an iOS release in Xcode

Generating the Android APK

Reflect and Test Yourself Answers

Module 1: Reactive Programming with JavaScript

Module 2: React.js Essentials

Module 3: Learning ECMAScript 6

Module 4: Mastering React

Module 5: Getting Started with React Native

Index