Component naming conventions in Svelte - Mini Project: Build & Apply

Component Naming Conventions in Svelte

📖 Scenario: You are building a simple Svelte app that shows a list of fruits. To keep your code clean and easy to understand, you will practice naming your components properly.

🎯 Goal: Create a Svelte component named FruitList.svelte that displays a list of fruits. Follow proper component naming conventions by using PascalCase for the component file and component name.

📋 What You'll Learn

Create a Svelte component file named FruitList.svelte.

Use PascalCase for the component file name and component name.

Inside the component, define a list of fruits as an array.

Render the list of fruits using an each block.

Export the component properly.

💡 Why This Matters

🌍 Real World

Naming components clearly helps teams understand and maintain Svelte apps easily, especially when apps grow larger.

💼 Career

Following naming conventions is a key skill for frontend developers working with Svelte or other component-based frameworks.

1

Create the FruitList component file and define the fruits array

Create a Svelte component file named FruitList.svelte. Inside it, create a script block and define a variable called fruits as an array with these exact values: ['Apple', 'Banana', 'Cherry'].

Svelte

  // Define the fruits array here

Need a hint?

Remember to use let to declare the fruits array inside the <script> block.

2

Add a configuration variable for the component title

Inside the script block of FruitList.svelte, add a variable called title and set it to the string 'Fruit List'.

Svelte

  let fruits = ['Apple', 'Banana', 'Cherry'];
  // Define the title variable here

Need a hint?

Use let title = 'Fruit List' inside the <script> block.

3

Render the title and the list of fruits using an each block

Below the script block, add markup to display the title inside an <h2> tag. Then use an {#each fruits as fruit} block to render each fruit inside an <li> element within a <ul>.

Svelte

  let fruits = ['Apple', 'Banana', 'Cherry'];
  let title = 'Fruit List';

Need a hint?

Use {#each fruits as fruit} to loop over the fruits array and display each fruit inside an <li>.

4

Export the FruitList component properly

Ensure the FruitList.svelte component is ready to be imported by other files by keeping the component name in PascalCase and the file named FruitList.svelte. No extra export code is needed in Svelte files.

Svelte

  let fruits = ['Apple', 'Banana', 'Cherry'];
  let title = 'Fruit List';


{title}

  {#each fruits as fruit}
    {fruit}
  {/each}

Need a hint?

Remember that in Svelte, the component file name and component usage follow PascalCase naming. No extra export statement is needed inside the file.