Funkcionální komponenty
Funkcionální komponenta je funkce, která vrací JSX prvek.
Místo lifecycle metod se používají React Hooks jako
useState,useEffectatd.
Zápisy funkcionálních komponent
Nejčastěji používaný zápis:
const MyComponent = () => {
return <div>Ahoj světe!</div>;
}Nebo pomocí funkce:
function MyComponent() {
return <div>Ahoj světe!</div>;
}Soubory funkcionálních komponent
Funkcionální komponenty se obvykle ukládají do samostatných souborů s příponou .jsx nebo .tsx.
Obvyklé je i to, že každá komponenta má svůj adresář, kde má zároveň i další soubory potřebné pro komponentu, jako CSS soubory, soubory s definicemi typů, atd.
Např.
src/
├── components/
│ └── Button/
│ ├── Button.jsx
│ ├── Button.css
│ └── types.d.ts
└── pages/
└── Home/
├── Home.jsx
└── Home.cssVidíš, že mám adresář
componentsapages. Obojí jsou komponenty. Nicméně stránky (pages) jsou komponenty, které jenom načítají jiné komponenty a spojují je s daty konkrétní stránky.