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

## Current errors
Compiling the file, I get a few errors:

* The `venue-display` file that is kicking off the call to React is not handling a potential undefined value.
* Turbolinks can only be default-imported using the `allowSyntheticDefaultImports`.
* The `dispatch` call to redux-thunk includes a type error that I don't understand yet.

This is fewer than I was expecting, honestly. You can get more errors with other strict options, but they don't seem tremendously useful to me to talk about.

## Fixes
I'm going to fix the Turbolinks issue by adding the line `"allowSyntheticDefaultImports": true,` to the `tsconfig.json` file. This allows us to import modules that don't have a default export, and doesn't seem to have a whole lot of impact on us one way or another. Honestly, getting rid of Turbolinks would probably be fine as well.

Our `venue_display` file has basically the same issue four times over: we have code like `element.dataset["rows"]`, which is now technically of type `string | undefined`, meaning the union type of a string or undefined, and we are passing it through to arguments that expect strings.


What we need to do is allow for the possibility that the values are `undefined` by creating default values. This is a little slapdash, but it works fine for our purposes:



# Current errors
Compiling the file, I get a few errors:

* The `venue-display` file that is kicking off the call to React is not handling a potential undefined value.
* Turbolinks can only be default-imported using the `allowSyntheticDefaultImports`.
* The `dispatch` call to redux-thunk includes a type error that I don't understand yet.

This is fewer than I was expecting, honestly. You can get more errors with other strict options, but they don't seem tremendously useful to me to talk about.

# Fixes
I'm going to fix the Turbolinks issue by adding the line `"allowSyntheticDefaultImports": true,` to the `tsconfig.json` file. This allows us to import modules that don't have a default export, and doesn't seem to have a whole lot of impact on us one way or another. Honestly, getting rid of Turbolinks would probably be fine as well.

Our `venue_display` file has basically the same issue four times over: we have code like `element.dataset["rows"]`, which is now technically of type `string | undefined`, meaning the union type of a string or undefined, and we are passing it through to arguments that expect strings.


What we need to do is allow for the possibility that the values are `undefined` by creating default values. This is a little slapdash, but it works fine for our purposes:



Dealing with Strictness

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

Dealing with Strictness

Current errors

Fixes