|
|
# Fejlesztési alapelvek
|
|
|
|
|
|
## Együttműködés
|
|
|
Mindenki külön branchen dolgozik.
|
|
|
|
... | ... | @@ -58,6 +56,7 @@ Az importok sorrendje: |
|
|
3. Lokális fájl importok
|
|
|
4. `//`
|
|
|
5. Style importok
|
|
|
|
|
|
pl.:
|
|
|
```jsx
|
|
|
import { useState } from "react";
|
... | ... | @@ -69,15 +68,15 @@ import Comment from "../question/comment"; |
|
|
import Checkbox from "../common/Checkbox";
|
|
|
import Button from "../common/Button";
|
|
|
//
|
|
|
import "../../global.css";
|
|
|
import css from "./style.module.scss";
|
|
|
```
|
|
|
|
|
|
#### Mappaszerkezet és fájl elnevezés
|
|
|
Komponens fájl elnevezés: `PascalCase.jsx`
|
|
|
Komponens elnevezés: mappa PascalCase, benne `index.jsx` és `style.module.scss`. Index fájlban komponens neve PascalCase.
|
|
|
|
|
|
Mappa és lib fájl elnevezés: `kebab-case, kebab-case.js`
|
|
|
Egyéb (nem komponens) mappa és lib fájl elnevezés: `kebab-case`, `kebab-case.js`
|
|
|
|
|
|
Fontos, hogy a komponensek `.jsx` kiterjesztést kapnak, a lib fájlok pedig `.js`-t.
|
|
|
Fontos, hogy a komponens index fájlok `.jsx` kiterjesztést kapnak, a lib fájlok pedig `.js`-t.
|
|
|
|
|
|
```
|
|
|
src
|
... | ... | @@ -92,16 +91,35 @@ src |
|
|
| \-- ask.jsx
|
|
|
\-- components
|
|
|
|-- common
|
|
|
| |-- Button.jsx
|
|
|
| \-- TextField.jsx
|
|
|
| |-- Button
|
|
|
| | |-- index.jsx
|
|
|
| | \-- style.module.scss
|
|
|
| \-- TextField
|
|
|
| |-- index.jsx
|
|
|
| \-- style.module.scss
|
|
|
\-- question-list
|
|
|
|-- QuestionListItem.jsx
|
|
|
\-- QuestionList.jsx
|
|
|
|-- QuestionListItem
|
|
|
| |-- index.jsx
|
|
|
| \-- style.module.scss
|
|
|
\-- QuestionList
|
|
|
|-- index.jsx
|
|
|
\-- style.module.scss
|
|
|
```
|
|
|
|
|
|
|
|
|
#### Component styling
|
|
|
styled-jsx
|
|
|
Sass modules
|
|
|
|
|
|
Használat:
|
|
|
```jsx
|
|
|
import css from "./style.module.scss";
|
|
|
|
|
|
const MyComponent = () => <div className={css["MyComponent"]} />;
|
|
|
|
|
|
export default MyComponent;
|
|
|
```
|
|
|
|
|
|
Tippek dinamikus style-okhoz: classname toggling vagy style propban css variable állítás. [Bővebben](https://www.notion.so/zeithq/CSS-Modules-8b882395d5cc476d963414bd9f1e4395)
|
|
|
|
|
|
#### Design
|
|
|
Ikonok: feather |
|
|
\ No newline at end of file |