- 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!
W tej części nauczysz się parametryzować komponenty w React.js. Poznasz pojęcie „props” oraz dowiesz się do czego one (te „propsy”) służą.
To co zrobiliśmy do tej pory było spoko, ale przecież nie będziesz tworzyć nowego komponentu zawsze gdy będziesz chciał(a) wyświetlić inny tekst w aplikacji, prawda? Wyobraź sobie, że masz do zaprojektowania popup, w którym będzie wyświetlony tytuł oraz tekst. Za moment to zaimplementujemy!
Projekt
Zacznijmy od zaprojektowania kodu takiego modala. Będzie to dosłownie kilka prostych linii HTML:
<div>
<dialog open>
<h1>Tytuł</h1>
<p>Treść</p>
</dialog>
</div>
Nic skomplikowanego. dialog
to element wbudowany w HTML5. Następnie zamieniamy taki kod na komponent, czyli tworzymy funkcję, która zwraca JSX:
function MojKomponent() {
return (
<div>
<dialog open>
<h1>Tytuł</h1>
<p>Treść</p>
</dialog>
</div>
);
}
Tym sposobem Twoim oczom powinien się ukazać taki oto piękny efekt:
Props w React.js
Niestety teraz aby zmienić tekst, musimy edytować kod samego komponentu, a to jest mało praktyczne. Czy można jakoś sparametryzować to co wyświetla komponent? Tak! Używając tzw. propsów 🙂
Do tej pory komponentu używaliśmy w taki sposób: <MojKomponent />
. Czyli jest to tak jakby element. A czy możemy dodać tutaj jakieś atrybuty? Właśnie tak! To dokładnie będą nasze propsy. Props to atrybut. Podajmy więc tytuł i treść: <MojKomponent title="Tytuł" content="Treść" />
. Czy to już? Niestety nie. Teraz musimy jeszcze jakoś się odwołać do tych propsów i wyświetlić.
Propsy to argumenty
Propsy do komponentów przekazywane są po prostu jako argumenty. A konkretnie: Jeden argument, który jest obiektem. Czy mogłoby być prościej? Chyba nie 🙂 Funkcja przybiera taką postać:
function MojKomponent({ title, content }) { … }
Wyświetlanie
Jak teraz wyświetlić zawartość takiej zmiennej w JSX? Jest to również bardzo proste. Wystarczy skorzystać ze składni {nazwa}
— i to wszystko!
Ostatecznie otrzymujemy taki kod:
function MojKomponent({ title, content }) {
return (
<div>
<dialog open>
<h1>{title}</h1>
<p>{content}</p>
</dialog>
</div>
);
}
Ostateczny efekt
Teraz już nie pozostaje nic innego jak wyrenderować ten komponent. Podobnie jak dotychczas:
ReactDOM.render(
<MojKomponent
title="I co, duma?"
content="To było prostsze niż by się mogło wydawać, prawda?"
/>,
document.getElementById("app")
);
Domyślne propsy
Co się wydarzy gdy nie podasz jakiegoś propsa i spróbujesz go wyświetlić? Na szczęście nic złego. Zostanie potraktowany jak pusty string ""
i nic się nie pokaże. Lepsze to niż wyświetlenie użytkownikom np. undefined
, prawda? 🙂 Ale na pewno nie idealne! Właśnie dlatego możemy podać domyślne propsy.
Najprościej możesz to zrobić korzystając ze składni ES2015, z której już i tak korzystamy 🙂 Do argumentów można dopisać domyślne wartości. Po znaku =
po prostu podajemy stringa, który ma się wyświetlić gdy danego atrybutu na komponencie nie ma:
function MojKomponent({ title = "Modal", content }) { // tutaj podajemy domyślne propsy
return (
<div>
<dialog open>
<h1>{title}</h1>
<p>{content}</p>
</dialog>
</div>
);
}
Teraz przy próbie wyrenderowania <MojKomponent />
zamiast tytułu pokaże się napis „Modal”, a w miejsce treści nie pokaże się nic (pusty element <p>
).
Demo
See the Pen Props czyli atrybuty w React.js by Michał Miszczyszyn (@mmiszy) on CodePen.
Co dalej?
Poznaj React z naszymi szkoleniami!W kolejnej części nauczysz się jak dzielić aplikację na komponenty. Rozpoczniesz też budowę „prawdziwej” aplikacji! Jeśli chcesz na bieżąco śledzić kolejne części kursu React.js to koniecznie śledź mnie na Facebooku i zapisz się na newsletter.
Ćwiczenie
Ćwiczenie: Zrób eksperyment z propsami. Spróbuj przekazać zamiast stringa kolejno: liczbę, obiekt, tablicę i funkcję. Co można z nimi zrobić? Czy da się przekazać tam HTML? Napisz w komentarzu!
- 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!
Fajnie, że działasz krok po kroku, wiele osób na pewno zyska na tym blogu. Może warto jeszcze tylko wtrącić gdzieś zdanko, że używasz destrukturyzacji obiektu props tworząc komponent. W wielu poradnikach widywałem zapisy „( props ) => { … }”. Osobiście skłaniam się ku Twojej wersji i sam również notorycznie korzystam z dobrodziejstwa destrukturyzacji ale nie wszyscy mogą wiedzieć co tu się dzieje i będą mieć problem też inne poradniki 🙂 Pozdrawiam, i powodzenia w react-blogowaniu 🙂 Im więcej o React w PL tym lepiej dla polskiego front-endu 🙂
Słuszna uwaga 😉
Z tym przekazywaniem HTML, to jest trochę problem. Z poniższych wersji zadziała tylko ta trzecia, tj. linia nr 30 na screenie:
Stackoverflow wspomina też o dangerouslySetInnerHTML. Czy są jeszcze inne możliwości przekazania HTML przez props? Jaki sposób polecasz?
Dokłanie o to mi chodziło 😉 React ma wbudowany system, który zabezpiecza przed przypadkowym zrobieniem sobie krzywdy. API ma zwracać stringa, ale przypadkiem zwróciło HTML (z jakiegoś powodu)? Nie szkodzi! React nie wykona tego HTML-a, tylko wyświetli go jako ciąg znaków 🙂
Jeśli potrzebujesz wstrzykiwać HTML ze stringa to spróbuj budować logikę inaczej (JSX), albo ostatecznie użyj dangerouslySetInnerHTML. Nazwa mówi wszystko 😉
Podaję HTML jako defaultowa wartość title i mi normalnie wstrzyknęło HTML, a nie ciąg znaków także chyba jakieś zmiany nastąpiły.
Nie było żadnych zmian. Pokaż kod 🙂
Wszystko działa oprócz htmla 🙂 zwróciło mi to jako string, nie mogłem przekazać objektu np {person} ale {person.name} już działa 🙂
Gdzieś w komentarzach pojawiło się coś takiego prop={ {key: val} } Ale totalnie tego nie rozumiem 🙂
Generalnie kursik ok i niema problemu by go zrozumieć .. jednak nie do końca łapię jak to jest z tymi props, skoro wprowadzasz obiekt {}, zapis niepowinien być { key : val } ? coś mi umyka?
Jeśli przekazujesz obiekt to tak. Wtedy będziesz miał
prop={ {key: val} }
Można przekazać wszystko, jeżeli props jest w cudzysłowach traktowany jest jako string, w przypadku klamr jako funkcja, objekt lub zmienna.
A co z HTML-em? 😉
Ćwiczenie wykonane, wyświetla się cała tablica, obiekt cały nie chce się wyświetlić. Nie pokazuje tagów HTML, od razu wykonany kod.
A to jeszcze zależy w jaki sposób się ten HTML przekaże 😉
Nie za bardzo rozumiem, czemu działa:
zaś nie działa:
Domyślam się, że chodziło o różnice pomiędzy
content={['aaa']}
acontent=['aaa']
? To pierwsze to poprawna składnia JSX, to drugie nie. Wszystkie wyrażenia JS-owe muszą być włożone w{
i}
.Mam problem nie działa mi program i nie mam za bardzo pomysłu przez co. Tu wklejam kod:
Co to znaczy, że nie działa? Jaki jest błąd?
Uncaught Invariant Violation: Target container is not a DOM element.
Kamil Wyremski.8.1/umd/react-dom.development.js:49:15)
Kamil Wyremski.8.1/umd/react-dom.development.js:20747:36):27:10
Wojtek Urbański.26.0/babel.js:61531:11" rel="nofollow ugc">https://unpkg.com/babel-standalone

