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.
In this course, you will learn to build a fully-functional application with Rails Webpacker, Webpack, and TypeScript.
To kick t...Show More
Content
1.
Getting Started
2 Lessons
Get familiar with integrating Rails and front-end technologies to create interactive web apps.
2.
Client-side Rails
7 Lessons
Unpack the core of integrating client-side features in Rails, managing state, and enhancing interactivity.
3.
Stimulus
9 Lessons
Examine Stimulus, a flexible JavaScript framework, integration of controllers, actions, targets, and values.
4.
React
8 Lessons
Grasp the fundamentals of React integration with Rails, including component creation, state management, and JSX usage.
5.
Cascading Style Sheets
6 Lessons
Dig into integrating CSS with Webpacker, animations, transitions, and React components.
6.
TypeScript
7 Lessons
Simplify complex topics of TypeScript's type system enhancing JavaScript for robust development.
7.
Webpack
4 Lessons
Master the steps to integrate Webpack, Yarn, and Webpacker for streamlined Rails front-end development.
8.
Webpacker
4 Lessons
Step through managing Webpacker for efficient development and customization in Rails environments.
9.
Talking to the Server
9 Lessons
Grasp the fundamentals of client-server communication using Rails, Ajax, Stimulus, and Action Cable.
10.
Managing State in Stimulus Code
6 Lessons
Work your way through managing state in Stimulus code with a reducer pattern.
11.
Managing State in React
6 Lessons
Apply your skills to streamline state management in React using contexts, reducers, and contexts for asynchronous events.
12.
Using Redux to Manage State
4 Lessons
Take a closer look at leveraging Redux for managing state and integrating asynchronous actions in React.
13.
Validating Code with Advanced TypeScript
7 Lessons
Simplify Advanced TypeScript for code validation, focusing on union types, literals, enums, and configuration.
14.
Testing with Cypress
7 Lessons
Master the steps to effectively test JavaScript applications using Cypress for reliable end-to-end testing.
15.
More Testing and Troubleshooting Basics
3 Lessons
Learn how to use Cypress for effective testing and troubleshooting in Stimulus and React.
16.
Appendix
8 Lessons
Walk through setting up Rails with Webpacker, Stimulus, React, Redux, and Cypress.
Certificate of Completion
Showcase your accomplishment by sharing your certificate of completion.
Course Author:
Developed by MAANG Engineers
Trusted by 2.8 million developers working at companies
"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"
Anthony Walker
@_webarchitect_
"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"
Evan Dunbar
ML Engineer
"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."
Software Developer
Carlos Matias La Borde
"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"
Souvik Kundu
Front-end Developer
"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."
Vinay Krishnaiah
Software Developer
Hands-on Learning Powered by AI
See how Educative uses AI to make your learning more immersive than ever before.
AI Prompt
Code Feedback
Explain with AI
AI Code Mentor
Free Resources
