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.

Intermediate

97 Lessons

12h

Certificate of Completion

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

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

36 Playgrounds

12 Quizzes

This course includes

36 Playgrounds

12 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

Course Content

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

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

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

Cascading Style Sheets

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.

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.

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

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

Souvik Kundu

Front-end Developer

Eric Downs

Musician/Entrepeneur

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

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!

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath