Recenzja: "React w działaniu. Tworzenie aplikacji internetowych. Wydanie II"

Chciałbym się z Wami podzielić recenzją książki, którą dane mi było ostatnio przeczytać. Zapraszam do krótkiego artykułu na temat książki autorstwa Stoyan Stefanov, byłego programisty Facebooka, pt. “React w działaniu. Tworzenie aplikacji internetowych. Wydanie II”.

Dlaczego kupiłem tą książkę?

Książkę zakupiłem via empik.com, aby wreszcie przeczytać jakąś pozycję o narzędziu, które jest tak bardzo popularne, a zarazem, którego używam na co dzień.

Fakt, że książki w dzisiejszych czasach może nie są tak samo popularne jak kiedyś, natomiast ja lubię czytać zwykłe książki i doświadczać faktury papieru oraz tworzyć notatki ołówkiem, i nie odrywać się od czytania tylko zalegnąć z lekturą na kilka godzin.

Autorem książki jest ten sam programista, który jest autorem starej i sławnej książki pt. “JavaScript. Wzorce” opublikowanej w 2012 roku. Ta lektura dość mocno wpłynęła na moją karierę zawodową, stąd też cenię tego autora.

Książka “JavaScript. Wzorce” znajduje się mojej biblioteczce książek polecanych dostępnej pod adresem /polecane-ksiazki/.

Kolejnym argumentem motywującym zakup książki jest to, że będzie opisywać bibliotekę, która nie rozwija się już tak szybko jak kiedyś. Tak więc, książka nie będzie bardzo nieaktualna względem najnowszej wersji. Niestety, React rzadko się rozwija.

Tak wygląda ostatnie kilka wpisów wydań biblioteki na GitHubie:

• 18.2.0 (June 14, 2022)
• 18.1.0 (April 26, 2022)
• 18.0.0 (March 29, 2022)
• 17.0.2 (March 22, 2021)
• 17.0.1 (October 22, 2020)
• 17.0.0 (October 20, 2020)
• 16.14.0 (October 14, 2020)

Książka, którą recenzuję została wydana:

• 2021-11-11 (oryginał)
  • “React: Up & Running: Building Web Applications”
• 2023-02-14 (polska wersja, przetłumaczona przez Helion)
  • “React w działaniu. Tworzenie aplikacji internetowych. Wydanie II”

Czego mogę się nauczyć z tej książki?

Niestety, ale tłumaczenia książek technologicznych to często jakieś nieporozumienie. Nie wiem po co na siłę tłumaczyć konstrukcje, które nie są jednoznaczne. Przykładem niech będzie “operator rozszczepienia”. Drogi czytelniku, czy wiesz co autor książki opisuje? No właśnie, ja też nie wiedziałem. W tym przypadku autor książki opisywał Spread Operator.

Książka nie jest gruba. Opisuje dwa projekty, które łączą się w jedną całość.

✅ Z książki dowiesz się o:

• składnia JSX
  • HTML to JSX Compiler
• komponenty kontrolowane (formularze, kontrolki)
• przekazywanie danych do komponentu
• klasowe komponenty, oraz zdarzenia cyklu życia:
  • componentDidUpdate()
  • componentDidMount()
  • componentWillUnmount()
  • getSnapshotBeforeUpdate()
  • shouldComponentUpdate()
• komponenty funkcyjne
• idea funkcji typu reducer oraz testy jednostkowe do nich
• atrybuty:
  • key a iteracja po liście elementów,
  • className
  • style
• Hooks
  • useRef()
  • useLayoutEffect()
  • useEffect()
  • useState()
  • useReducer()
  • useCallback()
  • useContext() (Consumer)
  • Tworzenie własnego hooka - useLoggedState()
• APIs
  • forwardRef()
  • createContext() (Provider)
• Components
  • <Fragment> & <>
  • <StrictMode>

⛔️ Niestety, ale w książce brakuje opisu bardziej zaawansowanych funkcji jak:

• APIs
  • lazy()
  • memo()
• Hooks
  • useMemo()
• Components
  • <Profiler>
  • <Suspense>
• Router

Czy jest “treściwa”, czy dużo jest lania wody?

W tej sekcji spróbuję odpowiedzieć czy w książce nie ma tekstu pisanego tylko po to, aby zapełnić strony.

Jeśli miałbym ocenić książkę pod tym kątem to dałbym ocenę 6/10. Początek książki jest obiecujący. Można się dowiedzieć o tym jak działa biblioteka, natomiast druga połowa to już raczej nikomu nieprzydatna treść. W drugiej części jest tylko przedstawiony workflow opisujący logikę aplikacji, która jest tworzona, przestawić coś nowego, czego brakuje w książce.

Dlatego też tę drugą część książki oceniam jako może nie “lanie wody”, ale też nie mogą jej ocenić jako przydatną treść.

Czy zawiera wiedzę, którą trudno gdzieś indziej znaleźć?

Nie mogę odpowiedzieć twierdząco na to pytanie. Wszystko, co jest w książce można śmiało przeczytać w dokumentacji Reacta. Może dokumentacja nie jest wybitnie dokładna i precyzyjna, ale za to napisana prostym językiem, co ułatwia jej zrozumienie.

