HomeCoursesRails for Front-end Development: Essential Tools
5.0

Intermediate

25h

Updated 2 months ago

Rails for Front-end Development: Essential Tools

Gain insights into using Rails Webpacker, Webpack, and TypeScript to build applications. Learn about Stimulus and React for rich interactions, state management, testing, and troubleshooting.
Join 2.7 million developers at
Overview
Content
Reviews
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

WHAT YOU'LL LEARN

Build a fully-functional application with Rails, Webpacker, Webpack, TypeScript and dynamic CSS
Learn how Turbolinks makes navigating your web application faster
Learn how Stimulus framework enhance static or server-rendered HTML as compared to other front-end frameworks
Understand how React and ActionCable allow you to change data without reloading the page
Learn how to manage state in Stimulus, React and Redux
Learn code validation and testing using Cypress
Build a fully-functional application with Rails, Webpacker, Webpack, TypeScript and dynamic CSS

Show more

TAKEAWAY SKILLS

React frontend in Rails

Ruby Gem's Management

Webpacker

Content

1.

Getting Started

3 Lessons

Get familiar with enhancing Rails apps with Hotwire, Turbo, Webpacker, and React.

8.

Webpack

4 Lessons

Step through using Webpack, Yarn, and Webpacker to optimize Rails front-end development.

9.

Webpacker

4 Lessons

Walk through using Webpacker for efficient asset management in Rails development and production.

11.

Immediate Communication with ActionCable

5 Lessons

Break down complex ideas related to integrating ActionCable with Turbo, Stimulus, and React for real-time updates.

12.

Managing State in Stimulus Code

5 Lessons

Take a closer look at managing state within Stimulus code using the DOM and data attributes.

14.

Using Redux to Manage State

4 Lessons

Approach managing state in React with Redux for better asynchrony and clarity.

17.

More Testing and Troubleshooting Basics

4 Lessons

Examine advanced testing and troubleshooting methodologies using Cypress for Hotwire and React applications.
Certificate of Completion
Showcase your accomplishment by sharing your certificate of completion.
Developed by MAANG Engineers
Every Educative lesson is designed by our in-house team of ex-MAANG software engineers and PhD computer science educators, and developed in consultation with developers and data scientists working at Meta, Google, and more. Our mission is to get you hands-on with the necessary skills to stay ahead in a constantly changing industry. No video, no fluff. Just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

Trusted by 2.7 million developers working at companies

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

AI Prompt

Build prompt engineering skills. Practice implementing AI-informed solutions.

Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Free Resources

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath