Component naming conventions in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to name the Svelte component correctly.

Svelte

<script>
  export let name = "World";
</script>

<h1>Hello, [1]!</h1>

Drag options to blanks, or click blank then click option'

Aname

B{name}

CName

DNAME

Attempts:

3 left

💡 Hint

Common Mistakes

Using curly braces inside HTML content like in React.

Using uppercase variable names which are not declared.

In Svelte, component props are used as variables directly without braces inside HTML.

2fill in blank

medium

Complete the code to export a Svelte component with the correct file naming convention.

Svelte

<!-- File name: [1] -->
<script>
  export let message = "Hi!";
</script>
<p>{message}</p>

Drag options to blanks, or click blank then click option'

AhelloWorld.svelte

Bhello_world.svelte

Chelloworld.svelte

DHelloWorld.svelte

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or snake_case for component file names.

Omitting the .svelte extension.

Svelte components should be named with PascalCase and have the .svelte extension.

3fill in blank

hard

Fix the error in the component import statement by completing the blank.

Svelte

<script>
  import [1] from './button.svelte';
</script>

<Button />

Drag options to blanks, or click blank then click option'

AButton

Bbutton

CBUTTON

Dbtn

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase names for component imports.

Using names that do not match the component file name.

When importing a Svelte component, use the PascalCase name matching the component's file name.

4fill in blank

hard

Fill both blanks to define and use a Svelte component with correct naming conventions.

Svelte

<script>
  import [1] from './[2].svelte';
</script>

<[1] />

Drag options to blanks, or click blank then click option'

ACard

Bcard

CCardComponent

Dcardcomponent

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatch between import name and file name.

Using lowercase names for components.

Component names and file names should use PascalCase and match exactly.

5fill in blank

hard

Fill all three blanks to create a reusable Svelte component with proper naming and usage.

Svelte

<script>
  export let [1] = "";
</script>

<h2>[2]</h2>

<!-- Usage -->
<script>
  import [3] from './Title.svelte';
</script>

<[3] [1]="Welcome!" />

Drag options to blanks, or click blank then click option'

Atext

B{text}

CTitle

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase for prop names.

Not using curly braces to display prop values.

Using lowercase for component import names.

Props use lowercase names, displayed with curly braces, and component names use PascalCase.