Modern Front-End Development for Rails

 CoverTable of ContentsChange HistoryBeta 9—June 9,....2021Beta 8—April 27,....2021Beta 7—March 11,....2021Beta 6—August 11,....2020Beta 5—June 5,....2020Beta 4—March 23,....2020Beta 3—February 9,....2020Beta 2—December 4,....2019Beta 1—October 30,....2019AcknowledgmentsSo You Want to Write Some Client-Side CodeBasic AssumptionsThe Tools We’ll UseHow This Book Is OrganizedLet’s Build an AppThe Sample CodePart I—Getting Started1. Getting Started with Client-Side RailsManaging State and Front-End DevelopmentConfiguring WebpackerUsing WebpackerWhat’s Next2. Hotwire and TurboThe Hotwire WayInstalling TurboWhat Is Turbo Drive?Adding Interactivity with Turbo FramesNavigating Outside a Turbo FrameExtending Our Page with Turbo StreamsTurbo Frames vs. Turbo StreamsLazy Loading a Turbo FrameWhat’s Next3. StimulusWhat Is Stimulus?Installing StimulusAdding Our First ControllerCreating an ActionAdding a TargetUsing ValuesAutomating Value ChangesStimulus Has ClassGoing GenericStimulus Quick ReferenceWhat’s Next4. ReactWhat Is React?Installing ReactAdding Our First ComponentComposing ComponentsConnecting to the PageInteractivity, State, and HooksSharing StateWhat’s Next5. Cascading Style SheetsBuilding CSS in webpackAdding CSS and Assets to webpackAnimating CSSAdding CSS TransitionsAnimating Turbo Streams with Animate.cssUsing CSS and React ComponentsWhat’s NextPart II—Going Deeper6. TypeScriptUsing TypeScriptUnderstanding Basic TypeScript TypesStatic vs. Dynamic TypingAdding Type Annotations to VariablesAdding Type Annotations to FunctionsAdding Type Annotations to ClassesDefining InterfacesType Checking Classes and InterfacesGetting Type Knowledge to TypeScriptWhat’s Next7. webpackUnderstanding Why webpack ExistsManaging Dependencies with YarnUnderstanding webpack ConfigurationWhat’s Next8. WebpackerWebpacker BasicsWriting Code Using WebpackerIntegrating Webpacker with FrameworksRunning webpackDeploying Webpacker in ProductionCustomizing WebpackerWhat’s NextPart III—Managing Servers and State9. Talking to the ServerUsing Stimulus to Manage FormsStimulus and AjaxUsing Data in StimulusAcquiring Data in React with useStateWhat’s Next10. Immediate Communication with ActionCableInstalling ActionCableTurbo Streams and ActionCableStimulus and ActionCableReact and ActionCableWhat’s Next11. Managing State in Stimulus CodeUsing Data Values for LogicObserving and Responding to DOM ChangesRendering CSS with Data AttributesWhat’s Next12. Managing State in ReactUsing ReducersUsing Context to Share StateAdding Asynchronous Events to ContextsWhat’s Next13. Using Redux to Manage StateInstalling and Using ReduxAdding Asynchronous Actions to ReduxWhat’s NextPart IV—Validating Your Code14. Validating Code with Advanced TypeScriptCreating Union TypesSpecifying Types with Literal TypesUsing Enums and Literal TypesBuilding Mapped Types and Utility TypesTypeScript Configuration OptionsDealing with StrictnessWhat’s Next15. Testing with CypressWhy Cypress?Installing CypressConfiguring Cypress and RailsWriting Our First TestUnderstanding How Cypress WorksWhat’s Next16. More Testing and TroubleshootingWriting More Cypress TestsTesting the Schedule FilterCypress and ReactCypress Utilities and APITroubleshootingWhat’s NextA1. Framework SwapThe All-Hotwire AppThe All-React AppComparisonIndex