Share Description
In this course, you will learn :
- How to create a fully functional application using Rails Webpacker, Webpack, and TypeScript.
- You'll go over the fundamentals of configuring Rails to use Webpacker, which will serve JavaScript and CSS to the browser.
- Learn about Stimulus and React, which will help you create richer interactions.
- You'll work with TypeScript to configure server communication.
- Learn how to manage state in your Stimulus code, as well as how to test and troubleshoot your application.
Syllabus :
1. 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
2. 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
3. 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
4. Cascading Style Sheets
- Introduction to CSS
- CSS and webpack
- Animating CSS
- CSS Transitions
- CSS and React Components
5. 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
6. Webpack
- Yarn
- Webpack
7. Webpacker
- Webpacker in Development
- Webpacker in Production & Customizing Webpacker
8. 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
9. Managing State in Stimulus Code
- Implementing a Data Store
- Using the Data Store
- Refactoring to the Reducer Pattern
- Maintaining a Store
10. Managing State in React
- Placing the Context
- Using the Context
- Using Props With Context
- Adding Asynchronous Events to Contexts
11. Using Redux to Manage State
- Using a Redux Store
- Adding Asynchronous Actions to Redux
12. 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
13. Testing with Cypress
- Writing Our First Test
- Understanding How Cypress Works
- Actions in Cypress
- Assertions
- Troubleshooting
14. More Testing and Troubleshooting Basics
- Cypress and React
- Cypress Utilities, APIs, and Troubleshooting
