Log In
Join
 for free
Log In
Join
 for free
Back To Course Home
Rails for Front-end Development: Essential Tools
0% completed
Getting Started
Introduction to the Course
Understanding the Application
Course Organization and Tools
Client-side Rails
Introduction to Using Rails on the Client-side
Managing State and Front-end Development
Designing Around Client Logic & Patterns of Web Applications
Installation and Configuration of Webpacker
Configuration and Code Files
Using Webpacker
Quiz Yourself on Client-side Rails
Turbolinks
Introduction to Hotwire and Turbo
Adding Interactivity with Turbo Frames
What is Happening by Adding Interactivity?
Navigating Outside a Turbo Frame
Extending Our Page with Turbo Streams
Turbo Frames vs. Turbo Streams
Lazy Loading in a Turbo Frame
Quiz Yourself on Turbolinks
Stimulus
Introduction to Stimulus
Installing Stimulus
Adding Our First Controller
Creating an Action
Adding a Target
Using Values
Automate Value Changes
Stimulus Has Class
Going Generic
Stimulus Quick Reference
Quiz Yourself on Stimulus
React
Introduction to Using React with Rails
Installing React
Adding Our First Component
Composing Components
Connecting to the Page
Interactivity, State, and Hooks
Sharing State - Venue Component
Sharing State - Row & Seat Components
Quiz Yourself on Using React With Rails
Cascading Style Sheets
Introduction to CSS
CSS and webpack
Adding CSS and Assets to webpack
Animating CSS
CSS Transitions
Animating Turbo Streams with Animate.css
CSS and React Components
Dynamic Styled Components
Quiz Yourself on CSS
TypeScript
Introduction to TypesScript
Static versus Dynamic Typing
Variables and Type Annotations
Functions and Type Annotations
Classes and Type Annotations
Type Checking Classes and Interfaces
Quiz Yourself on TypeScript
Webpack
Introduction to webpack
Overview of Yarn
Understanding webpack Configuration
Quiz Yourself on webpack
Webpacker
Introduction to Webpacker
Webpacker in Development
Webpacker in Production & Customizing Webpacker
Quiz Yourself on Webpacker
Talking to the Server
Introduction to Talking to the Server
Improving Search Functionalities
Stimulus and Ajax
Using Data in Stimulus
Acquiring Data in React with useState
Passing Data through our React Code
Quiz Yourself on Talking to the Server
Immediate Communication with ActionCable
Introduction to ActionCable
Turbo Streams and ActionCable
Stimulus and ActionCable
React and ActionCable
Quiz Yourself on ActionCable
Managing State in Stimulus Code
Introduction to Managing State in Stimulus Code
Implementing a Data Store
Sorting Data and CSS Cascading
Rendering CSS with Data Attributes
Quiz Yourself on State in Stimulus
Managing State in React
Introduction to Managing State in React
Creating context in React
Using the Context
Using Props With Context
Context Reducer
Adding Asynchronous Events to Contexts
Quiz Yourself on Managing State in React
Using Redux to Manage State
Introduction to Managing State Using Redux
Using a Redux Store
Adding Asynchronous Actions to Redux
Quiz Yourself on Using Redux to Manage State
Validating Code with Advanced TypeScript
Introduction to Validating Code with Advanced TypeScript
Union Types and Type Guards
Specifying Types with Literal Types
Using Enums and Literal Types
Building Mapped Types and Utility Types
TypeScript Configuration Options
Dealing with Strictness
Quiz Yourself on Using Advance TypeScript
Testing with Cypress
Introduction to Testing with Cypress
Configuring Cypress and Rails
Writing Our First Test
Understanding How Cypress Works
Actions in Cypress
Assertions
TroubleShooting
Quiz Yourself on Testing with Cypress
More Testing and Troubleshooting Basics
Introduction to Testing and Troubleshooting Basics
Cypress and React
Cypress Utilities, APIs, and Troubleshooting
Conclusion
Appendix
Hotwire and React Comparison
The All-Hotwire App
Using Stimulus to Take Action
Receiving Commands with ActionCable
The All-React App
Responding to Filters
Animating Elements
ActionCable and React
Comparison between Hotwire and React
Congratulations
Quiz Yourself on Turbolinks
Let's take a quiz on what we have learned so far.
Get hands-on with 1200+ tech skills courses.
Start Free Trial