React - komponenty

Wstęp

Komponenty są podstawowym sposobem na organizacje aplikacji React. Są niczym innym jak funkcja w JavaScript, którą można w prosty sposób połączyć z kodem HTML i stylem CSS. Komponenty można tworzyć na dwa sposoby:

• ręcznie,
• wygenerować programem.

Nazwy komponentów (funkcji) muszą rozpoczynać się wielką literą. Komponenty NIE powinny być tworzone wewnątrz innych komponentów – to nie wydajne i może generować błędy.

Struktura komponentu

Komponenty mogą być tworzone jako funkcje i jako klasy. Komponent funkcji:

export function Komponent(){
  return …
}

Komponent klasy:

import React, { Component } from 'react';
export class KomponentKlasy extends Component(){
  render(){
    return …
  }
}

1. Utwórz plik (w katalogu src):

   Komponent.js

2. Uzupełnij go następująca treścią:

   export default function Komponent(){
     return (
       <div>Jestem komponentem</div>
     )
   }

   Inny zapis tego samego kodu:

   function Komponent(){
     …
   }
   export default Komponent;

3. Wywołaj go w pliku aplikacji (import, następnie użycie):

   import Komponent from './Komponent';
   …
   <Komponent/>
   …

4. Wynikowa struktura projektu:

   node_modules
   public
   src
   ├── App.css
   ├── App.js
   ├── App.test.js
   ├── Komponent.js
   ├── index.css
   ├── index.js
   ├── logo.svg
   ├── reportWebVitals.js
   └── setupTests.js

Uwagi:

• Dokonując importu z pliku (zielony) można zmienić nazwę zmiennej komponentu (czerwony).

• Importując element spośród wielu z komponentu należy użyć { WybranyKomponent }

• Zapis użycia komponentu: </>

• Zapis użycia fragmentu: <> … </>

1. Zainstaluj program

   npm install generate-react-cli

2. Wywołaj tworzenie komponentu

   npx generate-react-cli component <NazwaKomponentu>

3. Program wymaga odpowiedzi na 8 pytań – odpowiadaj wg propozycji:

   ? Does this project use TypeScript? No
   ? Does this project use styled-components? Yes
   ? What testing library does your project use? None
   ? Set the default path directory to where your components will be generated in?
   src/components
   ? Would you like to create a corresponding stylesheet file with each component
   you generate? Yes
   ? Would you like to create a corresponding test file with each component you
   generate? No
   ? Would you like to create a corresponding story with each component you
   generate? No
   ? Would you like to create a corresponding lazy file (a file that lazy-loads
   your component out of the box and enables code splitting:
   https://reactjs.org/docs/code-splitting.html#code-splitting) with each
   component you generate? No

4. Wynikowa struktura projektu:

   node_modules
   public
   src
   ├── App.css
   ├── App.js
   ├── App.test.js
   ├── components
   │   └── AutoComp
   │       ├── AutoComp.js
   │       └── AutoComp.styled.js
   ├── index.css
   ├── index.js
   ├── logo.svg
   ├── reportWebVitals.js
   └── setupTests.js