Wojtek Urbański.26.0/babel.js:61531:11)
Wojtek Urbański.26.0/babel.js:61597:10" rel="nofollow ugc">https://unpkg.com/babel-standalone

Wojtek Urbański.26.0/babel.js:61597:10)
Wojtek Urbański.26.0/babel.js:61638:4" rel="nofollow ugc">https://unpkg.com/babel-standalone

Wojtek Urbański.26.0/babel.js:61638:4)
Wojtek Urbański.26.0/babel.js:61668:4" rel="nofollow ugc">https://unpkg.com/babel-standalone

Wojtek Urbański.26.0/babel.js:61668:4)
Wojtek Urbański.26.0/babel.js:336:40" rel="nofollow ugc">https://unpkg.com/babel-standalone

Wojtek Urbański.26.0/babel.js:336:40)
Wojtek Urbański.26.0/babel.js:327:13" rel="nofollow ugc">https://unpkg.com/babel-standalone

Wojtek Urbański.26.0/babel.js:327:13
at invariant (https://unpkg.com/react-dom
at Object.render (https://unpkg.com/react-dom
at
at run (
at check (
at loadScripts (
at runScripts (
at transformScriptTags (
at
Masz na stronie element z id=siema?
Dobra dzięki za pomoc właśnie zauważyłem że w id miałem literówkę.
Wrzuć gdzieś cały kod 🙂
https://pastebin.com/6qeSj8F2
Cześć,
Podzielę się swoimi obserwacjami, bo albo czegoś nie rozumiem, albo jest niedostatecznie wytłumaczone.
Chcąc zamienić Twój przykład:
… na np. liczbę, robię tak:
To nie działa, muszę użyć
title={666}
, prawda? Dlaczego?PS: właśnie zauważyłem że Disqus automatycznie modyfikuje tagi, m.in. robi LowerCase, a dla atrybutów (props) dodaje cudzysłów jeśli go pominę. Dlatego użyłem spacji przed
MojKomponent
.Disqus robi złą robotę 😐
Wracając do tematu: Wszystkie atrybuty w takim klasycznym zapisie HTML-owym to stringi. Czyli `cokolwiek=”111″` to będzie string „111”. Aby to obejść, możesz uży składni z JSX: `cokolwiek={…}` i zamiast trzech kropek możesz podać dowolny typ danych, nawet tablice, obiekty, no i liczby 🙂
Wtedy `cokolwiek={„111”}` to będzie string, a `cokolwiek={111}` to liczba.
Dziwne rzeczy,
Bez problemu podałem < H2 markup={} />,
w render() return Sep: {this.props.markup};
I śmiga HTML
Pokaż kod, bo chyba nie zrozumiałem 😉
Wygląda na to, że wszystko jest przekazywane jako string, w przypadku arraya, obiektu wyciągane są wartości 🙂 Funkcja nie pokazała się
React ma wbudowany system, który zabezpiecza przed przypadkowym zrobieniem sobie krzywdy. API ma zwracać stringa, ale przypadkiem zwróciło HTML (z jakiegoś powodu)? Nie szkodzi! React nie wykona tego HTML-a, tylko wyświetli go jako ciąg znaków 🙂
W dzisiejszych czasach dynamiczne renderowanie DOM w native JS to banał, reaktywny DOM możemy tworzyć przy pomocy template strings + pułapek Proxy (jest też dostępny pdolyfill dla IE11 :)) w załączniku screen kodu React vs Native JS skoro nie widać różnicy to po co pobierać 70+ kb biblioteki i uczyć się obsługi frameworka który suma summarum indywidualną składnię i docelowo parsuje w natywnym silniku JS wbudowanym w przeglądarce.
Słaby trolling, 2/10 🙂
Oh dear, przeczytaj ponownie ze zrozumieniem – na co komu spam?
Nie rozumiem, jak możesz porównywać klejenie stringów do Reakta. Albo nie masz pojęcia na ten temat, albo trollujesz. Pewnie popełniam błąd, ale załóżmy to pierwsze.
A więc:pokaż, jak działa Twoja funkcja render. Pokaż prosty przykład: input i obok niego renderuje się ten sam tekst, który w ten input wpisujesz.
Renderowanie DOM + aktualizacja tagu „p” w zależności od wpisania tekstu w wygląda tak:
Funkcje pomocnicze „render” oraz „observe”:
Podobnie jak w znanych frameworkach możesz stworzyć jeden wielki JSON z setką parametrów, tworzysz jedną pułapkę na cały object i wszystkie parametry są aktualizowane w zależności od funkcji callback.
Oczywiście to zajście prosta, strukturalna implementacja. W projektach wszystko funkcjonuje w osobnych modułach ES6 aby zachować odpowiednią estetykę i nie pisać pojedynczych skryptów z milionem linii kodu (coś ala komponenty w React ;]). Posiadam też własną klasę ok 119 linijek kodu która bez pułapek proxy obserwuje zmiany w DOM’ie w czasie rzeczywistym wykorzystując parametry data-prop – działanie identyczne jak props i computed props w React lub Vue.
To jakieś żarty, tak? Ehhh. Do widzenia.