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

railspostgresssl.tar.gz

introduction/01

introduction/02

introduction/03

introduction/04

introduction/05

introduction/06

stimulus/01

stimulus/02

stimulus/03

stimulus/04

stimulus/05

stimulus/06

react/01

react/02

react/03

react/04

css/01

css/02

css/03

server/01

server/02

server/03

server/04

server/05

server/06

state/01

state/02

state/03

state/04

state/05

state/06

adv_types/01

adv_types/02

adv_types/03

testing/01

testing/03

all_stimulus/01

all_react/01

introduction/01_testing

testJob

introduction/01-copy

introduction/02-copy

introduction/03-copy

introduction/04-copy

introduction/05-copy

introduction/06-copy

stimulus/01-copy

stimulus/02-copy

stimulus/03-copy

stimulus/04-copy

stimulus/05-copy

stimulus/06-copy

react/01-copy

react/02-copy

react/03-copy

react/04-copy

css/01-copy

css/02-copy

css/03-copy

server/01-copy

server/02-copy

server/03-copy

server/04-copy

server/05-copy

server/06-copy

state/01-copy

state/02-copy

state/03-copy

state/04-copy

state/05-copy

state/06-copy

adv_types/01-copy

adv_types/02-copy

adv_types/03-copy

all_stimulus/01-copy

introduction/01-copy-r0guf3

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.

Modern Front-end Development for Rails

JavaScript typically runs in a browser environment.

JavaScript interacts closely with the DOM.

Why is testing JavaScript difficult?

It's more robust than Capybara when waiting for actions to complete.

We write Cypress code in RSpec and can run it as part of a normal Rails testing process, which means that it integrates better with Rails.

Cypress allows you to interact with a simulated browser.

What is an advantage of Cypress over Capybara?

What is an advantage of Cypress over Capybara?

The Stimulus team is explicit that end-to-end server testing is the preferred way of testing Stimulus behavior.

Testing Stimulus controllers or React components in isolation from a server is complicated.

Why is end-to-end testing preferred in Stimulus?

Why is end-to-end testing preferred in Stimulus?

It recursively visits all the pages of the website starting from the root, `/`.

What does `cy.visit("/")` do in our application?

What does <code>cy.visit(&quot;/&quot;)</code> do in our application?

Regular variable assignment is going to cause you trouble.

Each successive `cy` command only executes after the previous one has completed.

Which of the following is true about Cypress?

Which of the following is true about Cypress?

Quiz yourself on testing JavaScript code with Cypress.

Getting Started

Client-side Rails

Stimulus

React

Cascading Style Sheets

TypeScript

Webpack

Webpacker

Talking to the Server

Managing State in Stimulus Code

Managing State in React

Using Redux to Manage State

Validating Code with Advanced TypeScript

Testing with Cypress

More Testing and Troubleshooting Basics

Appendix

Quiz Yourself on Testing with Cypress