Svelte Training for React Programmers Overview
This Svelte course gives React programmers an in-depth look at Svelte, a modern JavaScript framework for building user interfaces. Attendees learn everything from setting up a development environment to handling lifecycle events. Students also tackle more advanced topics such as state management, routing, error handling, and asynchronous data. Throughout the course, comparisons are made between Svelte and React to help students understand the differences between the two JavaScript frameworks. This course is perfect for programmers who know React and are looking to expand their skills by learning Svelte.
Location and Pricing
Accelebrate offers instructor-led enterprise training for groups of 3 or more online or at your site. Most Accelebrate classes can be flexibly scheduled for your group, including delivery in half-day segments across a week or set of weeks. To receive a customized proposal and price quote for private corporate training on-site or online, please contact us.
In addition, some courses are available as live, instructor-led training from one of our partners.
Objectives
- Understand the fundamentals of Svelte and how it compares to React
- Set up a development environment for Svelte and understand how it differs from React’s development environment
- Learn about SvelteKit and its features, including routing, server-side rendering, and unit testing
- Create static and dynamic pages using Svelte, including adding images, CSS, and JavaScript content
- Understand the principles of template reactivity in Svelte and how it compares to React’s useState hook
- Understand component basics and composition in Svelte, including how to handle events and data
- Work with forms and lifecycle events in Svelte
- Understand state management, routing, error handling, and asynchronous data in Svelte
Prerequisites
All students must have React, JavaScript, and HTML programming experience. Experience with CSS is helpful, but not required.
Outline
Expand All | Collapse All
Introduction
- What is Svelte?
- What problem does Svelte solve?
- Svelte vs. React
- Svelta Compiler
- Moving from React to Svelte
Development Environment
- Requirements
- SvelteKit vs. React Create App
- SvelteKit vs. Vite React Template
- Svelte Files vs JSX Files
- Svelte Extension for Visual Studio Code
- Run/Debug Svelte App in Visual Studio Code
- Svelte Extension for WebStorm
- Run/Debug Svelte App in WebStorm
SvelteKit Overview
- Vite Tooling
- Development Server
- Routing
- Deployment
- Server-side rendering
- Unit Testing
Getting Started
- Exploring the REPL
- Svelte Layout
- Svelte Page
- Svelte Component
- Svelte Architecture
- Svelte Element Directives
- Compiling Svelte Files
Static Pages
- What is a Static Page?
- What problem do Static Pages solve?
- Static Page File Structure
- Setting Head Content
- HTML Content
- CSS Content
- Comments
- Scoped CSS
- Handling Images
- Hot Module Reloading
- Server Pre-rendering
- Page Routing
Dynamic Pages
- What is a Dynamic Page?
- What problem do Dynamic Pages solve?
- Client-Side Rendering
- Dynamic Page File Structure
- JavaScript Content
- Using Variables
- Using Expressions
- Data Binding
- Class and Style Directive
- Event Binding
- Logic Blocks
- Debug Tag
Template Reactivity
- Principles
- Changing Data through Assignments
- Reactive Statements
- Updating Arrays and Objects
- Compared to React’s useState Hook
Component Basics
- What is a Component?
- What problem do Components solve?
- Svlete Components vs React Components
- Calling Components vs HTML Elements
- Compared to JSX Rules for Calling Component and Elements
- Component File Structure
- Component Props
- Component Events
- Compared to React Props and Events
Component Composition
- What is Component Composition?
- What problem does it solve?
- Nested Components
- Passing Data to Child Components
- Handling Events and Receiving Data from Child Components
- Component Tree Best Practices
Event Handling
- Event Handling Element Directives
- DOM Events
- Adding Event Handlers
- In-line Handlers
- Event Modifiers
- Dispatching Component Events
- Forwarding Events
Data binding
- Top-down data binding by default
- Communication with props and events
- Using two-way data binding
Forms
- HTML Form Element
- Named Form Actions
- Form Validation
- Form Submission
- Progressive Enhancement
Lifecycle
- Mount
- Destroy
- Before Update
- After Update
- Tick
- Compared to React useEffect Hook
State Management
- Stores
- Writable Stores
- Auto-subscriptions
- Readable Stores
- Derived Stores
- Custom Stores
- Store Bindings
- Page Store
- Navigation Store
- Updated Store
Routing
- What is Routing?
- What problem does Routing solve?
- Compared to React Router
- Pages
- Layout
- Route Parameters
- API Routes
Errors and Redirects
- Handling Errors and Redirects
- Error Pages
- Fallback Errors
- Redirects Compared to React Router Redirects
- Compared to React Error Boundaries
Asynchronous Data
- Promises & async/await
- Fetching data from a REST API
- Subscriptions
- Stores
Conclusion
Training Materials
All Svelte training students receive comprehensive courseware covering all topics in the course. Courseware is distributed via GitHub in the form of documentation and extensive code samples.
Software Requirements
Students need a free, personal GitHub account to access the courseware and permission to install .NET SDK, Node.js, and Visual Studio Code on their computers. They also need permission to install NuGet Packages, NPM Packages and Visual Studio Extensions. If students are unable to configure a local environment, a cloud-based environment can be provided.
