Frontend UI Components in Magento 2
36 lessons
3h 0m
The hardest part of Magento? Every developer will give you the same answer. Without a doubt, UI Components!
Months were spent researching UI Components, identifying all of their intricacies, and defining the simplest way possible to explain this complex JavaScript layer in Magento. If you have knowledge of M2 but have had difficulty understanding UI Components, this course will provide you with a solid foundation to build dynamic, reactive client-side components.
UI Components are friends, not foes
Simply build reactive, dynamic components without hassle.
More JavaScript pain relieved
This course is solely focused on learning Magento's proprietary implementation of "UI Components".
Each lesson in this video course comes with a tech-friendly text translation, as well as full project source code.
Learn visually
By watching the instructor program in front of your eyes, you will learn faster than trying to source and read documentation.
Full source code
After watching the lessons, easily reference the source code on GitHub to build out features for your upcoming projects.
Build a real, custom UI Component
What about building a top site banner that pushes free shipping on orders of $100 or more, and that dynamically reacts to shopping cart price changes in real-time?
Learn while developing
Not only will these lessons teach you all about UI Components, but by the end of these lessons you will have a fully-functional, completed module that you can install on any of your client websites.
Real, working module
This "Free Shipping" banner module changes states depending on the shopping cart subtotal, and reacts to changes without ever needing a page refresh.
“I just finished studying the UI Components course and wow!!! The content was awesome. Thank you so much, you have no idea how much it has helped me professionally.”
Course curriculum
Each video lesson can be played back & referenced as many times as you wish at slow or fast speed, tech-friendly closed captions, and includes full source code.
Includes English captions, and Spanish translations provided by
36 lessons
3h 0m
Environment setup
Basics of UI Components
Managing data within UI Components
Extending & overriding UI Components
Communication between UI Components
Advanced Concepts
Maggie Bolt 💁♀️
Hi, I'm Maggie! 👋
Your dedicated Magento 2 mentor, on-hand 24/7 within all premium courses to help guide you through your learning journey.
Enroll in the course
Start learning M2Magento 2 today
Choose the best option for you & your team.
-
Train up to 5 on your team
-
Lifetime access to this course
-
Free updates for life
-
Full source code
-
AI-powered Magento tutor
-
PhpStorm licenses (6 months)
-
30-day money back guarantee
-
License for a single user
-
Lifetime access to this course
-
Free updates for life
-
Full source code
-
AI-powered Magento tutor
-
PhpStorm license (6 months)
-
30-day money back guarantee
“Thank you! This UI Components course was released just in time, as I recently had some very similar tasks to solve. It helped me apply some "gotchas" that really eased by development work.”
Frequently asked questions
- What will I get out of this course?
- Upon completing this course, you will have all of the basic knowledge to build UI Components for the frontend of Magento 2. This includes creating your own custom UI Components, interacting with built-in data methods, overriding & extending core UI Components, as well debugging issues with UI Components with the uiRegistry.
- What do I need to know to take this course?
- This course assumes you have core fundamental knowledge of Magento 2, as well as full understanding of JavaScript Development Fundamentals. If you are not familiar with these topics, you may struggle in following along with this course.
- Do I need a development environment setup?
- Yes, this course assumes you have a running development environment of Magento setup and running locally. If you don't already have a development environment setup, please set one up before enrolling in the course. M.academy has a free course, Set Up a Magento 2 Development Environment with Docker.
- What version of Magento is this based on?
- This course was created using concepts featured in Magento version 2.4. If a new best-practice approach is introduced in a future version of Magento 2, the course will be updated appropriately.
- Will I receive anything upon course completion?
- Upon completion of the course, you'll receive a certificate of completion signed by the course instructor. This demonstrates to potential employees that you have the basic underlying knowledge of frontend UI Components in Magento 2. If your employer offers continuing education stipends, you may also be able to use this certificate to get the cost reimbursed by your employer.
- What if I need a business invoice?
- Invoices now contain fields for company name and VAT number. As long as you add your company name at checkout, you will automatically receive a business invoice emailed to you after purchase.