Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react

1. React.js: Wprowadzenie do kursu od podstaw
2. Poznaj React.js
3. Pierwszy komponent w React.js
4. Props czyli atrybuty w React.js
5. Podział na komponenty w React.js
6. Klasy jako komponenty React.js
7. Interakcja z komponentami React.js
8. Stan komponentów React.js
9. State w React.js 2
10. Metody cyklu życia komponentu w React.js
11. React.js w przykładach: filtrowanie statycznej listy
12. Tworzenie aplikacji React.js dzięki create-react-app
13. React.js na GitHub Pages dzięki create-react-app
14. Testowanie aplikacji React.js — podstawy Enzyme
15. Testowanie React.js w Enzyme — props, state i interakcje
16. Poprawne bindowanie funkcji w React.js
17. Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
18. Komunikacja pomiędzy komponentami w React.js
19. Komunikacja z API w React.js
20. Formularze w React.js — kontrolowane komponenty
21. Formularze w React.js — niekontrolowane komponenty
22. Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
23. TDD w React.js z pomocą react-testing-library
24. Flux i Redux: globalny store i jednokierunkowy przepływ danych
25. React + Redux — kurs: wprowadzenie i podstawy
26. React + Redux — filtrowanie listy, proste selektory
27. Projektowanie komponentów: Presentational & Container Components
28. Asynchroniczność w Redux: redux-thunk
29. Kiedy używać state, a kiedy Redux?
30. Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
31. Leniwe ładowanie komponentów w React dzięki import
32. Higher Order Reducers — Redux i powtarzanie kodu
33. React Hooks — wprowadzenie i motywacja
34. React Hooks: useState, czyli stan w komponentach funkcyjnych
35. React Hooks: useState — wiele stanów, callbacki i inne niuanse
36. React Hooks: useEffect — efekty uboczne w komponencie
37. React Hooks a żądania do API
38. useReducer — przenoszenie logiki poza komponent
39. useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami
40. Wady React Hooks
41. React Hooks: Piszemy własne hooki!

Kolejna seria Waszych pytań i moich odpowiedzi na temat React. W komentarzach i na fejsie pojawia się ich mnóstwo, staram się wyłapywać, zapisywać i kompilować w postaci artykułu. Oto one 🙂

Wasze pytania i odpowiedzi

Jaka jest różnica pomiędzy props="{login}" a props={login}?

To co wpiszesz wewnątrz "" będzie traktowane jako ciąg znaków. A więc props="{login}" spowoduje przekazanie do komponentu ciągu znaków "{login}".

Drugia wersja, czyli props={login} używa innej składni — nawiasy klamrowe mówią tutaj, że to co zostanie w nie wpisane, będzie wykonane jak kod JavaScript. A więc moglibyśmy napisać props={1+2} i otrzymać wartość 3. Albo props={() => {}} i przekazać funkcję.

A wracając do naszego przykładu: props={login} spowoduje ewaluację tego co jest zawarte w zmiennej login i przekazanie jej wartości.

Czy jak tworzę bezstanowy komponent to lepiej korzystać z klas czy funkcji?

Z funkcji. Albo z klas. Cokolwiek działa dla Ciebie. Keep it simple!
Są argumenty za jednym i drugim. Umówcie się z zespołem na spójną wersję i tego używajcie 🙂

Czym się różnią import React from 'react' i import * as React from 'react'?

Zapis

import React from 'react'

nie jest całkowicie poprawny. Jest możliwy i działa tylko z Babelem i tylko przy włączonym odpowiednim presecie! Wynika to z tego, że React nie jest napisany z użyciem modułów ES i nie ma export default.

Prawidłowy import, biorąc pod uwagę istniejący kod Reacta, wygląda tak:

import * as React from 'react'

Zadziała on zarówno z Babelem z presetem, bez presetów, a także w TypeScripcie.

Czy mogę pisać import { Component } from 'react'?

Całkowicie poprawne jest użycie

import { Component } from 'react'

Nie ma w tym nic złego i wiele osób poleca taki zapis. Jednak, przynajmniej na razie, JSX wymaga, aby w danym zakresie był zaimportowany React. Więc ostatecznie musimy mieć takie dwie linijki:

import * as React from 'react';
import { Component } from 'react';

Dla wielu osób nie ma to sensu, więc rezygnują z drugiego importu i zamiast tego używają React.Component.

Masz pytanie?

Na dziś to wszystko. Jeśli masz jakiekolwiek pytania — nawet te najprostsze — śmiało zadawaj je w komentarzach pod wpisami 🙂 Chętnie na wszystkie odpowiem! Sprawdź nasze szkolenia z React!