• Client-Side Web Development
  • About the Book
  • 1 Getting Setup
    • 1.1 Web Browser
    • 1.2 Code Editor
      • Visual Studio Code
      • 1.2.1 Other Editors
    • 1.3 Bash (Command Line)
    • 1.4 Node and npm
      • Installing software with npm
      • Managing local packages
    • 1.5 Git and GitHub
    • Resources
  • 2 Client-Side Development
    • 2.1 Clients and Servers
    • 2.2 URLs and Web Files
      • Client-Side File Types
    • 2.3 Servers and Hosting
      • Hosting with GitHub Pages
      • Development Servers
    • 2.4 Web Standards
    • 2.5 Web Accessibility
      • Supporting Accessibility
  • 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
    • Resources
  • 4 CSS Fundamentals
    • 4.1 Why Two Different Languages?
    • 4.2 Including CSS
    • 4.3 CSS Rules
      • CSS Selector Basics
      • CSS Property Basics
    • 4.4 The Cascade
    • Resources
  • 5 Semantic HTML
    • 5.1 Specific HTML Elements
      • Hyperlinks
      • Inline Textual Elements
      • Images and Media
      • Headings
      • Non-Semantic Elements
      • Sectioning Elements
      • Tables
      • Forms
    • 5.2 ARIA for Accessibility
      • ARIA Labeling
      • ARIA Roles and Landmarks
      • ARIA and Interactivity
    • Resources
  • 6 CSS Selectors
    • 6.1 Basic Selectors
      • Type Selector
      • Class Selector
      • Id Selector
    • 6.2 Complex Selectors
      • Grouping Selector
      • Compound Selector
      • Descendant Selector
      • Pseudo-classes
      • Additional Selectors
    • 6.3 Selector Specificity
    • Resources
  • 7 CSS Properties
    • 7.1 Specifying Property Values
      • Inherited Property Values
      • Length Units & Sizes
    • 7.2 Fonts and Text
    • 7.3 Colors and Backgrounds
      • Backgrounds and Images
    • 7.4 Spacing with the Box Model
      • Padding
      • Border
      • Margin
      • Padding vs. Margin
      • Box-Sizing
    • 7.5 Flow Layout
    • 7.6 Alternate Positioning
      • Floating
    • 7.7 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 ES6+ Syntax
    • 14.1 ES6+ Syntax Features
      • Arrow Functions
      • Destructuring
      • Spreading
      • Template Strings
    • 14.2 Modules
      • Module Syntax
    • 14.3 Classes
      • Why Classes?
      • Review: Classes in Java
      • ES6 Class Syntax
      • Inheritance
      • Working with this
  • 15 Introduction to React
    • 15.1 Getting Set Up: React and Vite
      • Running the Development Server
      • Project Structure
    • 15.2 JSX
      • Inline Expressions
    • 15.3 React Components
      • Component Organization
      • Deprecated Alternative: Class Components
    • 15.4 Properties (props)
      • Props and Composition
    • Resources
  • 16 Interactive React
    • 16.1 Handling Events in React
    • 16.2 State and Hooks
      • Updating State
      • State vs. Props
      • Lifting Up State
    • 16.3 Specific Interactions
      • Working with Forms
      • Fetching Data via AJAX
    • Resources
  • 17 Client-Side Routing
    • 17.1 Single-Page Applications
    • 17.2 React-Router
      • Routing
      • Linking
      • React Router and Hosting
    • Resources
  • 18 AJAX Requests
    • 18.1 AJAX
      • XML and JSON
    • 18.2 Fetching Data
    • 18.3 Asynchronous Programming
      • Chaining Promises
      • Handling Errors
      • Other Data Formats
    • Resources
  • 19 Firebase
    • 19.1 Setting up Firebase
      • Creating a Project
      • Including Firebase in React
      • Adding Collaborators to a Project
    • 19.2 Realtime Database
      • Setting Up the Database
      • Data References
      • Writing Data
      • Listening for Data Changes
      • Firebase Arrays
    • 19.3 User Authentication
      • Signing In with FirebaseUI
      • Managing the User
    • 19.4 Firebase Storage
      • File Inputs
      • Uploading Files
    • Resources
  • Appendices & Special Topics
  • A Code Style Guide
    • A.1 HTML Guidelines
      • Spacing
      • Specific Elements
      • Comments in HTML
    • A.2 CSS Guidelines
      • A.2.1 Spacing
      • A.2.2 Selectors
      • A.2.3 Class Names
      • A.2.4 Specific Properties
      • A.2.5 Responsive CSS
      • A.2.6 Comments in CSS
    • A.3 JavaScript Guidelines
      • A.3.1 Variables
      • A.3.2 Functions
      • A.3.3 Comments in JavaScript
      • A.3.4 Miscellaneous JavaScript Guidelines
    • A.4 React Guidelines
      • A.4.1 Components
      • A.4.2 Mapping Data
      • A.4.3 State
      • A.4.4 Events and Forms
    • A.5 Miscellaneous Guidelines
  • B Testing with Jest
    • B.1 Testing
    • B.2 Testing with Jest
    • B.3 Writing a Test
      • Assertions and Matchers
      • Organizing Tests
      • Running the Tests
      • Practice
    • B.4 Testing Web Apps with Jest
      • Practice
  • C Lab: Webpack
    • C.1 What is Webpack?
    • C.2 Getting Started
    • C.3 webpack.config.js
      • entry and output
    • C.4 Loaders
      • Babel Loader
      • Clean up :bath:
      • Further Loader Practice
  • D React Class Components
    • D.1 Props in Class Components
    • D.2 Handling Events in Class Components
      • Accessing this Component from Events
    • D.3 State in Class Components
      • Changing the State
    • D.4 The Component Lifecycle
      • Lifecycle Example: Fetching Data via AJAX
    • Resources
  • E CSS in JS
    • E.1 Why CSS in JS?
    • E.2 React Inline Styles
    • E.3 Aphrodite
    • E.4 CSS Modules
      • Ejecting from Create React App
      • Composing Classes
    • Resources
  • F Redux
  • G React Native
    • G.1 Getting Setup
      • Running React Native Apps
    • G.2 React Native Apps
      • Styling React Native
      • Interaction
      • Lists and Data
  • Published with bookdown

Client-Side Web Development

F Redux

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