Dlaczego nie musisz perfekcyjnie znać ES6+ przed nauką Reacta?

Wiele osób mówi, że musisz świetnie znać vanilla Javascript zanim zaczniesz naukę frameworka! Przede wszystkim - NIE – nie musisz. Opiszę Ci mój start z Reactem i mój stan wiedzy jeżeli chodzi o Javascript.

Zanim przestaniesz czytać ten artykuł z bananem na twarzy i myślą, że możesz zaczynać bez podstawowej wiedzy muszę Cię zasmucić - niestety, ale powinieneś wiedzieć i być świadomym jednej rzeczy. Niektóre elementy ES6 to fundamenty składni współczesnego Javascriptu a ich nieznajomość może przynieść Ci zły start.

Co umiałem zanim zacząłem naukę Reacta?

• Dobre zrozumienie HTML i CSS
• Flexbox i SCSS
• Podstawy Node.js: Express.js, komendy NPM, workflow z Gulp i podstawy GIT
• Świadomość rzeczy takich jak: hoisting, domknięcia i zasięg
• Zrobiłem również kilka stron w HTML, CSS i vanilla JS takich jak aplikacja pogodowa czy to-do lista

Oczywiście nie musisz uczyć się Expressa, Gulka i wszystkich komend NPM aby zacząć naukę. Poznałem te rzeczy ponieważ chciałem je poznać tak czy siak. Wtedy zaczałem polepszać moją znajomość JS ze składnią ES6+. Po około trzech miesiącach zdecydowałem się na naukę React znając tylko podstawy ES6+. Co rozumiem poprzez podstawy?

• Słowa kluczowe let i const, dlaczego nie używać var, dlaczego możemy modyfikować obiekty i tablicę pomimo stosowania const itd.
• Template strings zamiast konkatenacji
• Operatora rest i spread
• Metody na tablicach (forEach, map, filter, reduce, sort, findIndex, some, any) i koncept funkcji wyższego rzędu
• Funkcje strzałkowe
• Obietnice i asynchroniczny JS ze składnią async/await
• Klasy ES6 (tylko teoria)
• Desktrukturyzacja obiektów i tablic (tylko teoria)

I to wszystko. Nie znałem takich rzeczy jak moduły ES6, symbole, iteratory, struktury Set i Map czy Proxy. Poza modułami ES6, żadne z tych rzeczy nie występują w naturalnym środowisku Reacta (a jeżeli tak jest to zdecydowanie rzadziej). Nie umiałem wykorzystać klas i desktrukturyzacji w praktyce. Wiedziałem tylko, że takie coś istnieje. Może dla wielu z was wydaje się to dużo nauki, ale w rzeczywistości tak nie jest. Da się to ogarnąć całkiem szybko ale rzeczy te są absolutnym must-have jeżeli chodzi o start z nauką nowej biblioteki. Dlaczego?

Otóż komponenty funkcyjne, hooki czy context API stoją u podstaw Reacta w 2021 roku. Oznacza to, że musisz wiedzieć jak desktrukturyzować propsy w funkcjach strzałkowych, rozumieć składnię hooków jak np. useState, korzystać z domyślnych i nazywanych exportów i importów, jak iterować po tablicach korzystając z różnych metod i tak dalej. W dodatku, różne biblioteki z ekosystemu Reacta używają ciekawych funkcji ES6. Na przykład GraphQL korzysta z template strings, a Redux-saga wykorzystuje potencjał generatorów. To kolejny argument za tym, dlaczego nie powinieneś przejmować się wszystkimi ficzerami ES6 zanim wskoczysz w bardziej kompleksowe biblioteki, co więcej:

"ucz się nowych rzeczy tylko wtedy, kiedy to konieczne na przykład, gdy chcesz poznać nową technologię. Inna wiedza - bez jej praktykowania - wyleci z Twojej głowy szybciej niż myślisz"

Moduły ES6, klasy, metoda bind, konfiguracja Webpacka, narzędzia jak Prettier, ESLint Map, Set - wszystkich tych rzeczy nauczyłem się tylko podczas nauki i praktykowania, co dodatkowo dało mi wiele zabawy i nie załuję mojej decyzji.

Więc moja wskazówka dla Ciebie to: wyluzuj, nie ucz się przesadnie każdego detalu ES6 ponieważ istnieje prawdopodobieństwo, że zapomnisz o tym bez praktycznego wykorzystania w praktycznych przykładach z życia wziętych. Naucz się fundamentów, które wymieniłem wyżej. Jeżeli nie będziesz w stanie zrozumieć konkretnych konceptów i idei w React, zatrzymaj się na moment i wróć do tego ponownie za jakiś czas. Właśnie tak wygląda proces nauki programowania 😊. Trzymam za Ciebie kciuki!

Narazie! ✌️