React: Building Modern Web Applications. Building Modern Web Applications

Spis treści książki

• 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 games 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 "forof" 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

pokaż cały spis treści

ukryj recenzje