Chcesz, aby Twoja strona React była szybsza i bardziej dostępna? Nie musisz szukać dalej.
React to biblioteka open source, która ułatwia tworzenie interfejsów użytkownika. W tej ścieżce szkoleniowej omówimy różne interfejsy API i narzędzia w ekosystemie, z których możesz korzystać, aby zwiększyć wydajność i przydatność swojej aplikacji.
Z tego przewodnika dowiesz się, jak zacząć korzystać z aplikacji React. Każdy z pozostałych przewodników w tej sekcji będzie zawierał tematy związane z optymalizacją szybkości i dostępności aplikacji React.
Dlaczego to takie przydatne?
Dostępnych jest sporo materiałów wyjaśniających, jak tworzyć szybkie i niezawodne aplikacje, ale niewiele zawiera instrukcje tworzenia szybkich i niezawodnych aplikacji React. Te przewodniki omawiają wszystko z perspektywy aplikacji React, w której wymienione są tylko biblioteki, interfejsy API i funkcje charakterystyczne dla ekosystemu React.
Czego się nauczysz?
Samouczki nie skupiają się na:
- Jak używać React
- Jak działa React
Chociaż omówimy je w razie potrzeby, we wszystkich przewodnikach i ćwiczeniach z programowania w tej sekcji skupimy się na tworzeniu szybkich i przystępnych witryn React. Z tego powodu niezbędna jest podstawowa wiedza o React.
Utwórz aplikację React
Najprostszym sposobem na rozpoczęcie tworzenia aplikacji React jest Create React App (CRA). Jest to domyślna konfiguracja zawierająca szereg podstawowych funkcji, w tym system kompilacji zawierający narzędzie do tworzenia pakietów modułów (webpack) i transpilator (Babel).
Aby utworzyć nową aplikację w powłoce wiersza poleceń, wystarczy uruchomić następujące polecenie:
npx create-react-app app-name
Po zakończeniu wykonywania polecenia możesz przejść do aplikacji i uruchomić ją za pomocą tych poleceń:
cd new-app
npm start
W poniższym przykładzie do umieszczenia na stronie widoczna jest struktura katalogów i faktyczna strona internetowa nowo uruchomionej aplikacji CRA.
Istnieje wiele plików konfiguracji i skryptów kompilacji, których używa CRA do konfigurowania pakietu internetowego i procesu kompilacji Babel, który obejmuje podstawową konfigurację Jest do testowania. Aby ułatwić użytkownikowi korzystanie z tej funkcji, pliki te są ukryte i nie można uzyskać do nich dostępu, dopóki nie usuniesz ich z komponentu CRA. Zawsze najlepiej unikać wyrzucania, ponieważ oznacza to przyjęcie wszystkich tych plików konfiguracji jako własnego kodu źródłowego, co może być trudne w zarządzaniu.
Struktura katalogów nowej aplikacji CRA zawiera tylko pliki, które trzeba zmodyfikować, aby działać w tej aplikacji. Szczegółowo wyjaśnia to dokumentacja CRA.
Co dalej?
Gdy już wiesz, jak zacząć tworzyć aplikację Create React, zapoznaj się ze wszystkimi przewodnikami na tej ścieżce szkoleniowej, aby dowiedzieć się, jak poprawić wydajność i ułatwienia dostępu w swojej aplikacji:
- Podział kodu za pomocą systemu React.lazy i Susense
- Wirtualizowanie dużych list za pomocą okna reakcji
- Precyzja w przypadku tworzenia aplikacji React z Workbox
- Renderowanie wstępnie tras za pomocą funkcji przyciągania reakcji
- Dodawanie pliku manifestu aplikacji internetowej za pomocą narzędzia Create React App
- Kontrola ułatwień dostępu z zastosowaniem reakcji axe i eslint-plugin-jsx-a11y