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

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

react/02-copy-copy

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

## Actions 

Once you've identified the DOM element or elements you want to interact with, you can then send actions to those elements. Our first test used `click` to interact with a DOM element on the page and send it an action. Cypress provides basically any action you'd want:

* Click actions: `click`, `dblclick`, `rightclick`
* Form actions: `check`, `clear`, `select`, `submit`, `type`, `uncheck`
* Focus actions: `blur`, `focus`
* Scroll actions: `scrollIntoView`, `scrollTo`
* Send a generic event: `trigger`

All of these are basically the names of their associated actions. The ones that might not be forthcoming are `type`, which places text into a text field, and `clear`, which clears a text field. You use all of them by chaining onto a set of commands that yields DOM elements.

> **Cypress Has No Hover** 
> The missing action here is `hover`. Cypress does not have a `hover` command. It so much doesn't have a hover command that if you try `cy.hover()`, you will get a runtime error and a link to a page explaining why Cypress doesn't have a hover command.<footnote><url>https://docs.cypress.io/api/commands/hover.html</url></footnote> There isn't a hover command because it's apparently difficult or impossible to implement one in a way that would activate the css `:hover` pseudo-selector. The recommended workaround is to trigger a `mouseover` event, as in `cy.get("#element").trigger("mouseover")`. There's are other possible workarounds in the Cypress docs.<footnote><url>https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__hover-hidden-elements</url></footnote>

# Actions 

Once you've identified the DOM element or elements you want to interact with, you can then send actions to those elements. Our first test used `click` to interact with a DOM element on the page and send it an action. Cypress provides basically any action you'd want:

* Click actions: `click`, `dblclick`, `rightclick`
* Form actions: `check`, `clear`, `select`, `submit`, `type`, `uncheck`
* Focus actions: `blur`, `focus`
* Scroll actions: `scrollIntoView`, `scrollTo`
* Send a generic event: `trigger`

All of these are basically the names of their associated actions. The ones that might not be forthcoming are `type`, which places text into a text field, and `clear`, which clears a text field. You use all of them by chaining onto a set of commands that yields DOM elements.

> **Cypress Has No Hover** 
> The missing action here is `hover`. Cypress does not have a `hover` command. It so much doesn't have a hover command that if you try `cy.hover()`, you will get a runtime error and a link to a page explaining why Cypress doesn't have a hover command.<footnote><url>https://docs.cypress.io/api/commands/hover.html</url></footnote> There isn't a hover command because it's apparently difficult or impossible to implement one in a way that would activate the css `:hover` pseudo-selector. The recommended workaround is to trigger a `mouseover` event, as in `cy.get("#element").trigger("mouseover")`. There's are other possible workarounds in the Cypress docs.<footnote><url>https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__hover-hidden-elements</url></footnote>

Understand more about how Cypress actions work in this lesson.

Actions in Cypress

Getting Started

Client-side Rails

Stimulus

React

Book Review System Using ReactJS and Ruby on Rails

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

Actions in Cypress

Actions