Wymagania

• Węzeł i IDE zainstalowane na twoim komputerze.

React to otwarta, front-endowa biblioteka JavaScript, która została stworzona przez Facebooka w 2013 roku. React jest jedną z najlepszych bibliotek JavaScript, która sprawia, że ​​aplikacje internetowe są szybsze i wydajne przy minimalnym kodowaniu.

W tym artykule wyjaśnimy podstawy React i jak stworzyć aplikację React.

Dlaczego zareagować? ❗️ ❗️

• Łatwiejsze do nauczenia — ponieważ React jest znany i używany przez wiele branż, istnieje wiele dobrych dokumentacji, blogów, artykułów i samouczków na temat React. Więc łatwiej jest się nauczyć.
• Posiadanie JSX - JSX to połączenie HTML i JavaScript, co znacznie ułatwia kodowanie.
• Komponenty wielokrotnego użytku - W React możemy rozbić nasz kod na komponenty o mniejszych rozmiarach i ponownie ich użyć. Pomoże to zredukować bazę kodu.

Musisz mieć Node >= 10.16 i npm >= 5.6 na swoim komputerze.

Następnie otwórz wiersz poleceń (CLI) i zainstaluj create-react-app na swoim komputerze globalnie, używając:

npm install -g create-react-app

Teraz, aby stworzyć aplikację React, tworzę folder o nazwie „First React” i otwieram terminal w tym folderze. Następnie wpisz create-react-app <project name> terminal. Jako nazwę projektu możesz podać dowolną nazwę. Ale upewnij się, że nazwa projektu nie zawiera dużej litery, w przeciwnym razie reakcja spowoduje wyświetlenie błędu.

To create -react-app stworzy szablon aplikacji React.

Możesz także użyć bezpośrednio create-react-app bez jej instalowania. Użyj może użyć poniższego polecenia:

npx create-react-app <project name>

npx to polecenie uruchamiające pakiet zawarte w npm.

Teraz musimy przejść do katalogu projektu. Rodzajcd <project name>

Następnie uruchom aplikację typu Reactnpm start

Ponieważ create-react-app tworzy przykładowy szablon, możemy uruchomić i wyświetlić przykładową aplikację.

Po pomyślnym uruchomieniu projektu otrzymasz coś takiego. Automatycznie uruchomi aplikację React w przeglądarce lub możesz ręcznie wpisać http://localhost:3000/ w przeglądarce, aby otworzyć aplikację.

Krótkie wyjaśnienie katalogu projektu

Jeśli używasz VSCode, po prostu wpisz code . w katalogu projektu, aby otworzyć projekt w VSCode.

package.json — ten plik zawiera zależności i skrypty wymagane dla projektu.

package-lock.json - Zapewnia to spójną instalację naszych zależności

.gitignore - Pliki, które musimy zignorować podczas dodawania projektu do GitHub. Możemy również ręcznie dodać pliki, których nie chcemy dodawać do GitHub.

README.md - Szczegóły dotyczące aplikacji React (jak uruchomić, zbudować itp.)

node_modules - Wszystkie nasze zależności, które są zainstalowane.

public - ikony i obrazki użyte w przykładowym szablonie React, index.html - Jedyna strona HTML w projekcie.

src - folder, którego najczęściej używamy do rozwoju.

i ndex.js — określ główny komponent (aplikację) i element DOM. Jest to związane z index.html, który widzieliśmy wcześniej

App.js — odpowiada za kod HTML wyświetlany w przeglądarce. Reprezentuj widok, który widzimy w przeglądarce.

Pliki CSS — zawierają projekty CSS.

Podstawowe pojęcia, które musisz znać

JSX

JSX to składnia podobna do XML/HTML. który dodaje składnię XML/HTML do JavaScript.

Składnik

W aplikacji React głównymi elementami budulcowymi są komponenty. Grupa komponentów tworzy projekt React.

Tutaj możesz zobaczyć, że ta pojedyncza strona jest tworzona przy użyciu 5 komponentów. (Nagłówek świata, kraj, wykres i stopka). Możemy również ponownie wykorzystać nagłówek i stopkę na innych stronach.

Istnieją 2 rodzaje komponentów.

• Składnik klasy
• Komponent funkcjonalny

Rekwizyty są niezmienne, co jest sposobem na zdynamizowanie komponentów poprzez przekazywanie właściwości/danych z jednego komponentu do drugiego. Jest to po prostu przekazywanie pewnych informacji przez komponent nadrzędny do komponentu potomnego.

Państwo

Stan jest zmienną w każdym komponencie klasy, która ma możliwość dynamicznego przechowywania informacji i jest przez niego kontrolowana. To jest prywatne dla tego jednego komponentu.

Referencje

• https://reactjs.org/docs/create-a-new-react-app.html