Mini Map
Search
⌘ K
AI Features
Log In
Rails for Front-end Development: Essential Tools
1.
Getting Started
Introduction to the Course
Understanding the Application
Course Organization and Tools
2.
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
3.
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
4.
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
5.
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
Project
Premium
Book Review System Using ReactJS and Ruby on Rails
6.
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
7.
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
8.
Webpack
Introduction to webpack
Overview of Yarn
Understanding webpack Configuration
Quiz Yourself on webpack
9.
Webpacker
Introduction to Webpacker
Webpacker in Development
Webpacker in Production & Customizing Webpacker
Quiz Yourself on Webpacker
10.
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
11.
Immediate Communication with ActionCable
Introduction to ActionCable
Turbo Streams and ActionCable
Stimulus and ActionCable
React and ActionCable
Quiz Yourself on ActionCable
Project
Premium
Build a Chat Room Application Using ActionCable in Ruby on Rails
12.
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
13.
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
14.
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
15.
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
16.
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
17.
More Testing and Troubleshooting Basics
Introduction to Testing and Troubleshooting Basics
Cypress and React
Cypress Utilities, APIs, and Troubleshooting
Conclusion
18.
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
Home
Courses
Rails for Front-end Development: Essential Tools
Quiz Yourself on ActionCable
Let's take a quiz on what we have learned so far.
We'll cover the following...