AI-powered learning
Save this course
Modern Front-end Development for Rails
Gain insights into building applications using Rails Webpacker, Webpack, and TypeScript. Explore Stimulus, React, state management, and communication with servers for richer interactions.
97 Lessons
12h
Updated today
Join 2.9 million developers at
Join 2.9 million developers at
LEARNING OBJECTIVES
- Implement Webpacker in Rails to compile and serve JavaScript, TypeScript, and CSS assets
- Build interactive Rails UI features using TypeScript classes, events, state, and Turbolinks
- Create Stimulus controllers using actions, targets, values, and class toggling for DOM interactivity
- Develop React components in Rails with JSX, props, hooks, and shared state across components
- Integrate client-server communication via Gon, Ajax fetch, and Action Cable for real-time updates
- Apply scalable state management with Stimulus stores/reducers, React context/reducers, and Redux Thunk
- Write and troubleshoot end-to-end tests with Cypress using actions, assertions, fixtures, and debugging tools
Learning Roadmap
1.
Getting Started
Getting Started
Get familiar with integrating Rails and front-end technologies to create interactive web apps.
2.
Client-side Rails
Client-side Rails
Unpack the core of integrating client-side features in Rails, managing state, and enhancing interactivity.
3.
Stimulus
Stimulus
9 Lessons
9 Lessons
Examine Stimulus, a flexible JavaScript framework, integration of controllers, actions, targets, and values.
4.
React
React
8 Lessons
8 Lessons
Grasp the fundamentals of React integration with Rails, including component creation, state management, and JSX usage.
5.
Cascading Style Sheets
Cascading Style Sheets
6 Lessons
6 Lessons
Dig into integrating CSS with Webpacker, animations, transitions, and React components.
6.
TypeScript
TypeScript
7 Lessons
7 Lessons
Simplify complex topics of TypeScript's type system enhancing JavaScript for robust development.
7.
Webpack
Webpack
4 Lessons
4 Lessons
Master the steps to integrate Webpack, Yarn, and Webpacker for streamlined Rails front-end development.
8.
Webpacker
Webpacker
4 Lessons
4 Lessons
Step through managing Webpacker for efficient development and customization in Rails environments.
9.
Talking to the Server
Talking to the Server
9 Lessons
9 Lessons
Grasp the fundamentals of client-server communication using Rails, Ajax, Stimulus, and Action Cable.
10.
Managing State in Stimulus Code
Managing State in Stimulus Code
6 Lessons
6 Lessons
Work your way through managing state in Stimulus code with a reducer pattern.
11.
Managing State in React
Managing State in React
6 Lessons
6 Lessons
Apply your skills to streamline state management in React using contexts, reducers, and contexts for asynchronous events.
12.
Using Redux to Manage State
Using Redux to Manage State
4 Lessons
4 Lessons
Take a closer look at leveraging Redux for managing state and integrating asynchronous actions in React.
13.
Validating Code with Advanced TypeScript
Validating Code with Advanced TypeScript
7 Lessons
7 Lessons
Simplify Advanced TypeScript for code validation, focusing on union types, literals, enums, and configuration.
14.
Testing with Cypress
Testing with Cypress
7 Lessons
7 Lessons
Master the steps to effectively test JavaScript applications using Cypress for reliable end-to-end testing.
15.
More Testing and Troubleshooting Basics
More Testing and Troubleshooting Basics
3 Lessons
3 Lessons
Learn how to use Cypress for effective testing and troubleshooting in Stimulus and React.
16.
Appendix
Appendix
8 Lessons
8 Lessons
Walk through setting up Rails with Webpacker, Stimulus, React, Redux, and Cypress.
Certificate of Completion
Showcase your accomplishment by sharing your certificate of completion.
Complete more lessons to unlock your certificate
Developed by MAANG Engineers
ABOUT THIS COURSE
In this course, you will learn to build a fully-functional application with Rails Webpacker, Webpack, and TypeScript.
To kick things off, you’ll walk through the basics of getting Rails set up to use Webpacker which will serve JavaScript and CSS to the browser. You’ll then get acquainted with Stimulus and React which will help with creating richer interactions.
In the latter half, you’ll work with TypeScript and set up communication between a server. Beyond that, you’ll work through managing state in your Stimulus code, as well as how to test and troubleshoot your application.
By the end of this course, you will be well equipped to create larger, more complex applications that make use of modern tools.
ABOUT THE AUTHOR
The Pragmatic Programmers
We create timely, practical books and learning resources on classic and cutting-edge topics to help you practice your craft and accelerate your career.
Trusted by 2.9 million developers working at companies
A
Anthony Walker
@_webarchitect_
E
Evan Dunbar
ML Engineer
S
Software Developer
Carlos Matias La Borde
S
Souvik Kundu
Front-end Developer
V
Vinay Krishnaiah
Software Developer
Built for 10x Developers
No Passive Learning
Learn by building with project-based lessons and in-browser code editor
Personalized Roadmaps
The platform adapts to your strengths & skills gaps as you go
Future-proof Your Career
Get hands-on with in-demand skills
AI Code Mentor
Write better code with AI feedback, smart debugging, and "Ask AI"
MAANG+ Interview Prep
AI Mock Interviews simulate every technical loop at top companies
Free Resources
