Improve clarity of 2 files to edit and improve learning

While going through the tutorial, I didn't notice the 2nd file to edit in the tutorial or the way that Svelte directly uses a component and by this point in the tutorial had forgot what exactly components themselves are at this stage.  Repetition is the key to reinforcement learning, so let's repeat what components are at this critical point of learning.
This fixes all 3 issues and importantly reaffirms what components are.
pull/7285/head
Thad Guidry 5 years ago committed by GitHub
parent 252895d42a
commit 7dc5c6f809
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -2,9 +2,13 @@
title: Nested components
---
It would be impractical to put your entire app in a single component. Instead, we can import components from other files and include them as though we were including elements.
It would be impractical to put your entire app in a single component. Instead, we can import components from other files and then use them as though we were including elements.
Add a `<script>` tag that imports `Nested.svelte`...
NOTE: Remember that in Svelte, an application is composed from one or more components and each component is a reusable self-contained block of code that encapsulates HTML, CSS, and JavaScript that belong together, written into a `.svelte` file.
We now present you 2 files in the editor on the right (upper bar) to click on, `App.svelte` and `Nested.svelte`.
Let's add a `<script>` tag to `App.svelte` that imports the file and our component `Nested.svelte` to our app...
```html
<script>
@ -12,7 +16,7 @@ Add a `<script>` tag that imports `Nested.svelte`...
</script>
```
...then add it to the markup:
...then add the component `Nested` to use it in the app markup:
```html
<p>This is a paragraph.</p>

Loading…
Cancel
Save