Home Page Icon
Home Page
Table of Contents for
4. Course Module 4: Mastering React
Close
4. Course Module 4: Mastering React
by Tom Bray, Ethan Holmes, Ryan Vice, Adam Horton, Narayan Prusty, Artemij Fedoseje
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
Search in book...
Toggle Font Controls
Playlists
Add To
Create new playlist
Name your new playlist
Playlist description (optional)
Cancel
Create playlist
Sign In
Email address
Password
Forgot Password?
Create account
Login
or
Continue with Facebook
Continue with Google
Sign Up
Full Name
Email address
Confirm Email Address
Password
Login
Create account
or
Continue with Facebook
Continue with Google
Prev
Previous Chapter
Implementing modules – the new way
Next
Next Chapter
1. Dynamic Components, Mixins, Forms, and More JSX
Part 4. Course Module 4: Mastering React
Add Highlight
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click
here
login for view all page.
Day Mode
Cloud Mode
Night Mode
Reset