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

It is shorthand for Asynchronous JavaScript And XML.

With Ajax, web applications can send/receive data without the page reloading.

Which of the following is true about Ajax?

Which of the following is true about Ajax?

It's a communication protocol that allows data to be sent to and from the client without necessarily reloading the page.

It's a unidirectional communication protocol for sending data from the server to the client.

Which of the following is true about WebSockets?

Which of the following is true about WebSockets?

The Gon gem is a tool that allows your Rails server-side to set up arbitrary global data visible to your JavaScript client-side.

The Gon gem is a tool that allows your Rails client-side to set up arbitrary global data visible to your JavaScript server-side.

The Gon gem is a tool that allows you to use AJAX in a simple format.

Which of the following is true about the Gon gem?


Which of the following is true about the Gon gem?

It sets a `gon` global object to the `id`s of the sold-out concerts.

it prints a list of sold-out concerts to the global console.

It creates a list of all concerts and puts them in a globally accessible object at the server.

What does the following line of code do?

```javascript
gon.sold_out_concert_ids = @concerts.select(&:sold_out?).map(&:id)
```




What does the following line of code do?
<pre><code class="language-javascript">gon.sold_out_concert_ids = @concerts.select(&amp;:sold_out?).map(&amp;:id)
</code></pre>

Test yourself on how to talk to the server. 

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 Talking to the Server