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

## The problem with styled components
We don't need to do anything, in general, to test React, since the Cypress tests don't care about the underlying framework. We do, however, have a specific problem relating to the React tools in our code. That problem is named _styled components._

Styled components, which we added to our React code in the [Cascading Style Sheets](https://www.educative.io/courses/modern-front-end-rails/introduction-to-css) chapter, are lovely, but they also work by adding a dynamic, random class name to the component. Dynamic, random class names are not easy to find in a test and make assertions about. 


There doesn't seem to be a way to manage this on the styled-components side---you could imagine a test setting for styled components where the class names were discoverable, but it doesn't look like anybody has done that.

## Solution
The easiest way to get attributes that our tests can find is to add them ourselves, so we add a couple of new attributes to the `ButtonSquare` component inside the `Seat` component---if you are concerned about performance, you can make the use of these attributes conditional with not being in production, but I don't think it's going to be a noticeable issue in this case:



# The problem with styled components
We don't need to do anything, in general, to test React, since the Cypress tests don't care about the underlying framework. We do, however, have a specific problem relating to the React tools in our code. That problem is named _styled components._

Styled components, which we added to our React code in the [Cascading Style Sheets](https://www.educative.io/courses/modern-front-end-rails/introduction-to-css) chapter, are lovely, but they also work by adding a dynamic, random class name to the component. Dynamic, random class names are not easy to find in a test and make assertions about. 


There doesn't seem to be a way to manage this on the styled-components side---you could imagine a test setting for styled components where the class names were discoverable, but it doesn't look like anybody has done that.

# Solution
The easiest way to get attributes that our tests can find is to add them ourselves, so we add a couple of new attributes to the `ButtonSquare` component inside the `Seat` component---if you are concerned about performance, you can make the use of these attributes conditional with not being in production, but I don't think it's going to be a noticeable issue in this case:



Apply Cypress testing to the rest of our Stimulus and React pages in this lesson.

Cypress and React

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

Cypress and React

The problem with styled components