Skip to content

Commit c8e92a6

Browse files
committed
Refactor component directory example
1 parent fde6ec6 commit c8e92a6

File tree

2 files changed

+18
-8
lines changed

2 files changed

+18
-8
lines changed

src/content/2/en/part2a.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -413,16 +413,16 @@ import App from "./App"
413413

414414
Let's move our <i>Note</i> component into its own module.
415415

416-
In smaller applications, components are usually placed in a directory called <i>components</i> within the <i>src</i> directory. The convention is to name the file after the component.
416+
In smaller applications, components are usually placed in a directory called <i>components</i> within the <i>src</i> directory. The convention is to name the file after the component. A possible directory structure for a project containing multiple components could be as follows:
417417

418418
```shell
419419
src/
420-
├── main.jsx # Entry point
421-
├── App.jsx # Main App component
422-
└── components/ # All reusable components
423-
├── Note.jsx # Named after the component
424-
├── Header.jsx
425-
└── Footer.jsx
420+
├── main.jsx
421+
├── App.jsx
422+
└── components/ # Folder for reusable components
423+
├── Footer.jsx # File named after the component
424+
├── Note.jsx
425+
└── Notification.jsx
426426
```
427427

428428
Now, we'll create a directory called <i>components</i> for our application and place a file named <i>Note.jsx</i> inside. The contents of the file are as follows:

src/content/2/fi/osa2a.md

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -405,7 +405,17 @@ import App from "./App"
405405

406406
Siirretään nyt <i>Note</i>-komponentti omaan moduuliinsa.
407407

408-
Pienissä sovelluksissa komponentit sijoitetaan yleensä <i>src</i>-hakemiston alle sijoitettavaan hakemistoon <i>components</i>. Konventiona on nimetä tiedosto komponentin mukaan.
408+
Pienissä sovelluksissa komponentit sijoitetaan yleensä <i>src</i>-hakemiston alle sijoitettavaan hakemistoon <i>components</i>. Konventiona on nimetä tiedosto komponentin mukaan. Useita komponentteja sisältävän projektin hakemistorakenne voisi olla siis esimerkiksi seuraava:
409+
410+
```shell
411+
src/
412+
├── main.jsx
413+
├── App.jsx
414+
└── components/ # Kansio uudelleenkäytettäville komponenteille
415+
├── Footer.jsx # Tiedosto nimetty komponentin mukaan
416+
├── Note.jsx
417+
└── Notification.jsx
418+
```
409419

410420
Tehdään nyt sovellukseen hakemisto <i>components</i> ja sinne tiedosto <i>Note.jsx</i>, jonka sisältö on seuraava:
411421

0 commit comments

Comments
 (0)