Rails for Front-end Development: Essential Tools

Gain insights into using Rails Webpacker, Webpack, and TypeScript to build applications. Learn about Stimulus and React for rich interactions, state management, testing, and troubleshooting.

Intermediate

120 Lessons

25h

Certificate of Completion

Gain insights into using Rails Webpacker, Webpack, and TypeScript to build applications. Learn about Stimulus and React for rich interactions, state management, testing, and troubleshooting.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

68 Playgrounds

15 Quizzes

This course includes

68 Playgrounds

15 Quizzes

Course Overview

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...Show More

TAKEAWAY SKILLS

React Frontend In Rails

Ruby Gem's Management

Webpacker

What You'll Learn

Build a fully-functional application with Rails, Webpacker, Webpack, TypeScript and dynamic CSS

Learn how Turbolinks makes navigating your web application faster

Learn how Stimulus framework enhance static or server-rendered HTML as compared to other front-end frameworks

Understand how React and ActionCable allow you to change data without reloading the page

Learn how to manage state in Stimulus, React and Redux

Learn code validation and testing using Cypress

What You'll Learn

Build a fully-functional application with Rails, Webpacker, Webpack, TypeScript and dynamic CSS

Course Content

Getting Started

Get familiar with enhancing Rails apps with Hotwire, Turbo, Webpacker, and React.

Introduction to the Course

Understanding the Application Course Organization and Tools

Client-side Rails

Get started with Rails client-side tools, state management, client logic, and Webpacker configuration.

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

Master the steps to leverage Turbo for enhancing Rails app interactivity and performance.

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

Grasp the fundamentals of Stimulus for enhancing HTML interactivity with minimal JavaScript.

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

Deepen your knowledge of integrating React components with Rails, emphasizing state management and interactivity.

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

Book Review System Using ReactJS and Ruby on Rails

Project

Cascading Style Sheets

9 Lessons

Follow the process of integrating and managing CSS in modern Rails front-end development.

TypeScript

7 Lessons

Build on TypeScript's type annotations for enhanced code safety and error reduction.

Webpack

4 Lessons

Step through using Webpack, Yarn, and Webpacker to optimize Rails front-end development.

Webpacker

4 Lessons

Walk through using Webpacker for efficient asset management in Rails development and production.

10.

Talking to the Server

7 Lessons

Master the steps to effective client-server communication using Turbo Frames, Stimulus, and React.

11.

Immediate Communication with ActionCable

5 Lessons

Break down complex ideas related to integrating ActionCable with Turbo, Stimulus, and React for real-time updates.

Build a Chat Room Application Using ActionCable in Ruby on Rails

Project

12.

Managing State in Stimulus Code

5 Lessons

Take a closer look at managing state within Stimulus code using the DOM and data attributes.

13.

Managing State in React

7 Lessons

See how it works to manage global state in React using context, reducers, and hooks.

14.

Using Redux to Manage State

4 Lessons

Approach managing state in React with Redux for better asynchrony and clarity.

15.

Validating Code with Advanced TypeScript

8 Lessons

Step through TypeScript's advanced typing for robust code validation and error reduction.

16.

Testing with Cypress

8 Lessons

Get started with Cypress for end-to-end testing and integration in Rails applications.

17.

More Testing and Troubleshooting Basics

4 Lessons

Examine advanced testing and troubleshooting methodologies using Cypress for Hotwire and React applications.

18.

Appendix

10 Lessons

Grasp the fundamentals of comparing Hotwire and React, and learn app implementation using Rails, Stimulus, and ActionCable.

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!