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

Stimulus and React don't use and manage state at all.

Which of the following is true about how React and Stimulus manage state?

Which of the following is true about how React and Stimulus manage state?

Why is redrawing a page where only a few parts of the UI change not the best choice?

Why is redrawing a page where only a few parts of the UI change not the best choice?

The client-side app can become very complex because it has to track state.

The server never remembers anything about the user.

What is a limitation of the server-side model of the web?

What is a limitation of the server-side model of the web?

On Instagram, what would posting a new picture be in the CRUD model?

On Instagram, what would posting a new picture be in the CRUD model?

Suppose an app is based entirely on JavaScript and the server only provides generic data in the form of JSON. What kind of app is this?

Suppose an app is based entirely on JavaScript and the server only provides generic data in the form of JSON. What kind of app is this?

Webpack uses it to keep track of the different packs.

It's a source map that allows the browser debugger to show a TypeScript file that's been converted to JavaScript.

What's the purpose of the `manifest.json` file?

What’s the purpose of the <code>manifest.json</code> file?

Ruby on Rails is _traditionally_ a _______ framework.

Ruby on Rails is traditionally a _______ framework.

There are two random slashes near the end of the class.

Why won't the following Typescript class embedded in some working skeleton code compile?

```typescript
class DayToggle {
  day: HTMLElement
  dayText: HTMLElement
  buttonText: HTMLElement

  constructor(day: HTMLElement) {
    this.day = day
    this.dayButton = this.day.querySelector(".js--day-button")
    this.dayText = this.day.querySelector(".js--day-text")
    this.buttonText = this.day.querySelector(".js--button-text")
  }

  initHandlers(): void {
    this.onFilterButtonClick()
  }

  isHidden(): boolean {
    return this.dayText.classList.contains("is-hidden")
  }

  onFilterButtonClick(): void {
    this.dayButton.addEventListener("click", () => {
      this.dayText.classList.toggle("is-hidden")
      this.setText()
    })
  }

  setText(): void {
    this.buttonText.innerText = this.isHidden() ? "Show" : "Hide"
  }
  // 
}
```

Why won’t the following Typescript class embedded in some working skeleton code compile?
<pre><code class="language-typescript">class DayToggle {
 day: HTMLElement
 dayText: HTMLElement
 buttonText: HTMLElement

 constructor(day: HTMLElement) {
 this.day = day
 this.dayButton = this.day.querySelector(&quot;.js--day-button&quot;)
 this.dayText = this.day.querySelector(&quot;.js--day-text&quot;)
 this.buttonText = this.day.querySelector(&quot;.js--button-text&quot;)
 }

 initHandlers(): void {
 this.onFilterButtonClick()
 }

 isHidden(): boolean {
 return this.dayText.classList.contains(&quot;is-hidden&quot;)
 }

 onFilterButtonClick(): void {
 this.dayButton.addEventListener(&quot;click&quot;, () =&gt; {
 this.dayText.classList.toggle(&quot;is-hidden&quot;)
 this.setText()
 })
 }

 setText(): void {
 this.buttonText.innerText = this.isHidden() ? &quot;Show&quot; : &quot;Hide&quot;
 }
 // 
}
</code></pre>

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 Client-side Rails