• Client-Side Web Development
  • About the Book
  • 1 Getting Setup
    • 1.1 Web Browser
    • 1.2 Code Editors
      • Visual Studio Code
      • Atom
      • Brackets
      • Sublime Text
    • 1.3 Bash (Command Line)
    • 1.4 Git and GitHub
    • 1.5 Node and npm
      • Managing packages with npm
      • package.json
    • Resources
  • 2 Client-Side Development
    • 2.1 Client-Side File Types
    • 2.2 HTTP Requests and Servers
      • Development Servers
  • 3 HTML Fundamentals
    • 3.1 HTML Elements
      • Some Example Elements
      • Comments
      • Attributes
      • Empty Elements
    • 3.2 Nesting Elements
      • Block vs. Inline Elements
    • 3.3 Web Page Structure
      • Doctype Declaration
      • The <head> Section
    • 3.4 Web Page Template
    • Resources
  • 4 Standards and Accessibility
    • 4.1 Web Standards
    • 4.2 Why Accessibility
    • 4.3 Supporting Accessibility
      • Semantic HTML
      • ARIA
      • Page Structure (Navigable)
      • Visual Information (Perceivable)
    • Resources
  • 5 CSS Fundamentals
    • 5.1 Why Two Different Languages?
    • 5.2 CSS Rules
      • Overall Syntax
      • CSS Properties
      • CSS Selectors
    • 5.3 The Cascade
      • Rule Specificity
    • Resources
  • 6 CSS Options
    • 6.1 Compound Selectors
      • Group Selector
      • Combined Selectors
      • Descendant Selector
      • Pseudo-classes
      • Attribute Selectors
    • 6.2 Property Values
      • Units & Sizes
      • Colors
      • Fonts and Icons
      • Backgrounds and Images
    • Resources
  • 7 CSS Layouts
    • 7.1 Display
    • 7.2 The Box Model
      • Padding
      • Border
      • Margin
      • Box-Sizing
    • 7.3 Position
      • Floating
    • 7.4 Flexbox
    • Resources
  • 8 Responsive CSS
    • 8.1 Mobile-First Design
      • Mobile-First Design Principles
      • Specifying Viewport
    • 8.2 Media Queries
      • Example: Responsive Flexbox
    • Resources
  • 9 CSS Frameworks
    • 9.1 Using a Framework
      • Including a Framework
    • 9.2 Bootstrap
      • Utility Classes
      • Responsive Design
      • The Grid
      • Components
    • Resources
  • 10 JavaScript Fundamentals
    • 10.1 Programming with JavaScript
      • History and Versions
    • 10.2 Running JavaScript
      • In the Browser
      • On the Command-line with Node.js
    • 10.3 Writing Scripts
      • Strict Mode
    • 10.4 Variables
      • Basic Data Types
      • Arrays
      • Objects
      • Type Coercion
    • 10.5 Control Structures
    • 10.6 Functions
    • Resources
  • 11 Functional Programming in JS
    • 11.1 Functions ARE Variables
      • Anonymous Functions
    • 11.2 Object Functions
    • 11.3 Callback Functions
      • Closures
    • 11.4 Functional Looping
      • Map
      • Filter
      • Reduce
    • 11.5 Pure Functions
    • Resources
  • 12 Document Object Model (DOM)
    • 12.1 The DOM API
      • Global Variables
    • 12.2 DOM Manipulation
      • Referencing HTML Elements
      • Modifying HTML Elements
      • Modifying the DOM Tree
      • Accessibility
    • 12.3 Listening for Events
      • Types of Events
      • Event-Driven Programming
    • Resources
  • 13 JavaScript Libraries
    • 13.1 Including a Library
    • 13.2 Example: jQuery
      • Maniputing the DOM
      • Handling Events
      • And more!
    • Resources
  • 14 AJAX Requests
    • 14.1 AJAX
      • XML and JSON
    • 14.2 Fetching Data
    • 14.3 Asynchronous Programming
      • Chaining Promises
      • Handling Errors
      • Other Data Formats
    • Resources
  • 15 ES6+ Features
    • 15.1 Classes
      • Why Classes?
      • Review: Classes in Java
      • ES6 Class Syntax
      • Inheritance
    • 15.2 Arrow Functions
      • Working with this
    • 15.3 Destructuring and Spreading
    • 15.4 Modules
      • Module Syntax
    • 15.5 Other Features
      • Template Strings
    • Resources
  • 16 Introduction to React
    • 16.1 Getting Set Up: Create React App
      • Running the Development Server
      • Project Structure
      • Alternatives to Create React App
    • 16.2 JSX
      • Inline Expressions
    • 16.3 React Components
      • Alternative: Class Components
      • Component Organization
    • 16.4 Properties (props)
      • Props and Composition
    • Resources
  • 17 Interactive React
    • 17.1 Handling Events in React
    • 17.2 State and Hooks
      • Updating State
      • State vs. Props
      • Lifting Up State
    • 17.3 Specific Interactions
      • Working with Forms
      • Fetching Data via AJAX
    • Resources
  • 18 Client-Side Routing
    • 18.1 Single-Page Applications
    • 18.2 React-Router
      • Routing
      • Linking
      • React Router and Github Pages
    • Resources
  • 19 Firebase
    • 19.1 Setting up Firebase
      • Creating a Project
      • Including Firebase in React
    • 19.2 User Authentication
      • Creating Users
      • Authentication Events
    • 19.3 Realtime Database
      • Security Rules
      • Reading and Writing Data
      • Listening for Data Changes
    • Resources
  • Special Topics
  • A Testing with Jest
    • A.1 Testing
    • A.2 Testing with Jest
    • A.3 Writing a Test
      • Assertions and Matchers
      • Organizing Tests
      • Running the Tests
      • Practice
    • A.4 Testing Web Apps with Jest
      • Practice
  • B Lab: Webpack
    • B.1 What is Webpack?
    • B.2 Getting Started
    • B.3 webpack.config.js
      • entry and output
    • B.4 Loaders
      • Babel Loader
      • Clean up :bath:
      • Further Loader Practice
  • C React Class Components
    • C.1 Props in Class Components
    • C.2 Handling Events in Class Components
      • Accessing this Component from Events
    • C.3 State in Class Components
      • Changing the State
    • C.4 The Component Lifecycle
      • Lifecycle Example: Fetching Data via AJAX
    • Resources
  • D CSS in JS
    • D.1 Why CSS in JS?
    • D.2 React Inline Styles
    • D.3 Aphrodite
    • D.4 CSS Modules
      • Ejecting from Create React App
      • Composing Classes
    • Resources
  • E Redux
  • F React Native
    • F.1 Getting Setup
      • Running React Native Apps
    • F.2 React Native Apps
      • Styling React Native
      • Interaction
      • Lists and Data
  • Published with bookdown

Client-Side Web Development

E Redux

See official documentation at https://redux.js.org/, https://redux.js.org/docs/introduction/, and https://redux.js.org/docs/basics/.