React: Building Modern Web Applications

Table of contents

1. React: Building Modern Web Applications
   1. Table of Contents
   2. React: Building Modern Web Applications
   3. Meet Your Course Guide
   4. Course Structure
   5. Course journey
   6. The Course Roadmap and Timeline
   7. 1. Course Module 1: Reactive Programming with JavaScript
      1. 1. Introduction and Installation
         1. A 10,000-foot overview
            1. An easier way to handle user interface programming
               1. Programming paradigms
         2. Installing the tools required
            1. Installing Node.js
            2. Installing the Starter Kit for ReactJS
            3. Installing Git
      2. 2. Core JavaScript
         1. The strict mode
         2. Variables and assignment
            1. Comments
            2. Flow control
         3. A note on values and NaN
            1. Functions
               1. Explanation
            2. Loops
            3. Taking a look at ECMAScript 6
      3. 3. Reactive Programming – The Basic Theory
         1. Declarative programming
         2. The war on Heisenbugs
         3. The Flux Architecture
         4. Complete UI teardown and rebuild
         5. JavaScript as a Domain-specific Language
         6. The Big-Coffee Notation
      4. 4. Demonstrating Nonfunctional Reactive Programming – A Live Example
         1. The history of a game with multiple ports
         2. The HTML for the web page
            1. Using a content distribution network wherever we can
            2. Some simple styling
            3. A fairly minimal page body
         3. The JavaScript that animates that page
            1. A brief syntax note – Immediately Invoked Function Expression
            2. Variable declaration and initialization
            3. The function used to start or restart the game
            4. The function that creates game levels
            5. Getting our hands dirty with ReactJS classes
            6. Tick-tock, tick-tock – the game's clock ticks
            7. GAME OVER
      5. 5. Learning Functional Programming – The Basics
         1. Custom sort functions – the first example of functional JavaScript and first-class functions
            1. This leads us to array.filter()
            2. Illusionism, map, reduce, and filter
            3. Fool's gold – extending Array.prototype
            4. Avoiding global pollution
            5. The map, reduce, and filter toolbox – map
            6. The reduce function
            7. The last core tool – filter
         2. An overview of information hiding in JavaScript
            1. Information hiding with JavaScript closures
      6. 6. Functional Reactive Programming – The Basics
         1. A trip down computer folklore's memory lane
            1. Advanced prerequisites for Hello, World!
         2. Distinguishing the features of functional reactive programming
         3. If you learn just one thing...
         4. Learn what you can!
         5. JavaScript as the new bare metal
      7. 7. Not Reinventing the Wheel – Tools for Functional Reactive Programming
         1. ClojureScript
         2. Om
         3. Bacon.js
         4. Brython – a Python browser implementation
         5. Immutable.js – permanent protection from change
         6. Jest – BDD unit testing from Facebook
         7. Implementing the Flux Architecture using Fluxxor
      8. 8. Demonstrating Functional Reactive Programming in JavaScript – A Live Example, Part I
         1. What we will be attempting in this chapter
         2. This project's first complete component
         3. The render() method
         4. Triggering the actual display for what we have created
      9. 9. Demonstrating Functional Reactive Programming in JavaScript with a Live Example Part II – A To-do List
         1. Adding a to-do list to our application
            1. Including ReactJS add-ons in our project
            2. Setting the appropriate initial state
            3. Making text editable
            4. Heavy lifting with render()
            5. Inner functions used to render
            6. Building the result table
            7. Rendering our result
            8. Differentiating columns visually
      10. 10. Demonstrating Functional Reactive Programming in JavaScript: A Live Example Part III – A Calendar
          1. Play it again Sam – an interesting challenge
          2. Classical Hijaxing works well
          3. Built with usability in mind, but there's still room to grow
          4. Plain old JavaScript objects are all you need
          5. Progressive disclosure that starts simply
          6. A render() method can easily delegate
          7. Boring code is better than interesting code!
          8. A simple UI for simply non-recurring entries...
          9. The user can still opt-in for more
          10. Avoiding being clever
          11. Anonymous helper functions may lack pixie dust
          12. How far in the future should we show?
          13. Different stripes for different entry types
          14. Now we're ready to display!
          15. Let's be nice and sort each day in order
          16. Let them use Markdown!
          17. One thing at a time!
          18. The holidays that inspired this calendar
      11. 11. Demonstrating Functional Reactive Programming in JavaScript with a Live Example Part IV – Adding a Scratchpad and Putting It All Together
          1. Adding a WYSIWYG scratchpad, courtesy CKeditor
             1. Bringing all things together into one web page
             2. This book is about ReactJS, so why use CKeditor?
          2. CKeditor – small free offerings, and small is beautiful
             1. Including CKeditor in our page
          3. Integrating all four subcomponents into one page
          4. Persistence
             1. One detail – persisting the CKeditor state
      12. 12. How It All Fits Together
          1. A review of the terrain covered
          2. Could the Mythical Man-Month have been avoided?
          3. ReactJS is just a view, but what a view!
          4. Programming is fun again!
   8. 2. Course Module 2: React.js Essentials
      1. 1. Installing Powerful Tools for Your Project
         1. Approaching our project
         2. Getting data from the Twitter Streaming API
         3. Filtering data with Snapkite Engine
         4. Creating the project structure
         5. Creating package.json
         6. Reusing Node.js modules
         7. Building with Gulp.js
         8. Creating a web page
      2. 2. Create Your First React Element
         1. Understanding the virtual DOM
         2. Pending
         3. Creating React Elements with JavaScript
            1. The type parameter
            2. The props parameter
            3. The children parameter
         4. Rendering React Elements
         5. Creating React Elements with JSX
      3. 3. Create Your First React Component
         1. Stateless versus stateful
         2. Creating your first stateless React component
         3. Creating your first stateful React component
      4. 4. Make Your React Components Reactive
         1. Solving a problem using React
         2. Planning your React application
         3. Creating a container React component
      5. 5. Use Your React Components with Another Library
         1. Using another library in your React component
         2. Understanding React component's lifecycle methods
            1. Mounting methods
               1. The getInitialState method
               2. The componentWillMount method
               3. The componentDidMount method
            2. Unmounting methods
               1. The componentWillUnmount method
      6. 6. Update Your React Components
         1. Understanding component lifecycle's updating methods
            1. The componentWillReceiveProps method
            2. The shouldComponentUpdate method
            3. The componentWillUpdate method
            4. The componentDidUpdate method
         2. Setting default React component properties
         3. Validating React component properties
         4. Creating a Collection component
      7. 7. Build Complex React Components
         1. Creating the TweetList component
         2. Creating the CollectionControls component
         3. Creating the CollectionRenameForm component
         4. Creating the Button component
         5. Creating the CollectionExportForm component
      8. 8. Test Your React Application with Jest
         1. Why write unit tests?
         2. Creating test suits, specs, and expectations
         3. Installing and running Jest
         4. Creating multiple specs and expectations
         5. Testing React components
      9. 9. Supercharge Your React Architecture with Flux
         1. Analyzing your web application's architecture
         2. Creating a dispatcher
         3. Creating an action creator
         4. Creating a store
      10. 10. Prepare Your React Application for Painless Maintenance with Flux
          1. Decoupling concerns with Flux
          2. Refactoring the Stream component
          3. Creating CollectionStore
          4. Creating CollectionActionCreators
          5. Refactoring the Application component
          6. Refactoring the Collection component
          7. Refactoring the CollectionControls component
          8. Refactoring the CollectionRenameForm component
          9. Refactoring the TweetList component
          10. Refactoring the StreamTweet component
          11. Build and go beyond
   9. 3. Course Module 3: Learning ECMAScript 6
      1. 1. Playing with Syntax
         1. The let keyword
            1. Declaring function scoped variables
            2. Declaring block scoped variables
            3. Re-declaring variables
         2. The const keyword
            1. The scope of constant variables
            2. Referencing the objects using constant variables
         3. Default parameter values
         4. The spread operator
            1. Other usages of the spread operator
               1. Making array values a part of another array
               2. Pushing the values of an array into another array
            2. Spreading multiple arrays
         5. The rest parameter
         6. The destructuring assignment
            1. The array destructuring assignment
               1. Ignoring values
               2. Using the rest operator in the array destructuring assignment
               3. Default values for variables
               4. Nested array destructuring
               5. Using the destructuring assignment as a parameter
            2. The object destructuring assignment
               1. Default values for the variables
               2. Destructuring computed property names
               3. Destructuring nested objects
               4. Using the object destructuring assignment as a parameter
         7. The arrow functions
            1. The value of "this" in an arrow function
            2. Other differences between the arrow and traditional functions
         8. The enhanced object literals
            1. Defining properties
            2. Defining methods
            3. The computed property names
      2. 2. Knowing Your Library
         1. Working with numbers
            1. The binary notation
            2. The octal notation
            3. The Number.isInteger(number) method
            4. The Number.isNaN(value) method
            5. The Number.isFinite(number) method
            6. The Number.isSafeInteger(number) method
            7. The Number.EPSILON property
         2. Doing Math
            1. Trigonometry related operations
            2. Arithmetic related operations
            3. Miscellaneous methods
               1. The Math.imul(number1, number2) function
               2. The Math.clz32(number) function
               3. The Math.sign(number) function
               4. The Math.trunc(number) function
               5. The Math.fround(number) function
         3. Working with strings
            1. Escaping larger code points
            2. The codePointAt(index) method
            3. The String.fromCodePoint(number1, …, number 2) method
            4. The repeat(count) method
            5. The includes(string, index) method
            6. The startsWith(string, index) method
            7. The endsWith(string, index) function
            8. Normalization
               1. A case study
            9. Template strings
               1. Expressions
               2. Multiline strings
               3. Raw strings
         4. Arrays
            1. The Array.from(iterable, mapFunc, this) method
            2. The Array.of(values…) method
            3. The fill(value, startIndex, endIndex) method
            4. The find(testingFunc, this) method
            5. The findIndex(testingFunc, this) method
            6. The copyWithin(targetIndex, startIndex, endIndex) function
            7. The entries(), keys(), and values() method
         5. Collections
            1. Array buffers
            2. Typed arrays
            3. Set
            4. WeakSet
            5. Map
            6. WeakMap
         6. Object
            1. The __proto__ property
               1. The Object.is(value1, value2) method
               2. The Object.setPrototypeOf(object, prototype) method
               3. The Object.assign(targetObj, sourceObjs…) method
      3. 3. Using Iterators
         1. The ES6 symbols
            1. The "typeof" operator
            2. The "new" operator
            3. Using symbols as property keys
            4. The Object.getOwnPropertySymbols() method
            5. The Symbol.for(string) method
            6. The well-known symbols
         2. The iteration protocols
            1. The iterator protocol
            2. The iterable protocol
         3. Generators
            1. The return(value) method
            2. The throw(exception) method
            3. The "yield*" keyword
         4. The "for…of" loop
         5. The tail call optimization
            1. Converting the non-tail calls into the tail calls
      4. 4. Asynchronous Programming
         1. The JavaScript execution model
         2. Writing asynchronous code
            1. The asynchronous code involving events
            2. The asynchronous code involving callbacks
         3. Promises to the rescue
            1. The Promise constructor
            2. The fulfillment value
            3. The then(onFulfilled, onRejected) method
            4. The catch(onRejected) method
            5. The Promise.resolve(value) method
            6. The Promise.reject(value) method
            7. The Promise.all(iterable) method
            8. The Promise.race(iterable) method
         4. The JavaScript APIs based on Promises
            1. The Battery Status API
            2. The Web Cryptography API
      5. 5. Implementing the Reflect API
         1. The Reflect object
            1. The Reflect.apply(function, this, args) method
            2. The Reflect.construct(constructor, args, prototype) method
            3. The Reflect.defineProperty(object, property, descriptor) method
               1. Understanding the data properties and accessor properties
            4. The Reflect.deleteProperty(object, property) method
            5. The Reflect.enumerate(object) method
            6. The Reflect.get(object, property, this) method
            7. The Reflect.set(object, property, value, this) method
            8. The Reflect.getOwnPropertyDescriptor(object, property) method
            9. The Reflect.getPrototypeOf(object) method
            10. The Reflect.setPrototypeOf(object, prototype) method
            11. The Reflect.has(object, property) method
            12. The Reflect.isExtensible(object) method
            13. The Reflect.preventExtensions(object) method
            14. The Reflect.ownKeys(object) method
      6. 6. Using Proxies
         1. Proxies in a nutshell
            1. Terminology
         2. The Proxy API
            1. Traps
               1. The get(target, property, receiver) method
                  1. Rules
               2. The set(target, property, value, receiver) method
                  1. Rules
               3. The has(target, property) method
                  1. Rules
               4. The isExtensible(target) method
                  1. Rules
               5. The getPrototypeOf(target) method
                  1. Rules
               6. The setPrototypeOf(target, prototype) method
                  1. Rules
               7. The preventExtensions(target) method
                  1. Rules
               8. The getOwnPropertyDescriptor(target, property) method
                  1. Rules
               9. The defineProperty(target, property, descriptor) method
                  1. Rules
               10. The deleteProperty(target, property) method
                   1. Rules
               11. The enumerate(target) method
                   1. Rules
               12. The ownKeys(target) method
                   1. Rules
               13. The apply(target, thisValue, arguments) method
               14. The construct(target, arguments) method
            2. The Proxy.revocable(target, handler) method
               1. Use Case
         3. The uses of proxies
      7. 7. Walking You Through Classes
         1. Understanding the Object-oriented JavaScript
            1. The JavaScript data types
            2. Creating objects
            3. Understanding inheritance
            4. The constructors of primitive data types
         2. Using classes
            1. Defining a class
               1. The class declaration
               2. The class expression
            2. The prototype methods
               1. The get and set methods
               2. The generator method
            3. The static methods
            4. Implementing inheritance in classes
            5. The computed method names
            6. The attributes of properties
            7. Classes are not hoisted!
            8. Overriding the result of the constructor method
            9. The "Symbol.species" static accessor property
            10. The "new.target" implicit parameter
         3. Using "super" in the object literals
      8. 8. Modular Programming
         1. The JavaScript modules in a nutshell
         2. Implementing modules – the old way
            1. The Immediately-Invoked Function Expression
            2. Asynchronous Module Definition
            3. CommonJS
            4. Universal Module Definition
         3. Implementing modules – the new way
            1. Creating the ES6 modules
            2. Importing the ES6 modules
            3. The module loader
            4. Using modules in browsers
            5. Using modules in the eval() function
            6. The default exports vs. the named exports
            7. Diving into an example
   10. 4. Course Module 4: Mastering React
       1. 1. Dynamic Components, Mixins, Forms, and More JSX
          1. Dynamic components
             1. How it works
          2. Mixins
             1. How it works
          3. Forms
             1. Controlled components - the read-only input
                1. How it works
             2. Controlled components - the read and write input
                1. How it works
                2. Isn't that harder than it needs to be?
             3. Controlled components – a simple form
                1. How it works
                2. But what about the best practices?
                3. Refactoring the form to be data driven
                4. How it works
             4. Validation
                1. Validation types
                   1. Field-level validation
                   2. Form-level validation
                2. The react-validation-mixin example
                   1. Getting the code
                   2. Running the code
                   3. Getting the code
       2. 2. Anatomy of a React Application
          1. What is a single-page application?
          2. Three aspects of a SPA design
             1. Build systems
                1. Choosing a build system
                2. Module systems
                   1. CommonJS
                   2. AMD
                   3. Our module choice
             2. CSS preprocessors
             3. Compiling the modern JS syntax and JSX templates
             4. Front-end architecture components
                1. The front-end router
                2. Front-end models
                3. Views, view models, and view controllers
                4. Messaging and eventing
                5. Other utility needs
             5. The application design
                1. Creating wireframes
                2. Main data entities and the API
                3. Main views, site map, and routes
       3. 3. Starting a React Application
          1. Application design
             1. Creating wireframes
                1. User-related views
                2. Post-related views
             2. Data entities
             3. Main views and the sitemap
          2. Preparing the development environment
             1. Installing and configuring Webpack
                1. The Webpack configuration
                   1. Entry and output sections
                   2. The plugins section
                   3. The resolve section
                   4. The module section
          3. Considerations before starting
             1. React and rendering
                1. Browser support
                2. Form validation
          4. Starting the app
             1. The directory structure
             2. The mock database
             3. index.html
             4. js/app.jsx
             5. Main views
             6. Linking views with React Router
                1. js/views/appHeader.jsx
                2. js/views/login.jsx
       4. 4. React Blog App Part 1 – Actions and Common Components
          1. Reflux actions
          2. Reusable components and base styles
             1. Base styles
             2. Inputs and loading indicator
                1. The BasicInput component
                2. The loader component
             3. The application header
       5. 5. React Blog App Part 2 – Users
          1. Code manifest
          2. Application runtime configuration
          3. Mixins and dependencies
             1. Reading and writing cookies
             2. The form utilities mixin
          4. User-related stores
             1. The session context store
             2. The user store
          5. User views
             1. The log in view
             2. The create user view
                1. Mixins and lifecycle methods
                2. The user profile image
                3. Form validation and submission
             3. The user view component
             4. The user list view
             5. The user view
          6. Other affected views
             1. The app header
       6. 6. React Blog App Part 3 – Posts
          1. Code manifest
          2. The posts store
          3. Post views
             1. Post create/edit
                1. Mixins and lifecycle methods
                2. Form submission
             2. The post view
             3. The post list component
             4. The post list view
          4. Other affected views
             1. The user view
       7. 7. React Blog App Part 4 – Infinite Scroll and Search
          1. Infinite scroll loading
             1. Infinite scroll code manifest
             2. Modifying the posts store
             3. Modifying the post list component
          2. Searching posts
             1. Search feature code manifest
             2. The search store
             3. Modifying the posts store
             4. Modifying the application header
             5. Modifying the post list component
          3. Final thoughts
             1. Suggested improvements
                1. Level up the blog app
       8. 8. Animation in React
          1. Animation terms
          2. CSS transitions using class switching
             1. JavaScript code
             2. CSS source
          3. Animating DOM enter and exit
             1. Popover menus
             2. JavaScript source
             3. CSS source
             4. List filtering
             5. JavaScript source
             6. CSS source
          4. Using the React-Motion animation library
             1. How React-Motion works
             2. Clock animation
             3. JavaScript source
             4. CSS source
   11. 5. Course Module 5: Getting Started with React Native
       1. 1. Exploring the Sample Application
          1. Installing Xcode
          2. Running the sample application
             1. A sneak peek at the sample application
          3. Experimenting with the sample application
       2. 2. Beginning with the Example Application
          1. Generating the projects
             1. Xcode and the iOS simulator
             2. The Android SDK and emulator
             3. Modifying the React Native starter template
          2. Structuring the application
             1. Creating the SimpleButton component
          3. Navigation
             1. The Navigator component
                1. Navigator.NavigationBar
             2. The NoteScreen – first pass
       3. 3. Working with Styles and Layout
          1. React CSS
             1. Style Sheet
             2. Styling the SimpleButton component
          2. Layout and Flexbox
             1. Flex container
                1. Flex items
                2. Horizontal and vertical centering
                3. Absolute positioning
          3. Styling the NavigationBar component
             1. Changing the Android Material Theme
          4. Styling the NoteScreen
       4. 4. Displaying and Saving Data
          1. Lists
             1. Understanding props
                1. Using state
                2. Passing callbacks in props
                3. Creating new notes
                4. Using AsyncStorage
                5. Deleting notes
       5. 5. Working with Geolocation and Maps
          1. Introducing the Geolocation API
             1. The location permission in iOS
          2. Tagging notes with geolocation
          3. NoteLocationScreen
             1. MapView
       6. 6. Integrating Native Modules
          1. Adding images to notes
          2. Installing react-native-camera on iOS
             1. Searching for Native Modules
             2. Using the camera component
          3. Viewing images
             1. The image component
             2. Deleting images
          4. Connecting the final pieces
       7. 7. Releasing the Application
          1. Generating the static bundle in iOS
          2. Testing the static bundle in iOS
          3. Creating an iOS release in Xcode
          4. Generating the Android APK
       8. Reflect and Test Yourself Answers
          1. Module 1: Reactive Programming with JavaScript
          2. Module 2: React.js Essentials
          3. Module 3: Learning ECMAScript 6
          4. Module 4: Mastering React
          5. Module 5: Getting Started with React Native
   12. Index