HomeCoursesModern Front-end Development for Rails

Updated 27 Aug

AI-powered learning

Save

Modern Front-end Development for Rails

Name: Modern Front-end Development for Rails
Price: 59 USD
Author: The Pragmatic Programmers

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

1 project

12h

Created by The Pragmatic Programmers

What's included

97 lessons across 16 modules
12 quizzes with instant feedback
1 project in preconfigured environments
AI Tutor on every lesson

Join 3.1 million developers at

What You'll Learn

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

97 Lessons12 Quizzes

Getting Started

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

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.

React

8 Lessons

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

Book Review System Using ReactJS and Ruby on Rails

Project

Premium

Cascading Style Sheets

6 Lessons

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

TypeScript

7 Lessons

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

Webpack

4 Lessons

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

Webpacker

4 Lessons

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

Talking to the Server

9 Lessons

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

10.

Managing State in Stimulus Code

6 Lessons

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

11.

Managing State in React

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

4 Lessons

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

13.

Validating Code with Advanced TypeScript

7 Lessons

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

14.

Testing with Cypress

7 Lessons

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

15.

More Testing and Troubleshooting Basics

3 Lessons

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

16.

Appendix

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.

About this course

WHY I WROTE 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.

Learn more about The

Trusted by 3.1 million developers working at companies

These are high-quality courses. Trust me the price is worth it for the content quality. Educative 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.

Software Developer

Carlos Matias La Borde

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

Course

CSS for Front-end Interviews

The ultimate CSS interview guide by FAANG engineers, with 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

The ultimate CSS interview guide by FAANG engineers, with real-world questions and a structured approach to styling and advanced concepts.

7 h

intermediate

Course

CSS for Front-end Interviews

intermediate

7 hour

Course