# Using multiple components

### Svelte Component Cheat-Sheet

#### 1. Create a Child Component

**File:** `src/components/ChildComponent.svelte`

{% tabs %}
{% tab title="src/components/ChildComponent.svelte" %}

```html
<script>
  const { name } = $props();
</script>

<p>Hello, {name}!</p>
```

{% endtab %}
{% endtabs %}

#### 2. Use the Child Component in Main App Component

**File:** `src/App.svelte`

{% tabs %}
{% tab title="src/App.svelte" %}

```html
<script>
  import ChildComponent from './components/ChildComponent.svelte';
</script>

<main>
  <ChildComponent name="Svelte" />
</main>
```

{% endtab %}
{% endtabs %}

#### 3. Display Result in Browser

**URL:** `localhost`

{% tabs %}
{% tab title="localhost" %}
Hello, Svelte!
{% endtab %}
{% endtabs %}

#### Key Points

* **Exporting Props in Child Component:**

  ```html
  <script>
    const { name } = $props();
  </script>
  ```

  * `const { name } = $props();`: Svelte-specific syntax to allow prop passing.
* **Using Child Component in Parent:**

  ```html
  <script>
    import ChildComponent from './components/ChildComponent.svelte';
  </script>

  <main>
    <ChildComponent name="Svelte" />
  </main>
  ```

  * `import`: Standard JavaScript ES6 syntax.
  * `<ChildComponent name="Svelte" />`: Svelte-specific syntax for including a component and passing props.

{% hint style="info" %}
The name `ChildComponent` can be any name you like. It is not specific to Svelte.
{% endhint %}

{% hint style="warning" %}
Ensure that the file path in the import statement is correct. Incorrect paths will result in errors.
{% endhint %}