Learning Using Svelte REPL

:dart: Learning Objectives

By the end of this lesson, you will be able to:

• Use Svelte REPL to practice coding without setting up an IDE
• Create and organize Svelte components with JavaScript, HTML, and CSS
• Import and nest components to build web applications
• Apply scoped styling to your components

:information_source: What is Svelte REPL? Svelte REPL is an online coding environment where you can test Svelte code instantly. Think of it as a playground where you can practice without installing anything on your computer!

:rocket: Getting Started with Svelte REPL

You can start learning Svelte right away! Just visit Svelte REPL and begin coding.

:bulb: Tip Want to save your work? Log in with your GitHub account to save and share your projects. But you can practice without logging in too!

:memo: Setting Up Your Account

Need a GitHub account? Check out the Technical Skills Guidelines --- GitHub Account for help.

:emoji:️ Managing Your Projects

You can rename your project to anything you want:

Save your work by clicking the save button:

Find all your saved projects in your profile:

:memo: Note Sharing is easy! Once you save a project, you can share the URL with friends or teachers!

:warning: Important Things to Remember

:bulb: Tip Best Practices for Svelte REPL:

• Use it for practice and learning - not big projects
• Perfect for testing small code snippets
• You can't delete saved projects (but you can clear the code and save it blank)

:emoji: Understanding Svelte Components

:information_source: What are Components? Components are reusable building blocks for your web app. Think of them like LEGO(R) blocks - you can combine them to build amazing things!

:file_folder: Component Files

Svelte component files always end with .svelte:

• app.svelte - Your main component
• button.svelte - A button component
• header.svelte - A header component

:emoji:️ Why Use Components?

Components help you:

• Reuse code - Write once, use many times!
• Stay organized - Each component has its own job
• Build faster - Combine components like building blocks

Examples of components:

• A button can be a component
• A form can be a component
• An input field can be a component
• Your whole app is a component!

:memo: Note Remember: The app.svelte file is special - it's your main component where all other components come together!

:art: The Three Parts of a Component

Every Svelte component can have three sections:

1. JavaScript - For your logic and data
2. HTML - For your content structure
3. CSS - For your styles and design

Here's a complete example:

<script>
  let name = 'world';
</script>

<h1>Hello {name}!</h1>

<style>
  h1 {
    background-color: yellow;
  }
</style>

Let's break it down:

• <script> tag - Where you write JavaScript code
• <h1> tag - Your HTML content (you can add many HTML tags!)
• <style> tag - Where you write CSS for styling

:art: Styling with Svelte

Styling in Svelte is super easy! You write CSS just like you're used to.

Basic Component (HTML Only)

Let's start simple with just HTML:

<h1>Welcome!</h1>
<p>This is a paragraph.</p>

Adding Style to Your Component

Now let's make it colorful:

<h1>Welcome!</h1>
<p>This is a paragraph.</p>

<style>
  h1 {
    background-color: yellow;
  }
  
  p {
    color: purple;
    font-family: 'Comic Sans MS', cursive;
    font-size: 2em;
  }
</style>

:bulb: Tip Component styles are special! The CSS you write in one component won't affect other components. Each component keeps its styles to itself!

:computer: JavaScript in Components

Using Variables in Your Components

Let's create a variable and use it:

<script>
  let name = 'world';
</script>

<h1>Hello {name}!</h1>

:memo: Note Why use let instead of var? We use let because it's safer! It helps prevent mistakes by keeping variables where they belong. Want to learn more? Check out this detailed explanation.

The Magic of Curly Brackets

See those curly brackets {name}? They're special!

• Svelte replaces {name} with the value 'world'
• You can put any JavaScript inside the brackets
• They work in HTML content and attributes

Using Variables in Attributes

You can use variables in HTML attributes too:

<script>
  let src = 'image.gif';
  let name = 'example';
</script>

<img {src} alt={name}>

:bulb: Tip Shortcut! When the attribute name matches the variable name, you can write {src} instead of src={src}. It's the same thing!

:link: Nested Components

Now for the fun part - combining components together!

How Component Nesting Works

:information_source: Key Concept: app.svelte is your main component. All other components get imported here to build your app!

Importing Components

To use a component, you need to import it first:

<script>
  import ComponentName from 'componentPath';
</script>

Example: Creating a Button Component

First, create a simple button component:

Button.svelte

<button>Click Me</button>

Then import and use it in your app:

<script>
  import Button from './Button.svelte';
</script>

<p>This is a paragraph.</p>
<Button />

:emoji: Component Naming Rules

:memo: Note Important! Component names must start with a capital letter when you import them!

Here's a helpful reference:

:books: Lesson Summary

Let's review what you learned today:

:dart: Key Takeaways

1. Svelte REPL - Your online playground for coding

   • No setup needed
   • Save projects with GitHub login
   • Perfect for practice

2. Components - Building blocks of your app

   • End with .svelte extension
   • Reusable like LEGO(R) blocks
   • Keep your code organized

3. Three Parts of Components

   • <script> - JavaScript logic
   • HTML - Page structure
   • <style> - CSS styling

4. Using Variables

   • Use {variableName} in HTML
   • Works in content and attributes
   • Makes your pages dynamic

5. Importing Components

   • Import with capital letters
   • Nest components inside each other
   • app.svelte is your main component

:rocket: Practice Time!

Ready to practice? Try these activities:

1. Create Your First Component

   • Go to Svelte REPL
   • Make a component with your name in a variable
   • Style it with your favorite colors

2. Build a Button Component

   • Create a new Button.svelte file
   • Add some styling to make it look cool
   • Import it into your app.svelte

3. Experiment with Variables

   • Create variables for different things (colors, text, numbers)
   • Use them in your HTML
   • Try changing the values and see what happens!

:bulb: Tip Challenge yourself! Can you create a component that uses all three parts (JavaScript, HTML, and CSS) together?