React_dla_zaawansowanych_reactz.pdf

(904 KB) Pobierz
Tytuł oryginału: Pro React
Tłumaczenie: Łukasz Piwko
ISBN: 978-83-283-2992-8
Original edition copyright © 2015 by Cássio de Sousa Antonio
All rights reserved.
Polish edition copyright © 2017 by HELION SA.
All rights reserved.
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording or by any information storage retrieval system,
without permission from the Publisher.
Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej
publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną,
fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje
naruszenie praw autorskich niniejszej publikacji.
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich
właścicieli.
Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były
kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane
z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie
ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji
zawartych w książce.
Wydawnictwo HELION
ul. Kościuszki 1c, 44-100 GLIWICE
tel. 32 231 22 19, 32 230 98 63
e-mail:
helion@helion.pl
WWW:
http://helion.pl
(księgarnia internetowa, katalog książek)
Pliki z przykładami omawianymi w książce można znaleźć pod adresem:
ftp://ftp.helion.pl/przyklady/reactz.zip
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/reactz
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Printed in Poland.
Kup książkę
Poleć książkę
Oceń książkę
Księgarnia internetowa
Lubię to! » Nasza społeczność
Spis treści
O autorze .......................................................................................................... 7
O korektorach merytorycznych .......................................................................... 8
Podziękowania .................................................................................................. 9
Wprowadzenie ................................................................................................ 11
Rozdział 1. Rozpoczęcie pracy ........................................................................................... 13
Zanim zaczniesz .......................................................................................................................... 13
Definicja biblioteki React .......................................................................................................... 14
Zalety biblioteki React ............................................................................................................... 14
Budowa pierwszej aplikacji React ............................................................................................ 16
Komponowanie komponentów ................................................................................................ 21
Podstawowe informacje o stanie .............................................................................................. 32
Podsumowanie ............................................................................................................................ 34
Zdarzenia w React ...................................................................................................................... 35
JSX pod lupą ................................................................................................................................ 37
Aplikacja Kanban — oznaczanie, czy kartka jest otwarta, czy zamknięta ......................... 41
React bez JSX ............................................................................................................................... 45
Style śródliniowe ......................................................................................................................... 46
Formularze .................................................................................................................................. 49
Wirtualne drzewo DOM od środka ......................................................................................... 53
Podsumowanie ............................................................................................................................ 57
Sprawdzanie własności .............................................................................................................. 59
Strategie i najlepsze praktyki tworzenia kompozycji komponentów .................................. 64
Cykl życia komponentu ............................................................................................................. 71
Krótka dygresja o niezmienności ............................................................................................. 75
Aplikacja Kanban — drobne podniesienie poziomu złożoności ......................................... 81
Podsumowanie ............................................................................................................................ 94
Rozdział 2. Abstrakcja DOM .............................................................................................. 35
Rozdział 3. Budowanie aplikacji z komponentów ............................................................. 59
Kup książkę
Poleć książkę
SPIS TREŚCI
Rozdział 4. Wyszukane interakcje ..................................................................................... 95
Animacje w React ....................................................................................................................... 95
Przeciąganie i upuszczanie ...................................................................................................... 105
Aplikacja Kanban — animacje i funkcja przeciągania ........................................................ 117
Podsumowanie .......................................................................................................................... 131
Implementacja routingu metodą „naiwną” .......................................................................... 133
Biblioteka React Router ........................................................................................................... 137
Podsumowanie .......................................................................................................................... 166
Czym jest Flux ........................................................................................................................... 167
Nierealistyczna, minimalna aplikacja Flux ........................................................................... 169
Pakiet Flux Utils ........................................................................................................................ 177
Asynchroniczny Flux ............................................................................................................... 181
Aplikacja AirCheap .................................................................................................................. 183
Ulepszanie mechanizmu asynchronicznego pobierania danych ....................................... 202
Aplikacja Kanban — przejście na architekturę Flux ........................................................... 204
Podsumowanie .......................................................................................................................... 236
Na czym polega proces uzgadniania ...................................................................................... 237
React Perf ................................................................................................................................... 238
Metoda shouldComponentUpdate ........................................................................................ 245
Podsumowanie .......................................................................................................................... 248
Node.js i Express ....................................................................................................................... 249
Podstawy tworzenia izomorficznych aplikacji React .......................................................... 254
Trasowanie ................................................................................................................................ 263
Podsumowanie .......................................................................................................................... 271
Jest ............................................................................................................................................... 273
Narzędzia testowe React .......................................................................................................... 275
Podsumowanie .......................................................................................................................... 283
Rozdział 5. Routing ......................................................................................................... 133
Rozdział 6. Architektura Flux w aplikacjach React ........................................................... 167
Rozdział 7. Optymalizacja wydajności ............................................................................. 237
Rozdział 8. Izomorficzne aplikacje React ......................................................................... 249
Rozdział 9. Testowanie komponentów React .................................................................. 273
Skorowidz .................................................................................................... 285
6
Kup książkę
Poleć książkę
ROZDZIA
Ł
1

Rozpoczęcie pracy
React to biblioteka typu
open source
utworzona przez programistów Facebooka. Prezentuje nowatorskie
podejście do tworzenia interfejsów użytkownika za pomocą JavaScriptu i dzięki temu od samego początku
istnienia cieszy się dużą popularnością oraz skupia aktywną społeczność użytkowników.
W książce tej znajdziesz wszystkie informacje potrzebne do tego, by móc efektywnie wykorzystać
bibliotekę React we własnych projektach. Zważywszy, że React to tylko narzędzie do renderowania
interfejsów użytkownika, nie ma żadnych ograniczeń dotyczących pozostałych technologii wykorzystywanych
w projekcie. W związku z tym w dalszej części książki opisuję techniki trasowania (routowania)
i architektury aplikacji typowe dla tej biblioteki.
W tym rozdziale opisuję kilka ogólnych zagadnień, aby pomóc Ci w jak najszybszym przystąpieniu
do budowania aplikacji. Oto lista omówionych tematów:
definicja biblioteki React i przegląd jej zalet,
definiowanie interfejsów użytkownika przy użyciu reactowego rozszerzenia składni JavaScriptu
o nazwie JSX,
tworzenie komponentów React z własnościami i stanami.
Zanim zaczniesz
Biblioteka React jest typowym elementem nowoczesnego ekosystemu programistycznego JavaScriptu.
Aby móc wypróbowywać przykłady kodu opisywane w tej książce, musisz zainstalować Node.js i npm.
Dobrze jest też znać się na programowaniu funkcyjnym w JavaScripcie oraz być na bieżąco z najnowszymi
składnikami tego języka, takimi jak funkcje strzałkowe czy klasy.
Node.js i npm
Z założenia JavaScript to język przeglądarkowy, ale system Node.js umożliwia uruchamianie programów
w tym języku w komputerach lokalnych i na serwerach za pośrednictwem darmowego narzędzia wiersza
poleceń. W połączeniu z
npm
(ang.
Node Package Manager)
system Node.js stał się bezcennym narzędziem
do programowania aplikacji JavaScript, umożliwiającym tworzenie skryptów wykonujących zadania
(np. kopiowanie i przenoszenie plików albo uruchamianie lokalnego serwera testowego) i automatyczne
pobieranie zależności.
Kto jeszcze nie zainstalował Node.js w swoim komputerze, powinien to zrobić teraz, pobierając
instalator dla systemu Windows, Mac lub Linux ze strony
https://nodejs.org/.
Kup książkę
Poleć książkę
Zgłoś jeśli naruszono regulamin