HomeCoursesRails for Front-end Development: Essential Tools

AI-powered learning

Save

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.

120 Lessons

2 Projects

25h

Join 2.9 million developers at

LEARNING OBJECTIVES

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

Learning Roadmap

120 Lessons15 Quizzes

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

8 Lessons

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

Stimulus

11 Lessons

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

React

9 Lessons

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

Book Review System Using ReactJS and Ruby on Rails

Project

Premium

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

Premium

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.

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

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.

Learn more about The

Trusted by 2.9 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