- React.js: Wprowadzenie do kursu od podstaw
- Poznaj React.js
- Pierwszy komponent w React.js
- Props czyli atrybuty w React.js
- Podział na komponenty w React.js
- Klasy jako komponenty React.js
- Interakcja z komponentami React.js
- Stan komponentów React.js
- State w React.js 2
- Metody cyklu życia komponentu w React.js
- React.js w przykładach: filtrowanie statycznej listy
- Tworzenie aplikacji React.js dzięki create-react-app
- React.js na GitHub Pages dzięki create-react-app
- Testowanie aplikacji React.js — podstawy Enzyme
- Testowanie React.js w Enzyme — props, state i interakcje
- Poprawne bindowanie funkcji w React.js
- Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
- Komunikacja pomiędzy komponentami w React.js
- Komunikacja z API w React.js
- Formularze w React.js — kontrolowane komponenty
- Formularze w React.js — niekontrolowane komponenty
- Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
- TDD w React.js z pomocą react-testing-library
- Flux i Redux: globalny store i jednokierunkowy przepływ danych
- React + Redux — kurs: wprowadzenie i podstawy
- React + Redux — filtrowanie listy, proste selektory
- Projektowanie komponentów: Presentational & Container Components
- Asynchroniczność w Redux: redux-thunk
- Kiedy używać state, a kiedy Redux?
- Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
- Leniwe ładowanie komponentów w React dzięki import
- Higher Order Reducers — Redux i powtarzanie kodu
- React Hooks — wprowadzenie i motywacja
- React Hooks: useState, czyli stan w komponentach funkcyjnych
- React Hooks: useState — wiele stanów, callbacki i inne niuanse
- React Hooks: useEffect — efekty uboczne w komponencie
- React Hooks a żądania do API
- useReducer — przenoszenie logiki poza komponent
- useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami
- Wady React Hooks
- 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! Naucz się React na naszym szkoleniu!
- React.js: Wprowadzenie do kursu od podstaw
- Poznaj React.js
- Pierwszy komponent w React.js
- Props czyli atrybuty w React.js
- Podział na komponenty w React.js
- Klasy jako komponenty React.js
- Interakcja z komponentami React.js
- Stan komponentów React.js
- State w React.js 2
- Metody cyklu życia komponentu w React.js
- React.js w przykładach: filtrowanie statycznej listy
- Tworzenie aplikacji React.js dzięki create-react-app
- React.js na GitHub Pages dzięki create-react-app
- Testowanie aplikacji React.js — podstawy Enzyme
- Testowanie React.js w Enzyme — props, state i interakcje
- Poprawne bindowanie funkcji w React.js
- Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
- Komunikacja pomiędzy komponentami w React.js
- Komunikacja z API w React.js
- Formularze w React.js — kontrolowane komponenty
- Formularze w React.js — niekontrolowane komponenty
- Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
- TDD w React.js z pomocą react-testing-library
- Flux i Redux: globalny store i jednokierunkowy przepływ danych
- React + Redux — kurs: wprowadzenie i podstawy
- React + Redux — filtrowanie listy, proste selektory
- Projektowanie komponentów: Presentational & Container Components
- Asynchroniczność w Redux: redux-thunk
- Kiedy używać state, a kiedy Redux?
- Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
- Leniwe ładowanie komponentów w React dzięki import
- Higher Order Reducers — Redux i powtarzanie kodu
- React Hooks — wprowadzenie i motywacja
- React Hooks: useState, czyli stan w komponentach funkcyjnych
- React Hooks: useState — wiele stanów, callbacki i inne niuanse
- React Hooks: useEffect — efekty uboczne w komponencie
- React Hooks a żądania do API
- useReducer — przenoszenie logiki poza komponent
- useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami
- Wady React Hooks
- React Hooks: Piszemy własne hooki!
Z tym importem to bym tak nie dramatyzował… jeśli w projekcie zostanie użyty babel i odpowiednie presety to nie widzę powodu aby nie ułatwić sobie pracy i pisania, ale to moja subiektywna ocena.
A kto dramatyzuje i w jaki sposób?
Przecież napisałem dokładnie to Co Ty — taka składnia jest możliwa tylko w Babelu i tylko przy odpowiednim presecie.
A import React, { Component } from 'react';? 😀
Niektórzy tak piszą 😀
ok, no właśnie najczęściej widuję taki zapis więc jak to jest?