8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
115 lines
4.0 KiB
Plaintext
115 lines
4.0 KiB
Plaintext
---
|
|
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.
|