Pierwsze kroki: zoptymalizuj aplikację React

Chcesz, aby Twoja witryna React była jak najszybsza i jak najbardziej dostępna? Jesteś we właściwym miejscu.

Houssein Djirdeh

React to biblioteka open source, która ułatwia tworzenie interfejsów użytkownika. Ta ścieżka szkoleniowa obejmuje różne interfejsy API i narzędzia z ekosystemu, których warto używać, aby poprawić wydajność i użyteczność aplikacji.

Z tego przewodnika dowiesz się, jak zacząć korzystać z aplikacji React. W pozostałych przewodniku w tej sekcji omawiamy tematy pozwalające zoptymalizować szybkość i ułatwienia dostępu w aplikacji React.

Dlaczego to jest przydatne?

Istnieje wiele treści wyjaśniających, jak tworzyć szybkie i niezawodne aplikacje, ale niewiele z nich pokazuje, jak tworzyć szybkie i niezawodne aplikacje React. Te przewodniki omawiają to wszystko z perspektywy aplikacji React, w której wymienione są tylko biblioteki, interfejsy API i funkcje charakterystyczne dla ekosystemu React.

Czego się nauczysz?

W samouczkach na tej ścieżce szkoleniowej nie omawiamy:

  • Jak korzystać z React
  • Jak działa React

Chociaż w razie potrzeby będziemy się o tym wspominać, wszystkie przewodniki i ćwiczenia z programowania w tej sekcji skupią się na tworzeniu szybkich i łatwo dostępnych stron React. Z tego powodu wymagana jest podstawowa wiedza o React.

Utwórz aplikację React

Create React App (CRA) to najprostszy sposób na rozpoczęcie tworzenia aplikacji React. Jest to domyślna konfiguracja z wieloma kluczowymi funkcjami, w tym systemem kompilacji zawierającym pakiet modułów (webpack) i transpiler (Babel).

Wystarczy uruchomić to polecenie w powłoce wiersza poleceń, aby utworzyć nową aplikację:

npx create-react-app app-name

Po wykonaniu polecenia możesz przejść do aplikacji i uruchomić ją za pomocą tych poleceń:

cd new-app
npm start

Ten element wbudowany pokazuje strukturę katalogów i rzeczywistą stronę internetową nowo utworzonej aplikacji CRA.

Istnieje wiele plików konfiguracji i skryptów, których CRA używa do skonfigurowania pakietu internetowego i procesu kompilacji Babel obejmującego podstawową konfigurację Jest na potrzeby testowania. Aby ułatwić użytkownikowi korzystanie z tych funkcji, pliki są ukryte i nie można uzyskać do nich dostępu, dopóki nie wyjmiesz ich z CRA. W miarę możliwości należy unikać wyjmowania, ponieważ oznacza to przejęcie wszystkich tych plików konfiguracji jako własnego kodu źródłowego, którym trudno jest zarządzać.

Struktura katalogów nowej aplikacji CRA zawiera tylko te pliki, które musisz zmodyfikować, aby móc pracować nad aplikacją. Szczegółowe informacje na ten temat znajdziesz w dokumentacji CRA.

Co dalej?

Wiesz już, jak zacząć tworzyć aplikację Create React, dlatego zapoznaj się ze wszystkimi przewodnikami z tej ścieżki szkoleniowej, aby dowiedzieć się, jak poprawić wydajność i dostępność aplikacji: