ViewComponent Crash Course with Ruby on Rails

ViewComponent is a powerful gem that allows you to create reusable, testable, and encapsulated view components in Ruby on Rails applications. ViewComponent was developed by the GitHub team and has since been adopted by many developers looking for more structure than the default partials and helpers provided by Ruby on Rails. This crash course will review ViewComponent's use case and explore how it might fit your next Rails app. Source code: https://github.com/justalever/view_component_demo Timestamps: 00:31 - What is ViewComponent 01:30 - Benefits of ViewComponent 03:00 - Create a new Rails app 04:00 - Add ruby gems 04:15 - Basic app configuration 11:43 - Generate first ViewComponent 13:00 - Add application component 14:25 - ButtonComponent setup 18:15 - Add Tailwind CSS, component classes 19:44 - Rendering a ViewComponent 22:29 - Generate and configure BlogPostComponent 28:03 - Generate and configure AvatarComponent 31:39 - ViewComponent Slots 32:40 - Generate Nav-based components and LogoComponent 37:33 - Render navigation components with slots 41:05 - ViewComponent Tests 43:58 - Final thoughts and opinions ====== ? I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch (https://webcrunch.com), where I publish tutorials, articles, and the occasional vlog about design and development. ? Never miss an update! Click here to subscribe: https://www.youtube.com/user/webcrunch?sub_confirmation=1 ⚡️Upcoming FREE course - Reserve your spot now and get on the mailing list. https://hellohotwire.com ? Read the written version: https://web-crunch.com/posts/view-component-crash-course/ ? New to Ruby on Rails? Enroll in my course HELLO RAILS: https://hellorails.io ? The Blog (my source of truth): https://webcrunch.com Additional Links: ? Bring life to Rails projects with Rails UI: https://railsui.com. ?‍? Hire me: Visit: https://railsui.com/custom ? https://twitter.com/webcrunchblog. ⚙️ https://github.com/justalever. Also, this stuff takes a long time to make, but I love to do it. To help me keep at it, consider supporting me. If not monetarily, subscribe to the channel or share it with someone! ✨ https://github.com/sponsors/justalever ☕️ https://www.buymeacoffee.com/webcrunch