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.

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 przewodnikach w tej sekcji znajdziesz informacje o optymalizacji szybkości i dostępności aplikacji React.

Istnieje wiele treści wyjaśniających, jak tworzyć szybkie i niezawodne aplikacje, ale niewiele z nich pokazuje, jak tworzyć szybkie i niezawodne aplikacje w React. Te przewodniki obejmują te zagadnienia z perspektywy aplikacji React, w których omawiane są tylko biblioteki, interfejsy API i funkcje specyficzne dla ekosystemu React.

Czego się nauczysz?

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

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

W razie potrzeby omówimy oba te zagadnienia, ale wszystkie przewodniki i laboratoria programistyczne w tej sekcji będą się koncentrować na tworzeniu szybkich i dostępnych witryn React. Z tego powodu wymagana jest podstawowa wiedza o React.

Create React App

Create React App (CRA) to najprostszy sposób na rozpoczęcie tworzenia aplikacji React. Udostępnia domyślną konfigurację z kilkoma podstawowymi funkcjami, w tym systemem kompilacji zawierającym moduł agregatora (webpack) i kompilator (Babel).

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

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.

CRA używa wielu plików konfiguracji i skryptów kompilacji, aby skonfigurować proces kompilacji webpack i Babel, który obejmuje 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 dysku z płytowego napędu optycznego. 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?

Teraz, gdy już wiesz, jak zacząć tworzyć aplikację za pomocą Create React App, dowiedz się, jak poprawić wydajność i dostępność aplikacji za pomocą wszystkich przewodników na tej ścieżce edukacyjnej: