Kwalifikacja: INF.04 - Projektowanie, programowanie i testowanie aplikacji

Wielu osobom, zwłaszcza na początku przygody z Reactem, potrafią się pomylić sposoby importowania poszczególnych fragmentów tej biblioteki. Przykładowo, użycie import React.Component from 'react' jest składniowo niepoprawne w ES6 – nie istnieje możliwość importowania właściwości w ten sposób. To raczej coś, co można by zobaczyć w starszych rozwiązaniach lub błędnych tutorialach. Kolejna propozycja, czyli import [ Component ] from 'react', wygląda jakby ktoś próbował połączyć składnię tablicową z importem nazwanym, co zupełnie nie ma sensu w kontekście ECMAScript Modules. W rzeczywistości, w nawiasach kwadratowych importu się nie zapisuje – do importów nazwanych używamy nawiasów klamrowych, co jest jasno określone w dokumentacji. Z kolei import Component from 'react' to import domyślny, a 'react' nie eksportuje domyślnie samego Component – eksportuje natomiast cały obiekt React jako default. To jest bardzo częsty błąd: niektórzy myślą, że każdy element biblioteki można zaimportować domyślnie, ale akurat Component jest eksportem nazwanym. Moim zdaniem źródłem tych nieporozumień są niedokładne przykłady w sieci albo powierzchowna znajomość standardów ES6. Warto pamiętać, że składnia importów jest ściśle określona i każde odstępstwo kończy się błędem kompilacji albo nieprzewidywalnym działaniem aplikacji. Dobra praktyka to zawsze sprawdzać dokumentację konkretnej biblioteki, bo różne moduły mogą mieć różne rodzaje eksportów i nie każdy sposób importu będzie pasował do wszystkiego. W przypadku Reacta, jeśli zależy Ci tylko na Component, zawsze trzeba używać importu nazwanego w klamrach, bo taki jest oficjalny eksport tego kawałka z biblioteki.