0% completed

All LessonsFree Lessons (5)

Getting Started

Introduction to the Course Course Organization and Tools

Client-side Rails

Introduction to Using Rails on the Client-side Managing State and Front-end Development Designing Around Client Logic & Patterns of Web Applications Using Webpacker Adding Real Features Going Generic Quiz Yourself on Client-side Rails

Stimulus

Introduction to Stimulus Adding Our First Controller Creating an Action Adding a Target Stimulus Has Class Using Values A Little More Stimulus Using Stimulus with Haml or Slim Quiz Yourself on Stimulus

React

Introduction to Using React with Rails Adding Our First Component Composing Components Tying Into the Page Interactivity, State, and Hooks Sharing State - Venue Component Sharing State - Row & Seat Components Quiz Yourself on Using React With Rails

Project

Book Review System Using ReactJS and Ruby on Rails

Cascading Style Sheets

Introduction to CSS CSS and webpack Animating CSS CSS Transitions CSS and React Components Quiz Yourself on CSS

TypeScript

Introduction to TypesScript Static versus Dynamic Typing Variables and Type Annotations Functions and Type Annotations Classes and Type Annotations Type Checking Classes and Interfaces Quiz Yourself on TypeScript

Webpack

Introduction to webpack Yarn Webpack Quiz Yourself on webpack

Webpacker

Introduction to Webpacker Webpacker in Development Webpacker in Production & Customizing Webpacker Quiz Yourself on Webpacker

Talking to the Server

Introduction to Talking to the Server

Using Gon in Stimulus

Stimulus and Ajax

Using Data in Stimulus

Acquiring Data in React with useState

Passing Data through our React Code

Immediate Communication with Action Cable

React and Action Cable

Quiz Yourself on Talking to the Server

Managing State in Stimulus Code

Introduction to Managing State in Stimulus Code Implementing a Data Store Using the Data Store Refactoring to the Reducer Pattern Maintaining a Store Quiz Yourself on State in Stimulus

Managing State in React

Introduction to Managing State in React Placing the Context Using the Context Using Props With Context Adding Asynchronous Events to Contexts Quiz Yourself on Managing State in React

Using Redux to Manage State

Introduction to Using Redux to Manage State Using a Redux Store Adding Asynchronous Actions to Redux Quiz Yourself on Using Redux to Manage State

Validating Code with Advanced TypeScript

Introduction to Validating Code with Advanced TypeScript Union Types and Type Guards Specifying Types with Literal Types Using Enums and Literal Types Building Mapped Types and Utility Types TypeScript Configuration Options Dealing with Strictness

Testing with Cypress

Introduction to Testing with Cypress Writing Our First Test Understanding How Cypress Works Actions in Cypress Assertions Troubleshooting Quiz Yourself on Testing with Cypress

More Testing and Troubleshooting Basics

Introduction to Testing and Troubleshooting Basics Cypress and React Cypress Utilities, APIs, and Troubleshooting

Appendix

Installation Installing Webpacker Installing Stimulus Installing React Installing Cypress Configuring Cypress and Rails The All-Stimulus App The All-React App

Modern Front-end Development for Rails/

...

/

Stimulus and Ajax

Stimulus and Ajax

Learn to use Stilumus and Ajax in this lesson.

We'll cover the following...

- Making Ajax calls

Usually, when we talk about communication between the client and server, we are referring to the client calling the server to receive data. Let’s look at how we would make those calls in our Stimulus code.

Making Ajax calls

The simplest mechanism for making Ajax calls in modern JavaScript is with the fetch function and the async/await syntax for handling asynchronous behavior.

The Rails UJS library provides an ajax method, but the ...