Modern Front-end Development for Rails

INTERACTIVE COURSE

Modern Front-end Development for Rails

Intermediate

97 Lessons

12h

Certificate of Completion

AI Explanations

AI Explanations

Modern Front-end Development for Rails

36 Playgrounds

12 Quizzes

38 Illustrations

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

1

Getting Started

Introduction to the Course Course Organization and Tools

2

Client-side Rails

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

3

Stimulus

Introduction to Stimulus

Adding Our First Controller Creating an Action Adding a Target Stimulus Has Class Using Values A Little More Stimulus Using Stimulus with Haml or Slim Quiz Yourself on Stimulus

4

React

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

5

Cascading Style Sheets

Introduction to CSS CSS and webpack Animating CSS CSS Transitions CSS and React Components Quiz Yourself on CSS

6

TypeScript

7 Lessons

7

Webpack

4 Lessons

8

Webpacker

4 Lessons

9

Talking to the Server

9 Lessons

10

Managing State in Stimulus Code

6 Lessons

11

Managing State in React

6 Lessons

12

Using Redux to Manage State

4 Lessons

13

Validating Code with Advanced TypeScript

7 Lessons

14

Testing with Cypress

7 Lessons

15

More Testing and Troubleshooting Basics

3 Lessons

16

Appendix

8 Lessons

COURSE AUTHOR

How You'll Learn

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Videos are holding you back. Educative‘s interactive, text-based lessons accelerate learning — no setup, downloads, or alt-tabbing required.

Learn faster and smarter with adaptive AI tools embedded in every Educative course.

Built-in assessments let you test your skills. Completion certificates let you show them off.

Recommended Courses

BEFORE STARTING THIS COURSE

AFTER FINISHING THIS COURSE

FOR TEAMS

Interested in this course for your business or team?

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