0% completed

All LessonsFree Lessons (8)

Getting Started

Introduction to the Course Understanding the Application 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 Installation and Configuration of Webpacker Configuration and Code Files Using Webpacker Quiz Yourself on Client-side Rails

Turbolinks

Introduction to Hotwire and Turbo Adding Interactivity with Turbo Frames What is Happening by Adding Interactivity?Navigating Outside a Turbo Frame Extending Our Page with Turbo Streams Turbo Frames vs. Turbo Streams Lazy Loading in a Turbo Frame Quiz Yourself on Turbolinks

Stimulus

Introduction to Stimulus Installing Stimulus Adding Our First Controller Creating an Action Adding a Target Using Values Automate Value Changes Stimulus Has Class Going Generic Stimulus Quick Reference Quiz Yourself on Stimulus

React

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

Cascading Style Sheets

Introduction to CSS CSS and webpack Adding CSS and Assets to webpack Animating CSS CSS Transitions Animating Turbo Streams with Animate.css CSS and React Components Dynamic Styled 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

Overview of Yarn

Understanding webpack Configuration

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 Improving Search Functionalities Stimulus and Ajax Using Data in Stimulus Acquiring Data in React with useState Passing Data through our React Code Quiz Yourself on Talking to the Server

Immediate Communication with ActionCable

Introduction to ActionCable Turbo Streams and ActionCable Stimulus and ActionCable React and ActionCable Quiz Yourself on ActionCable

Managing State in Stimulus Code

Introduction to Managing State in Stimulus Code Implementing a Data Store Sorting Data and CSS Cascading Rendering CSS with Data Attributes Quiz Yourself on State in Stimulus

Managing State in React

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

Using Redux to Manage State

Introduction to Managing State Using Redux 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 Quiz Yourself on Using Advance TypeScript

Testing with Cypress

Introduction to Testing with Cypress Configuring Cypress and Rails 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 Conclusion

Appendix

Hotwire and React Comparison The All-Hotwire App Using Stimulus to Take Action Receiving Commands with ActionCable The All-React App Responding to Filters Animating Elements ActionCable and React Comparison between Hotwire and React Congratulations

Rails for Front-end Development: Essential Tools/

...

/

Introduction to Webpacker

Introduction to Webpacker

Get introduced to Webpacker in this lesson.

We'll cover the following...

Webpacker basics

As Rails 6 developers, our primary interaction with webpack is going to be through the Webpacker tool provided by Rails. In this chapter, we’ll take a look at using Webpacker in development and how to customize it when we want additional features.

The Webpacker gem is a default part of a new Rails 6 installation, which means Webpacker goes in the Gemfile and, by default, the webpack:install task is run when the app is created. We can skip ...