Książki techniczne rzadko zawierają unikalną wiedzę, której nie można znaleźć w sieci. Na pewno żadna książka o bibliotece nie będzie zawierała unikalnej wiedzy.

Jaki jest docelowy odbiorca (stary wyjadacz czy początkujący)?

Docelowym odbiorcą jest początkujący programista (początkująca programistka), który (która) chce tworzyć proste aplikacje w oparciu o bibliotekę React.

Osoby ze stażem w budowaniu aplikacji webowych z użyciem Reacta, nie znajdą w tej książce niczego interesującego, ani niczego czego nie mogliby znaleźć w sieci.

Polecam tę książkę na początek swojej przygody z biblioteką React.

Czy jest bardziej teoretyczna, czy też większy nacisk jest postawiony na przykłady?

Książka kładzie duży nacisk na przykłady. W oparciu o budowanie komponentów tłumaczy podstawowe elementy Reacta. Moim zdaniem natomiast ostatnie 2 rozdziały, to strata czasu. Nie ma w nich wytłumaczenia nowych zagadnień.

Proces nauki wymaga wiedzy teoretycznej i praktycznej. Natomiast proporcje powinny być w przeważającej większości skierowane w stronę praktyki.

W książce nie znajduję żadnych dygresji.

Czy przykłady są wartościowe?

Tak, przykłady były przydatne, bo na ich podstawie były wyjaśniane elementy Reacta.

Każda nowa konstrukcja była na początku opisana teoretycznie, a następnie zaprezentowany był przykład.

Myślę, że najbardziej trafione było wytłumaczenie hooka useReducer. Do takiego stopnia mi się ono spodobało, że wrzuciłem o tym tweeta:

One of my fav part of this 📖 #Reducer pic.twitter.com/GhzGkA0Vhk

— Piotr Kowalski (@piecioshka) November 12, 2023

Ciekawy jest też sposób na stworzenie funkcji do aktualizacji kontekstu. Przykład:

// contexts/DataContext.js
import React from 'react';

const DataContext = React.createContext({
  data: [],
  updateData: () = {},
});

export default DataContext;

// components/App.js
const App = () => {
    const initialData = JSON.parse(localStorage.getItem('data'));
    const [data, setData] = useState(initialData);

    function updateData(newData) {
        newData = clone(newData);
        commitToStorage(newData);
        setData(newData);
    }

    return (
        <DataContext.Provider value={{ data, updateData }}>
            <!-- ... -->
        </DataContext.Provider>
    );
}

export default App;

// components/Header.js
const Header = () => {
    const {data, updateData} = useContext(DataContext);
    // ...
}

export default App;

Czy ktoś doświadczony może się czegoś nowego dowiedzieć?

W książce podkreśliłem następujące fragmenty:

“Można przecież utworzyć aplikację za pomocą Reacta przeznaczoną do renderowania w różnych środowiskach poza przeglądarką - na przykład w elemencie Canvas.”
— (strona 17)

Zastanawiam się, czy istnieje jakaś biblioteka, gdzie możemy używać Reacta do budowy komponentów, natomiast nie renderować ich w drzewie DOM, tylko na płaszczyźnie Canvas.

Nie mam doświadczenia w takim sposobie renderowania komponentów. Ciekawi mnie, czy transparentne jest przeniesienie przestrzeni do renderowania z drzewa DOM do obiektu Canvas.

“Komponenty funkcyjne wymagają nieco mniejszej mocy obliczeniowej CPU i mniej kodu.”
— (strona 25)

Tu nie jestem pewien jak to sprawdzić. Nie wiem, czy autor jest pewny, że to zdanie jest prawdziwe. Chciałbym w jakiś sposób to sprawdzić, czy faktycznie komponenty funkcyjne wymagają mniejszej mocy obliczeniowej.

Porównanie do podobnych pozycji na rynku

Nie mam porównania z innymi pozycjami na rynku.

Jeśli Ty takie posiadasz, to dodaj komentarz co myślisz o innych książkach.

Podsumowanie

Czy było warto przeczytać? Ogólnie myślę, że było warto.

Plusy

1. Czytanie książek to satysfakcjonujące zajęcie. Gdy przeczytasz kolejną lekturę to masz poczucie dobrze spędzonego czasu
2. Pozycja nie była gruba, więc czytanie jej (a czasami męki) nie trwało zbyt długo
3. Zweryfikowanie swojego zakresu wiedzy na temat biblioteki
4. Znalezienie czegoś nowego dla siebie, np. link do wszystkich wspieranych encji HTML, oraz ciekawe podejście do kontekstu

Minusy

1. Brakowało mi lepszego wyjaśnienia useCallback()
2. Techniki optymalizacji jak np. React.memo() oraz useMemo() zostały pominięte

•

To tyle ode mnie.

Czytelniku! Dziękuję Ci za przeczytanie tego artykułu.
Jeśli Ci się on spodobał, to proszę zaznacz to w sekcji komentarzy.
Będzie mi miło.

Pozdrawiam, Piotr 🖐️