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

Find a relevant DOM element to add this to.

`<section class="flower" id="red" data-controller="flower">`

`<section class="flower" id="red" data-controller="fancy-color">`

Suppose you wish to add a Stimulus controller called `fancy-color` to the following DOM element:

`<section class="flower" id="red">`

How would you go about this?

<p>Suppose you wish to add a Stimulus controller called <code>fancy-color</code> to the following DOM element:</p>
<p><code>&lt;section class=&quot;flower&quot; id=&quot;red&quot;&gt;</code></p>
<p>How would you go about this?</p>


A full-stack solution for web development

Stimulus believes in keeping all the application more on the client-side, whereas React prefers it to be on the server.

Stimulus believes in keeping all the application more on the server-side, whereas React prefers it to be on the client.

Stimulus tries to keep data within the application, whereas React prefers to keep it outside.

<p>How is Stimulus different from React?</p>


`<div class="perfume" data-controller="price"> </div>`

`<div class="perfume" data-controller="item"> </div>`

`<div class="perfume" data-controller="brand"> </div>`

`<div class="perfume" data-controller="PriceController ItemController BrandController"> </div>`

`<div class="perfume" data-controller="price brand item"> </div>`



Suppose you wish to connect three different controllers called `PriceController`, `BrandController`, `ItemController` to the following DOM element: `<div class="perfume"> </div>`

How would you do this?

<p>Suppose you wish to connect three different controllers called <code>PriceController</code>, <code>BrandController</code>, <code>ItemController</code> to the following DOM element: <code>&lt;div class=&quot;perfume&quot;&gt; &lt;/div&gt;</code></p>
<p>How would you do this?</p>


```HTML
<div class="button is-primary js--cart-button"
   data-action="click->check-out#addToCart">
  <span class="js--button-text">Add To Cart</span>
</div>
```

```HTML
<div class="button is-primary js--cart-button"
   data-action="click->checkout#add-to-cart">
  <span class="js--button-text">Add To Cart</span>
</div>
```


```HTML
<div class="button is-primary js--cart-button"
   data-action="click->checkOutController#add-to-cart">
  <span class="js--button-text">Add To Cart</span>
</div>
```


Which of the following is the correct way to create an action upon click for an `addToCart()` method from a `CheckOutController` in an "add to cart" button like the following in Stimulus?

```HTML
<div class="button is-primary js--cart-button">
  <span class="js--button-text">Add To Cart</span>
</div>
```



<p>Which of the following is the correct way to create an action upon click for an <code>addToCart()</code> method from a <code>CheckOutController</code> in an “add to cart” button like the following in Stimulus?</p>
<pre><code class="language-HTML">&lt;div class=&quot;button is-primary js--cart-button&quot;&gt;
  &lt;span class=&quot;js--button-text&quot;&gt;Add To Cart&lt;/span&gt;
&lt;/div&gt;
</code></pre>


Will the following action happen when the button is clicked?

```HTML
<div class="button is-primary js--cart-button"
   data-action="check-out#addToCart">
  <span class="js--button-text">Add To Cart</span>
</div>
```

<p>Will the following action happen when the button is clicked?</p>
<pre><code class="language-HTML">&lt;div class=&quot;button is-primary js--cart-button&quot;
   data-action=&quot;check-out#addToCart&quot;&gt;
  &lt;span class=&quot;js--button-text&quot;&gt;Add To Cart&lt;/span&gt;
&lt;/div&gt;
</code></pre>


Multiple actions can be triggered in response to the same event in Stimulus.

<p>Multiple actions can be triggered in response to the same event in Stimulus.</p>


```html
<button class="js--day-text" data-day-toggle-target="thingToDisplay">
```

```typescript
import { Controller } from "stimulus"

export default class DayToggleController extends Controller {
  static targets = ["thingToDisplay"]

  thingToHideTarget: HTMLElement

  toggle() {
    this.thingToDisplay.classList.toggle("is-displayed")
  }
}
```

```html
<button class="js--day-text" data-day-toggle-target="thingToDisplay">
```

```typescript
import { Controller } from "stimulus"

export default class DayToggleController extends Controller {

  thingToHideTarget: HTMLElement

  toggle() {
    this.thingToDisplay.classList.toggle("is-displayed")
  }
}
```

```html
<button class="js--day-text" data-day-toggle-target>
```


How will you mark the following button as a target of the `ToggleController`?

```html
<button class="js--day-text">
```

```typescript
import { Controller } from "stimulus"

export default class DayToggleController extends Controller {
  toggle() {
console.log("click!");
  }
}
```

<p>How will you mark the following button as a target of the <code>ToggleController</code>?</p>
<pre><code class="language-html">&lt;button class=&quot;js--day-text&quot;&gt;
</code></pre>
<pre><code class="language-typescript">import { Controller } from &quot;stimulus&quot;

export default class DayToggleController extends Controller {
  toggle() {
console.log(&quot;click!&quot;);
  }
}
</code></pre>


Test yourself on Stimulus in this lesson.

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 Stimulus