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


We're going to use React to build up the individual pages for each concert. These pages will contain a seating diagram and will allow you to put together a ticket order. 


Now, normally, we wouldn't use Stimulus and React in the same app---we'd pick one or the other and stick with that choice---but it's far from the most ridiculous thing we've ever done in an app, and we decided that keeping them together would be less confusing than trying to keep track of separate Stimulus and React apps.

We can install React via Webpacker:

~~~bash
bundle exec rails webpacker:install:react
~~~

This adds or modifies a couple of files in our build. Most importantly, it adds several packages to the `package.json` file. In addition to the `react` package, we get `react-dom`, which contains React's DOM-specific features. We also get `prop-types`, which is a type checking tool that we won't be using because we'll be using TypeScript and a couple of add-ons for Babel that will help our Webpacker setup compile the React JSX files.

To get TypeScript working, we need to make a few more changes. First, we need to install the TypeScript type definitions for React and React-DOM:


~~~bash
$ yarn add @types/react @types/react-dom
~~~

We need to change the `tsconfig.json` file to include the line:

`"jsx": "react"`.

It makes that file look like this:


Installing 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

Installing React