PRDXN React Best Practices

React Facebooka to deklaratywna, wydajna i elastyczna biblioteka JavaScript do tworzenia interfejsów użytkownika (UI).

Kiedy po raz pierwszy zacząłem pisać kod w React, pamiętam, że widziałem wiele różnych podejść, różniących się znacznie od tutoriala do tutoriala. Więc mój zespół z PRDXN i ja opracowaliśmy przewodnik / listę najlepszych praktyk (BP), które pomogłyby nam wszystkim przyspieszyć i przyspieszyć.

React Facebooka to deklaratywna, wydajna i elastyczna biblioteka JavaScript do tworzenia interfejsów użytkownika (UI).

Oto nasz przewodnik. Mamy nadzieję, że pomoże to przyspieszyć przyjęcie i wykorzystanie React; czy dopiero zaczynasz / jesteś początkującym czy doświadczonym programistą.

1. Utrzymaj uporządkowaną strukturę folderów:

Jak w przypadku każdego projektu programowania / kodowania, jest to bardzo ważne! Jeśli pliki projektu nie są zorganizowane logicznie, Ty i Twoi współpracownicy możecie się zdezorientować i tracić cenny czas na wyszukiwanie plików lub edytowanie niewłaściwych plików.

W PRDXN opracowaliśmy następującą strukturę folderów, aby wszystko było łatwiejsze i mniej frustrujące dla wszystkich. Kliknij Odtwórz, aby obejrzeć.

2. Komponenty - kawałki i drzewa. Hej, jesteś drwalem Javascript!

Komponenty są sercem React. Składnik React to w zasadzie dowolna część interfejsu użytkownika.

Utwórz logiczne porcje interfejsu użytkownika (grupy): Zawsze dziel swoje komponenty na porcje (inaczej logiczne grupy). Rozważ dowolny interfejs aplikacji i zacznij dzielić interfejs użytkownika na mniejsze logiczne części. Każda z tych części (grup) interfejsu użytkownika jest potencjalnymi składnikami.

Drzewo, gałęzie i gałęzie: Pełny / pełny widok interfejsu użytkownika (drzewa lub pnia) jest podzielony na logiczne części (inaczej gałęzie). Drzewo staje się komponentem początkowym (komponentem układu), a następnie każda porcja w interfejsie użytkownika (inaczej gałąź) stanie się podkomponentem, który można dalej podzielić na podkomponenty (inaczej gałęzie). Dzięki temu interfejs użytkownika jest uporządkowany, a zmiany danych i stanu mogą logicznie przepływać z drzewa do gałęzi, a następnie do gałęzi podrzędnych.

Twórz logiczne zgrupowania interfejsu użytkownika (fragmenty): drzewo, gałęzie, gałęzie!

3. Komponenty - funkcjonalne i oparte na klasach:

Istnieją dwa rodzaje komponentów: funkcjonalne i oparte na klasach.

Kiedy powinienem wybrać komponent funkcjonalny? Wybierz komponent funkcjonalny, jeśli ten komponent nie robi nic więcej niż renderowanie rekwizytów. Pomyśl o składnikach funkcjonalnych jako funkcjach czystych: zawsze będą renderować w ten sam sposób i zachowują się w ten sam sposób, biorąc pod uwagę te same rekwizyty. Nie dbają też o metody cyklu życia; są bezpaństwowcami.

Składnik funkcjonalny, przykład.

Kiedy powinienem wybrać komponent oparty na klasach? Jeśli twój komponent potrzebuje wewnętrznych metod i metod cyklu życia komponentu, wybierz komponent oparty na klasie. Sprawdź to, aby lepiej zrozumieć „stan wewnętrzny” i „metody cyklu życia”.

Komponent oparty na klasach, przykład.

4. Rekwizyty! Podpory dla ciebie! Podpory dla mnie! Ale nie, mówimy o React Props!

„Pod względem koncepcyjnym komponenty są jak funkcje JavaScript. Akceptują dowolne dane wejściowe (zwane „rekwizytami”) i zwracają elementy React opisujące, co powinno pojawić się na ekranie. ”Kliknij, aby uzyskać źródło.

Przynieś wielbłądy! Nie, możesz zostawić te wielbłądy na deser. Mówimy tutaj o camelCase. Zawsze używaj camelCase do nazw prop. Rekwizyty mogą być również postrzegane jako atrybuty, a konwencją ustanowioną przez React jest użycie camelCase dla atrybutów JSX.

Zawsze używaj camelCase do nazw prop.

Uwierz mi, to prawda, przysięgam! Pomiń wartość rekwizytu, gdy jest to jawnie prawdziwe. Nawet jeśli nie przypisujemy prawdziwej wartości do rekwizytu, jest to uważane za prawdziwą wartość, więc nie ma potrzeby przypisywania „prawdziwej” jako wartości do rekwizytu.

Pomiń wartość rekwizytu, gdy jest to jawnie prawdziwe.

Unikaj używania indeksu tablicy jako klucza prop; zamiast tego użyj unikalnego identyfikatora: Widzieliśmy zbyt wielu programistów, którzy używają indeksu elementu jako jego klucza podczas wyświetlania listy, co NIE jest dobre! Oto co nieprawidłowo piszą…

TO PRZYKŁAD CZEGO POWINIENEŚ *** NIE *** ZROBIĆ!

Klucz jest jedyną rzeczą, której React używa do identyfikacji elementów DOM. Co się stanie, jeśli wypchniesz element na listę lub usuniesz coś ze środka? Jeśli klucz jest taki sam jak poprzednio, React zakłada, że ​​element DOM reprezentuje ten sam zestaw komponentów (jak poprzednio). Ale tak nie jest!

Dlatego powinieneś użyć unikalnego identyfikatora. Każdy element powinien mieć stałą i unikalną właściwość (identyfikator). I idealnie (identyfikator) powinien być przypisany podczas tworzenia elementu. Więc jest napisane coś takiego…

TO PRZYKŁAD TO, CO POWINIENEŚ *** ZROBIĆ!

Zawsze definiuj jawne defaultProps dla wszystkich niewymaganych rekwizytów. Dostarczenie defaultProps oznacza, że ​​czytelnik twojego kodu nie musi zakładać różnych rzeczy, ponieważ znają domyślną wartość prop, po prostu patrząc na defaultProps podczas renderowania komponentów.

Zły vs Dobry przykład ponownie: definiowanie defaultProps.

Jak widać, istnieją małe, ale bardzo ważne rzeczy, które sprawiają, że kod React jest stosunkowo wolny od błędów podczas procesu sprawdzania. Poświęcenie czasu z góry na zapoznanie się z tymi najlepszymi praktykami i korzystanie z nich oznacza, że ​​spędzasz mniej czasu na przepisywaniu kodu w celu naprawy błędów, co daje więcej czasu na robienie rzeczy, które kochasz. A jeśli robienie rzeczy, które kochasz, oznacza pisanie kodu, będziesz mieć więcej czasu na napisanie kodu dla innego projektu!

Więcej najlepszych praktyk React PRDXN można znaleźć tutaj na Github: https://github.com/prdxn/React-JS-Checklist. Udostępnij i dodaj do tej listy. A jeśli masz jakiekolwiek problemy z dostępem, uderz nas w komentarzach tutaj.

Chcesz pracować z PRDXN jako klient lub pracownik? Więc uderz nas! Przejdź na stronę www.prdxn.com, aby uzyskać dodatkowe informacje, w tym dane kontaktowe.