Modern Front-End Development for Rails, Second Edition: Hotwire, Stimulus, Turbo, and React

Acknowledgments
 So You Want to Write Some Client-Side Code
   Basic Assumptions
   The Tools We’ll Use
   How This Book Is Organized
   Let’s Build an App
   The Sample Code
   Sample Code Troubleshooting
   What’s Next
Part I. Getting Started
   1. Getting Started with Client-Side Rails
      Managing State and Front-End Development
      Configuring Rails for Front-End Development
      Running the App
      Adding TypeScript
      What’s Next
   2. Hotwire and Turbo
      The Hotwire Way
      Installing Turbo
      What Is Turbo Drive?
      Adding Interactivity with Turbo Frames
      Navigating Outside a Turbo Frame
      Extending Our Page with Turbo Streams
      Turbo Frames vs. Turbo Streams
      Lazy Loading a Turbo Frame
      What’s Next
   3. Stimulus
      What Is Stimulus?
      Installing Stimulus
      Adding Our First Controller
      Creating an Action
      Adding a Target
      Using Values
      Automating Value Changes
      Stimulus Has Class
      Going Generic
      Stimulus Quick Reference
      What’s Next
   4. React
      What Is React?
      Installing React
      Adding Our First Component
      Composing Components
      Connecting to the Page
      Interactivity, State, and Hooks
      Sharing State
      What’s Next
   5. Cascading Style Sheets
      Building CSS in cssbundling-rails
      Using Asset Files
      Animating CSS
      Adding CSS Transitions
      Animating Turbo Streams with Animate.css
      Using CSS and React Components
      What’s Next
Part II. Going Deeper
   6. TypeScript
      Using TypeScript
      Understanding Basic TypeScript Types
      Static vs. Dynamic Typing
      Adding Type Annotations to Variables
      Adding Type Annotations to Functions
      Adding Type Annotations to Classes
      Defining Interfaces
      Type Checking Classes and Interfaces
      Getting Type Knowledge to TypeScript
      What’s Next
   7. Bundling
      Yarn Holds It All Together
      esbuild and Friends
      CSS Bundling
      Propshaft
      Import Maps
      What’s Next
Part III. Managing Servers and State
   8. Talking to the Server
      Using Stimulus to Manage Forms
      Stimulus and Ajax
      Using Data in Stimulus
      Acquiring Data in React with useState
      What’s Next
   9. Immediate Communication with ActionCable
      Installing ActionCable
      Turbo Streams and ActionCable
      Stimulus and ActionCable
      React and ActionCable
      What’s Next
   10. Managing State in Stimulus Code
      Using Data Values for Logic
      Observing and Responding to DOM Changes
      Rendering CSS with Data Attributes
      Using Kredis to Store Short-Term State
      What’s Next
   11. Managing State in React
      Using Reducers
      Using Context to Share State
      Adding Asynchronous Events to Contexts
      What’s Next
   12. Using Redux to Manage State
      Installing and Using Redux
      Adding Asynchronous Actions to Redux
      What’s Next
Part IV. Validating Your Code
   13. Validating Code with Advanced TypeScript
      Creating Union Types
      Specifying Types with Literal Types
      Using Enums and Literal Types
      Building Mapped Types and Utility Types
      TypeScript Configuration Options
      Dealing with Strictness
      What’s Next
   14. Testing with Cypress
      Why Cypress?
      Installing Cypress
      Configuring Cypress and Rails
      Writing the First Test
      Understanding How Cypress Works
      What’s Next
   15. More Testing and Troubleshooting
      Writing More Cypress Tests
      Testing the Schedule Filter
      Cypress and React
      Cypress Utilities and API
      Troubleshooting
      What’s Next
   A1. Framework Swap
      Import Maps
      The All-Hotwire App
      The All-React App
      Comparison