HomeCoursesModern Front-end Development for Rails

Intermediate

12h

Updated 3 weeks ago

Modern Front-end Development for Rails
Save

Gain insights into building applications using Rails Webpacker, Webpack, and TypeScript. Explore Stimulus, React, state management, and communication with servers for richer interactions.

Join 2.7 million developers at

Overview

Content

Reviews

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.

In this course, you will learn to build a fully-functional application with Rails Webpacker, Webpack, and TypeScript. To kick t...Show More

Content

97 Lessons12 Quizzes

Getting Started

2 Lessons

Get familiar with integrating Rails and front-end technologies to create interactive web apps.

Introduction to the Course

Course Organization and Tools

Client-side Rails

7 Lessons

Unpack the core of integrating client-side features in Rails, managing state, and enhancing interactivity.

Introduction to Using Rails on the Client-side

Managing State and Front-end Development

Designing Around Client Logic & Patterns of Web Applications

Using Webpacker

Adding Real Features

Going Generic

Quiz Yourself on Client-side Rails

Stimulus

9 Lessons

Examine Stimulus, a flexible JavaScript framework, integration of controllers, actions, targets, and values.

Introduction to Stimulus

Adding Our First Controller

A Little More Stimulus

Using Stimulus with Haml or Slim

Quiz Yourself on Stimulus

React

8 Lessons

Grasp the fundamentals of React integration with Rails, including component creation, state management, and JSX usage.

Introduction to Using React with Rails

Adding Our First Component

Composing Components

Tying Into 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

6 Lessons

Dig into integrating CSS with Webpacker, animations, transitions, and React components.

CSS and React Components

Quiz Yourself on CSS

TypeScript

7 Lessons

Simplify complex topics of TypeScript's type system enhancing JavaScript for robust development.

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

4 Lessons

Master the steps to integrate Webpack, Yarn, and Webpacker for streamlined Rails front-end development.

Introduction to webpack

Yarn

Webpack

Quiz Yourself on webpack

Webpacker

4 Lessons

Step through managing Webpacker for efficient development and customization in Rails environments.

Introduction to Webpacker

Webpacker in Development

Webpacker in Production & Customizing Webpacker

Quiz Yourself on Webpacker

Talking to the Server

9 Lessons

Grasp the fundamentals of client-server communication using Rails, Ajax, Stimulus, and Action Cable.

Introduction to Talking to the Server

Using Gon in Stimulus

Stimulus and Ajax

Using Data in Stimulus

Acquiring Data in React with useState

Passing Data through our React Code

Immediate Communication with Action Cable

React and Action Cable

Quiz Yourself on Talking to the Server

10.

Managing State in Stimulus Code

6 Lessons

Work your way through managing state in Stimulus code with a reducer pattern.

Introduction to Managing State in Stimulus Code

Implementing a Data Store

Using the Data Store

Refactoring to the Reducer Pattern

Maintaining a Store

Quiz Yourself on State in Stimulus

11.

Managing State in React

6 Lessons

Apply your skills to streamline state management in React using contexts, reducers, and contexts for asynchronous events.

Introduction to Managing State in React

Placing the Context

Using the Context

Using Props With Context

Adding Asynchronous Events to Contexts

Quiz Yourself on Managing State in React

12.

Using Redux to Manage State

4 Lessons

Take a closer look at leveraging Redux for managing state and integrating asynchronous actions in React.

Introduction to Using Redux to Manage State

Using a Redux Store

Adding Asynchronous Actions to Redux

Quiz Yourself on Using Redux to Manage State

13.

Validating Code with Advanced TypeScript

7 Lessons

Simplify Advanced TypeScript for code validation, focusing on union types, literals, enums, and configuration.

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

14.

Testing with Cypress

7 Lessons

Master the steps to effectively test JavaScript applications using Cypress for reliable end-to-end testing.

Introduction to Testing with Cypress

Writing Our First Test

Understanding How Cypress Works

Actions in Cypress

Assertions

Troubleshooting

Quiz Yourself on Testing with Cypress

15.

More Testing and Troubleshooting Basics

3 Lessons

Learn how to use Cypress for effective testing and troubleshooting in Stimulus and React.

Introduction to Testing and Troubleshooting Basics

Cypress and React

Cypress Utilities, APIs, and Troubleshooting

16.

Appendix

8 Lessons

Walk through setting up Rails with Webpacker, Stimulus, React, Redux, and Cypress.

Configuring Cypress and Rails

The All-Stimulus App

The All-React App

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:

The Pragmatic Programmers

Developed by MAANG Engineers

Every Educative resource is designed by our in-house team of ex-MAANG software engineers and PhD computer science educators — subject matter experts who’ve shipped production code at scale and taught the theory behind it. The goal is to get you hands-on with the skills you need to stay ahead in today's constantly evolving tech landscape. No videos, no fluff — just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

Trusted by 2.7 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Carlos Matias La Borde

Software Developer

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

"I've tried probably 5-7 different sites and Educative is easily the best. It perfectly blends explanation with interactivity"

Eric Downs

Musician/Entrepeneur

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 Mock Interviews

Test your skills in a simulated interview setting. Receive personalized feedback based on your performance. Available for Coding Interviews, System Design, and more.

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!

Course

CSS for Front-end Interviews

The ultimate guide to CSS interviews, developed by FAANG engineers. Prep faster and get interview-ready in hours with battle-tested, real-world questions and a structured approach to styling and advanced concepts.

7 h

intermediate

Course

HTML for Front-end Interviews

The ultimate guide to HTML front-end interviews. Developed by FAANG engineers, practice with real-world interview questions and coding challenges. Get interview-ready in just a few hours.

10 h

intermediate

Course

Docker for Rails Developers

Gain insights into Docker architecture, images, and containers. Learn Docker Compose, JS integration, and production readiness. Master deploying, clustering, and scaling Rails apps using Docker tools.

10 h

beginner

Course

HTML for Front-end Interviews

The ultimate guide to HTML front-end interviews. Developed by FAANG engineers, practice with real-world interview questions and coding challenges. Get interview-ready in just a few hours.

10 h

intermediate

Course

Hands-on Vue.js: Build a fully functional SPA

Gain insights into developing intermediate-level SPAs with Vue.js. Learn about directives, renderers, user input handlers and components. Delve into creating a functional SPA with backend interaction.

8 h 30 m

beginner

Course

CSS for Front-end Interviews

7 h

intermediate

Course

CSS for Front-end Interviews

intermediate

7 hour

Course

HTML for Front-end Interviews