---
title: Kansioarkkitehtuuri
info: Yksityiskohtainen katsaus kansioarkkitehtuuriimme
image: /images/user-guide/fields/field.png
---

<Frame>
  <img src="/images/user-guide/fields/field.png" alt="Header" />
</Frame>

Tässä oppaassa tutustut projektihakemiston rakenteen yksityiskohtiin ja siihen, miten se edistää Twentyn järjestelyä ja ylläpidettävyyttä.

Seuraamalla tätä kansioarkkitehtuurin konventiota, on helpompaa löytää tiettyihin ominaisuuksiin liittyvät tiedostot ja varmistaa, että sovellus on skaalautuva ja ylläpidettävä.

```
front
└───modules
│   └───module1
│   │   └───submodule1
│   └───module2
│   └───ui
│   │   └───display
│   │   └───inputs
│   │   │   └───buttons
│   │   └───...
└───pages
└───...
```

## Sivut

Sisältää sovelluksen reittien määrittelemät ylintason komponentit. Ne tuovat mukaan alemman tason komponentteja moduulihakemistosta (lisätietoja alempana).

## Moduulit

Jokainen moduuli edustaa ominaisuutta tai ominaisuusryhmää, joka koostuu sen spesifisistä komponenteista, tiloista ja toimintalogiikasta.
Niiden kaikkien tulisi noudattaa alla olevaa rakennetta. Voit sisällyttää moduuleihin moduuleita (kutsutaan almoduuleiksi), ja samat säännöt pätevät.

```
module1
  └───components
  │   └───component1
  │   └───component2
  └───constants
  └───contexts
  └───graphql
  │   └───fragments
  │   └───queries
  │   └───mutations
  └───hooks
  │   └───internal
  └───states
  │   └───selectors
  └───types
  └───utils
```

### Contexts

A context is a way to pass data through the component tree without having to pass props down manually at every level.

Katso [React-konteksti](https://react.dev/reference/react#context-hooks) lisätietoja varten.

### GraphQL

Sisältää fragmentit, kyselyt ja muokkaukset.

Katso [GraphQL](https://graphql.org/learn/) lisätietoja varten.

- Fragmentit

Fragmentti on uudelleenkäytettävä osa kyselystä, jota voit käyttää eri paikoissa. Käyttämällä fragmentteja, on helpompaa välttää koodin päällekkäisyys.

Katso [GraphQL-fragmentit](https://graphql.org/learn/queries/#fragments) lisätietoja varten.

- Kyselyt

Katso [GraphQL-kyselyt](https://graphql.org/learn/queries/) lisätietoja varten.

- Muokkaukset

Katso [GraphQL-muokkaukset](https://graphql.org/learn/queries/#mutations) lisätietoja varten.

### Koukut

Katso [Koukut](https://react.dev/learn/reusing-logic-with-custom-hooks) lisätietoja varten.

### Tilat

Sisältää tilan hallinnan logiikan. [RecoilJS](https://recoiljs.org) käsittelee tämän.

- Valitsimet: Katso [RecoilJS-valitsimet](https://recoiljs.org/docs/basic-tutorial/selectors) lisätietoja varten.

Reactin sisäänrakennettu tilanhallinta huolehtii edelleen komponentin sisäisestä tilasta.

### Työkalut

Tulisivat sisältää vain uudelleenkäytettäviä puhtaita funktioita. Muussa tapauksessa, luo mukautettuja koukkuja `koukut`-hakemistossa.

## UI

Sisältää kaikki sovelluksessa käytetyt uudelleenkäytettävät käyttöliittymäkomponentit.

Tämä kansio voi sisältää alikansioita, kuten `data`, `display`, `feedback` ja `input` erityyppisille komponenteille. Jokaisen komponentin tulisi olla itsenäinen ja uudelleen käytettävä, jotta voit käyttää sitä eri osissa sovellusta.

Erottamalla UI-komponentit muista komponenteista `moduulit`-hakemistossa, on helpompi ylläpitää yhtenäistä muotoilua ja tehdä muutoksia käyttöliittymään vaikuttamatta muihin osiin (liiketoimintalogiikkaan) koodikannassa.

## Käyttöliittymä ja riippuvuudet

Voit tuoda toisen moduulin koodia mistä tahansa muusta moduulista paitsi `ui`-hakemistosta. Tämä pitää sen koodin helposti testattavana.

### Sisäinen

Each part (hooks, states, ...) of a module can have an `internal` folder, which contains parts that are just used within the module.