Reactivity with SolidJS

• Understand Fine-Grained Reactivity: Learn how SolidJS leverages fine-grained reactivity to efficiently update the DOM without the need for heavy virtual DOM diffing.
• Build Efficient User Interfaces: Explore how to create reactive user interfaces using SolidJS’s declarative syntax, enhancing performance and user experience.
• Implement Advanced Reactivity Concepts: Gain skills in using signals, derivations, and dynamic tracking to manage application state and effects dynamically.
• Develop Real-World Applications: Apply SolidJS reactivity to build a fully functional Todo app, exploring key features such as routing, stores, and server-side rendering.

This course delves into the core concepts of reactivity in SolidJS, an innovative JavaScript library that offers a more efficient alternative to traditional frameworks by eliminating the need for a virtual DOM. You'll learn how SolidJS implements fine-grained reactivity through signals and side effects, allowing for precise DOM updates. The course provides hands-on experience with building components, managing state, and leveraging SolidJS’s powerful reactivity model to create high-performance applications.

• Frontend developers seeking to learn about reactive programming with SolidJS.
• Developers interested in building efficient, scalable web applications without using a virtual DOM.
• Programmers who want to deepen their understanding of reactivity and state management in JavaScript.
• Those familiar with frameworks like React, looking to explore alternative approaches to building user interfaces.

• Basic understanding of JavaScript, HTML, and CSS.
• Familiarity with concepts of reactivity and state management in frontend development.
• Experience with JavaScript frameworks such as React or Vue.js is beneficial but not required.

Introduction

• Overview of SolidJS and its approach to reactivity.
• Understanding the impact of fine-grained reactivity on performance and application design.

Reactivity Overview

• Introduction to reactivity, signals, side effects, and derivations in SolidJS.
• Exploring dynamic tracking and advanced reactivity techniques.

Building a Reactive System

• Creating signals and implementing dynamic reactivity from scratch.
• Using vanilla JavaScript and JSX to demonstrate reactivity in action.

Control Flow and Components

• Utilizing SolidJS control components like Show, Switch, and Dynamic for conditional rendering.
• Authoring components with SolidJS, managing props, and understanding lifecycle methods.

DOM Binding and Directives

• Handling events and refs, using spreads and directives for efficient DOM manipulation.
• Exploring advanced DOM binding techniques with SolidJS.

Building an App

• Setting up SolidJS with Vite and building a Todo app.
• Implementing features like adding, modifying, and filtering todo items.

Stores and Context

• Using stores for fine-grained reactivity and creating global state with the Context API.
• Integrating SolidJS with other libraries like Redux and Apollo for state management.

Routing and Async

• Implementing client-side routing with SolidJS, using Suspense and Transition APIs.
• Exploring server-side rendering with Solid Start and utilizing server functions and actions.