Building Interactive UIs with SolidJS: Key Concepts and Features
1h 1mIntermediate2024-01-23
Authors
Ebenezer Don
Software Engineer, NewDev.io Founder, Technical Content Creator
Course details
As web applications grow in complexity and user expectations continue to rise, there is—and will be—a pressing need to develop and maintain efficient, high-performance JavaScript libraries. SolidJS has gained widespread recognition for its unique approach to reactive programming, and it’s seen significant growth in both usage and popularity among developers, especially at companies that use it to power production applications.
In this course, instructor Ebenezer Don helps you to get up and running with the key concepts and features of SolidJS, leveraging its simplicity, speed, and adaptability. Explore core concepts like fine-grained reactivity, creating UI components, state management, handling events, and structuring applications using SolidJS. Along the way, Don shows you how to build a simple task tracker application, add basic tasks, and manage advanced interactions such as control flow.
In this course, instructor Ebenezer Don helps you to get up and running with the key concepts and features of SolidJS, leveraging its simplicity, speed, and adaptability. Explore core concepts like fine-grained reactivity, creating UI components, state management, handling events, and structuring applications using SolidJS. Along the way, Don shows you how to build a simple task tracker application, add basic tasks, and manage advanced interactions such as control flow.
Skills covered
Software DesignEcma InternationalInteraction DesignJavaScriptUser ExperienceSoftware DevelopmentOne-Off
Concepts
0. Introduction
- 01 - Why build interactive UIs with SolidJS
- 02 - What you should know
1. Introduction to SolidJS
- 03 - Introducing SolidJS - Overview and key features
- 04 - SolidJS vs. other front-end libraries
- 05 - Setting up a SolidJS environment
2. Core Concepts in SolidJS
- 06 - State management in SolidJS - Signals and Stores
- 07 - Working with components in SolidJS
- 08 - Lifecycle methods in SolidJS
- 09 - Fine-grained reactivity and control flow helpers
3. Building a Simple Task Tracker - Laying the Foundation
- 10 - An overview of the complete app
- 11 - Setting up the task tracker
- 12 - Creating task components
- 13 - Adding new tasks - Form and state management
4. Building a Task Tracker - Advanced Interactions
- 14 - Implementing control flow helpers and displaying task items
- 15 - Deleting tasks
- 16 - Marking task items as complete
Conclusion
- 17 - Next steps - Further learning and exploration in SolidJS