Pierwsze kroki: zoptymalizuj aplikację React

Chcesz, aby Twoja strona z reakcjami była jak szybka i łatwa w obsłudze? Nie musisz szukać dalej.

Houssein Djirdeh

React to biblioteka open source, która ułatwia tworzenie UI. Ta ścieżka szkoleniowa obejmuje różne interfejsy API i narzędzia w ekosystemie, które warto wykorzystać, aby zwiększyć 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?

Jest tam wiele treści, które wyjaśniają, jak tworzyć szybkie i niezawodne aplikacje, ale niewiele mówi o tym, 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?

Samouczki w tej ścieżce szkoleniowej nie dotyczą:

  • 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. Dlatego wymagana jest podstawowa wiedza o React.

Utwórz aplikację React

Utwórz aplikację React (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 zakończeniu wykonywania polecenia możesz przejść do aplikacji i uruchomić ją za pomocą tych poleceń:

cd new-app
npm start

Poniższy fragment przedstawia strukturę katalogów i faktyczną stronę internetową nowo zablokowanej aplikacji CRA.

Istnieje wiele plików konfiguracji i skryptów, których CRA używa do skonfigurowania pakietu internetowego i procesu kompilacji Babel, który obejmuje podstawową konfigurację Jest na potrzeby testowania. Aby ułatwić użytkownikom korzystanie z tych plików, te pliki są ukryte i nie będzie można uzyskać do nich dostępu, dopóki nie usuniesz ich z CRA. Zawsze najlepiej unikać wyrzucania, gdy jest to możliwe, ponieważ wymaga to przyjęcia wszystkich tych plików konfiguracji jako własnego kodu źródłowego, co może utrudniać zarządzanie.

Struktura katalogów nowej aplikacji CRA zawiera tylko te pliki, które rzeczywiście trzeba zmodyfikować, aby pracować nad tą aplikacją. Szczegółowo wyjaśniliśmy to w dokumentacji agencji 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: