Pierwsze kroki: optymalizacja aplikacji React

Chcesz, aby Twoja witryna React była jak najszybsza i jak najbardziej dostępna? Nie musisz szukać dalej.

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 w ekosystemie, które warto rozważyć, aby poprawić wydajność i użyteczność aplikacji.

Z tego przewodnika dowiesz się, jak rozpocząć pracę z aplikacją React. Wszystkie pozostałe przewodniki w tej sekcji będą dotyczyć optymalizacji szybkości lub dostępności aplikacji React.

Dlaczego ten przewodnik jest przydatny?

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 opisują wszystkie te kwestie z perspektywy aplikacji React, w której wymienione są tylko biblioteki, interfejsy API i funkcje specyficzne dla ekosystemu React.

Czego się nauczysz?

Samouczki w tej ścieżce szkoleniowej nie koncentrują się na:

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

Chociaż w razie potrzeby będziemy poruszać oba te zagadnienia, wszystkie przewodniki i ćwiczenia z programowania w tej sekcji będą się skupiać na tworzeniu szybkich i dostępnych witryn React. Z tego powodu wymagana jest podstawowa znajomość Reacta.

Utwórz aplikację React

Create React App (CRA) to najprostszy sposób na rozpoczęcie tworzenia aplikacji React. Zapewnia domyślną konfigurację z wieloma wbudowanymi głównymi funkcjami, w tym systemem kompilacji zawierającym moduł bundler (webpack) i transpilator (Babel).

Aby utworzyć nową aplikację, wystarczy uruchomić w powłoce wiersza poleceń to 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

Poniższy kod pokazuje strukturę katalogów i rzeczywistą stronę internetową nowo uruchomionej aplikacji CRA.

Istnieje wiele plików konfiguracji i skryptów kompilacji, których CRA używa do skonfigurowania procesu kompilacji webpack i Babel, który obejmuje podstawową konfigurację Jest do testowania. Aby ułatwić użytkownikowi pracę, te pliki są ukryte i nie można uzyskać do nich dostępu, dopóki nie wyodrębnisz aplikacji z CRA. Zawsze najlepiej jest unikać wysuwania, ponieważ oznacza to przejęcie wszystkich tych plików konfiguracji jako własnego kodu źródłowego, co może być trudne do zarządzania.

Struktura katalogów nowej aplikacji CRA zawiera tylko pliki, które trzeba zmodyfikować, aby pracować nad aplikacją. Szczegółowe informacje znajdziesz w dokumentacji CRA.

Co dalej?

Wiesz już, jak zacząć tworzyć aplikację React. Teraz dowiedz się, jak poprawić jej wydajność i dostępność, korzystając ze wszystkich przewodników na tej ścieżce szkoleniowej: