1 00:00:02,240 --> 00:00:08,750 To było dużo wstępu do React Native i expo, ale uważam, że ważne jest, aby 2 00:00:08,750 --> 00:00:11,540 zrozumieć, z czym pracujesz, zanim zaczniesz. 3 00:00:11,540 --> 00:00:18,470 Teraz jednak czas zacząć, a po to, odwiedź expo. io. Tam możesz kliknąć 4 00:00:18,470 --> 00:00:22,020 przycisk Rozpocznij, a znajdziesz kroki startowe tutaj. 5 00:00:22,190 --> 00:00:24,290 Teraz tak naprawdę nie potrzebujesz tego pierwszego 6 00:00:24,290 --> 00:00:30,920 kroku, możemy przejść od razu do kroku drugiego, czyli że potrzebujesz NodeJS. Teraz potrzebujesz NodeJS, który jest środowiskiem wykonawczym JavaScript, który pozwala na 7 00:00:30,920 --> 00:00:36,800 przykład tworzyć aplikacje po stronie serwera za pomocą Javascript. Nie potrzebujesz tego, ponieważ mamy zamiar napisać 8 00:00:36,800 --> 00:00:39,980 dowolny kod NodeJS w tym kursie, to nie 9 00:00:39,980 --> 00:00:41,020 jest kurs 10 00:00:41,030 --> 00:00:42,550 Node, nie martw 11 00:00:42,590 --> 00:00:50,750 się, nie musisz znać NodeJS, ale jest to pakiet, który pozwala nam uruchomić Javascript na naszej maszynie i na przykład 12 00:00:50,750 --> 00:00:54,680 klient expo za kulisami działa również w JavaScript, nie jest 13 00:00:54,680 --> 00:00:57,410 to całkowicie związane z React Native, tylko 14 00:00:57,410 --> 00:01:00,100 po to, aby to narzędzie działało poprawnie. 15 00:01:00,230 --> 00:01:05,050 Również dla tego polecenia, aby zainstalować narzędzie, npm, jest to Menedżer pakietów 16 00:01:05,150 --> 00:01:08,320 węzłów, który jest również udostępniony przez NodeJS. 17 00:01:08,330 --> 00:01:14,300 Pierwszym krokiem jest odwiedzenie nodejs. org i tam pobierz 18 00:01:14,300 --> 00:01:20,300 najnowszą wersję, w moim przypadku 12. 6 stamtąd, aby rozpocząć i bez względu na to, jaka 19 00:01:20,300 --> 00:01:22,840 jest najnowsza wersja, gdy ją przeglądasz, po prostu 20 00:01:22,880 --> 00:01:28,080 pobierz tę wersję, zainstaluj ją, daje to normalny instalator, do którego możesz przejść, klikając wszystkie te 21 00:01:28,100 --> 00:01:29,420 kroki, nic nadzwyczajnego. 22 00:01:29,420 --> 00:01:32,220 Jest dostępny dla systemów MacOS oraz Windows i Linux. 23 00:01:32,270 --> 00:01:38,330 Więc po prostu pobierz go tutaj, przejdź przez instalator, a po zainstalowaniu możesz przejść do tego 24 00:01:38,330 --> 00:01:39,760 trzeciego kroku tutaj. 25 00:01:39,830 --> 00:01:46,130 Więc po zainstalowaniu NodeJS, skopiujmy to polecenie tutaj, a następnie otwórzmy normalny terminal lub w systemie 26 00:01:46,130 --> 00:01:49,770 Windows, wiersz polecenia i wklejmy to polecenie tutaj. 27 00:01:49,790 --> 00:01:54,530 Teraz na Macu i Linuksie może być konieczne dodanie sudo przed tym, w systemie 28 00:01:54,530 --> 00:01:57,820 Windows nie będzie to wymagane, aby uzyskać odpowiednie uprawnienia. 29 00:01:57,830 --> 00:01:59,090 Więc tutaj go 30 00:01:59,120 --> 00:02:03,630 wprowadzę, wtedy możesz zostać poproszony o podanie hasła, po prostu wpisz je, jeśli 31 00:02:03,740 --> 00:02:09,290 tak, a teraz zainstaluje CLI expo, które jest tym narzędziem, które pomaga nam tworzyć projekty React 32 00:02:09,290 --> 00:02:15,080 Native i zarządzać nimi za pomocą expo globalnie na komputerze, dzięki czemu można go używać z dowolnego 33 00:02:15,230 --> 00:02:16,280 miejsca na 34 00:02:16,280 --> 00:02:19,190 komputerze, a więc z dowolnego miejsca w terminalu. 35 00:02:19,280 --> 00:02:21,540 Poczekajmy więc na zakończenie tej instalacji, 36 00:02:21,560 --> 00:02:26,180 możesz zignorować wszelkie ostrzeżenia, które mogą się pojawiać pomiędzy, a ja wrócę 37 00:02:26,180 --> 00:02:27,470 po zakończeniu instalacji. 38 00:02:27,560 --> 00:02:33,170 Nawiasem mówiąc, możesz tutaj również zignorować takie błędy pośrednie, dopóki ogólnie nie zawiedzie się z 39 00:02:33,170 --> 00:02:35,990 błędem, ale zakończy się komunikatem takim jak 40 00:02:35,990 --> 00:02:38,030 ten, w końcu się udało. 41 00:02:38,030 --> 00:02:43,760 Dzięki temu mamy zainstalowany Expo CLI, następnym krokiem jest stworzenie naszego projektu, więc krok czwarty 42 00:02:43,760 --> 00:02:44,510 tutaj. 43 00:02:44,510 --> 00:02:46,280 Robimy to, uruchamiając expo init, 44 00:02:46,340 --> 00:02:52,250 a następnie dowolną nazwę wybranego projektu, a przede wszystkim upewnij się, że używasz polecenia cd, aby przejść do 45 00:02:52,310 --> 00:02:58,890 folderu tutaj na komputerze, na którym chcesz utworzyć ten projekt. Zrobiłem to tutaj, jestem w tym folderze i 46 00:02:58,890 --> 00:03:04,440 teraz mogę uruchomić program expo i nadam nazwę aplikacji rn-first-app, ponieważ jest to w 47 00:03:04,440 --> 00:03:09,870 końcu nasza pierwsza aplikacja React Native. Po prostu wciśnij Enter, ta nazwa oczywiście zależy od 48 00:03:09,870 --> 00:03:11,250 ciebie, co masz 49 00:03:11,250 --> 00:03:16,530 tutaj, a to utworzy nowy folder w miejscu, w którym uruchomiłeś to polecenie i skonfigurujesz tam 50 00:03:16,800 --> 00:03:18,810 aplikację React Native za pomocą expo. 51 00:03:18,900 --> 00:03:22,290 Teraz prawdopodobnie zapytano Cię, którego szablonu chcesz użyć, i 52 00:03:22,350 --> 00:03:25,480 na razie możesz przejść do pustego szablonu. 53 00:03:25,560 --> 00:03:32,700 Upewnij się, że nie wybierasz absolutnego minimum, ponieważ byłaby to konfiguracja bez środowiska expo ze 54 00:03:32,700 --> 00:03:34,060 wszystkimi funkcjami 55 00:03:34,080 --> 00:03:36,570 wygody, więc zdecydowanie wybierz puste. 56 00:03:36,570 --> 00:03:42,570 Teraz prawdopodobnie zostaniesz poproszony o podanie nazwy swojej aplikacji, a ja po prostu wpiszę tutaj rn-first-app, 57 00:03:42,570 --> 00:03:47,770 to w końcu nazwa wyświetlana w przełączniku zadań aplikacji na ekranie głównym i 58 00:03:47,770 --> 00:03:48,540 wkrótce. 59 00:03:48,570 --> 00:03:52,130 Możesz zostawić ślimaka takim, jakim jest i po prostu ponownie nacisnąć 60 00:03:52,140 --> 00:03:58,650 Enter, teraz ja też używam przędzy na mojej maszynie, która jest alternatywą dla npm, możesz nie zostać zapytany, czy chcesz 61 00:03:58,650 --> 00:04:00,780 użyć przędzy, która jest całkowicie w 62 00:04:00,780 --> 00:04:03,210 porządku, zrobię to także tutaj wybierz opcję 63 00:04:03,390 --> 00:04:08,550 nie, aby użyć npm, a zatem teraz to zrobimy, utwórz ten folder projektu, zainstaluj tam wszystkie 64 00:04:08,550 --> 00:04:14,970 wymagane zależności, takie jak React i React Native, i daj nam projekt React Native, którego możemy użyć do zbudowania aplikacji 65 00:04:14,970 --> 00:04:15,330 natywnej. 66 00:04:15,570 --> 00:04:17,960 Poczekajmy więc na zakończenie. 67 00:04:17,970 --> 00:04:23,610 Teraz, gdy zakończy się, zobaczysz tutaj kolejne instrukcje. Możesz przejść do nowo utworzonego folderu za 68 00:04:23,610 --> 00:04:31,230 pomocą polecenia cd, a następnie tam, po prostu uruchom npm start. Start Npm uruchomi teraz narzędzie do 69 00:04:31,230 --> 00:04:38,410 tworzenia expo, narzędzia do tworzenia expo i nowa karta powinny otworzyć się w przeglądarce. 70 00:04:38,570 --> 00:04:43,420 Oto ta karta, która się otworzyła. Jeśli masz jakieś problemy, możesz zignorować to 71 00:04:43,550 --> 00:04:49,070 na razie, tutaj jest narzędzie do tworzenia expo lub narzędzia do tworzenia expo, jak się nazywa. 72 00:04:49,280 --> 00:04:55,610 Jest to okno, które pozwala uruchamiać aplikację na różnych podłączonych urządzeniach lub dodawać symulatory i pozwala ogólnie 73 00:04:55,760 --> 00:05:00,740 zarządzać częściami aplikacji, widzisz tutaj dane wyjściowe z aplikacji, niektóre ostrzeżenia, które możesz 74 00:05:00,740 --> 00:05:02,650 otrzymywać, a to jest 75 00:05:02,750 --> 00:05:09,200 bardzo wygodne okno do zarządzania aplikacją i uruchamiania aplikacji. Teraz upewnij się również, że 76 00:05:09,210 --> 00:05:15,780 tutaj, w terminalu, w którym uruchomiłeś npm start, pozostawisz ten proces uruchomiony. 77 00:05:15,810 --> 00:05:21,000 Możesz zobaczyć, że się nie skończył, nie widzisz ponownie tego wiersza wprowadzania, w którym możesz wpisywać 78 00:05:21,630 --> 00:05:27,630 polecenia, zamiast tego tutaj nie możesz pisać lub możesz nacisnąć niektóre skróty, które tu widzisz, ale nie możesz pisać 79 00:05:27,630 --> 00:05:28,500 nowe polecenia. 80 00:05:28,500 --> 00:05:33,960 Zawsze możesz wyjść z tego procesu, naciskając jednocześnie klawisze C i C, ale powinieneś pozostawić 81 00:05:33,960 --> 00:05:37,640 ten proces działający tak długo, jak pracujesz nad projektem, 82 00:05:37,740 --> 00:05:42,660 a jeśli zakończysz ten dzień, możesz go zakończyć i uruchomić ponownie następnego dnia, 83 00:05:42,660 --> 00:05:47,850 ponieważ proces ten obejrzy również Twój kod i za każdym razem, gdy zmienisz coś w 84 00:05:47,850 --> 00:05:52,530 kodzie i zapiszesz tę zmianę, automatycznie zapisze to i opublikuje na podłączonym urządzeniu. 85 00:05:52,560 --> 00:05:58,680 Ale mówiąc o tym, podłączmy urządzenie i do tego najłatwiejszym sposobem na rozpoczęcie jest 86 00:05:58,680 --> 00:06:01,940 użycie posiadanego iPhone'a lub telefonu z Androidem. 87 00:06:01,950 --> 00:06:08,290 Więc w moim przypadku jest to iPhone, a tu jest mój prawdziwy telefon i jestem w App Store, teraz jest po niemiecku, ponieważ mam 88 00:06:08,290 --> 00:06:12,730 niemiecki telefon, ale to jest normalny App Store. Teraz możesz przejść 89 00:06:12,730 --> 00:06:19,900 do obszaru wyszukiwania i wyszukać expo. Teraz, gdy to zrobisz, powinieneś znaleźć tego klienta expo tutaj i 90 00:06:20,020 --> 00:06:26,680 możesz po prostu pobrać go na swoje urządzenie, jest darmowy. Po prostu zainstaluj go na swoim urządzeniu i oczywiście poczekaj, 91 00:06:26,680 --> 00:06:28,430 aż ta instalacja się 92 00:06:28,450 --> 00:06:30,690 zakończy, a po zakończeniu możesz go otworzyć, 93 00:06:30,700 --> 00:06:37,030 a teraz z zainstalowaną aplikacją expo, nie musisz się tutaj rejestrować, zamiast tego na Androidzie powinieneś być w stanie 94 00:06:37,370 --> 00:06:42,880 aby zeskanować ten kod kreskowy bezpośrednio z aplikacji expo. W systemie iOS wystarczy otworzyć aplikację 95 00:06:42,880 --> 00:06:49,230 aparatu, a następnie możesz przejść do narzędzi programistycznych tutaj, a zobaczysz ten kod kreskowy tutaj, 96 00:06:49,230 --> 00:06:58,190 po prostu przytrzymaj aparat na tym systemie iOS lub skaner aplikacji expo tutaj na Androidzie i powinieneś otrzymać monit czy 97 00:06:58,190 --> 00:07:03,510 chcesz otworzyć aplikację na targach. Po prostu naciśnij i otwórz, a 98 00:07:03,800 --> 00:07:07,730 teraz powinno to otworzyć twoją aplikację tutaj w zainstalowanym kliencie 99 00:07:07,760 --> 00:07:14,810 expo, ponownie bez rejestracji, po prostu trzymając kamerę iPhone'a nad tym kodem kreskowym lub na Androidzie, robiąc to 100 00:07:14,810 --> 00:07:19,350 bezpośrednio z aplikacji expo, w której będziesz mieć ta opcja to zrobić. 101 00:07:19,370 --> 00:07:24,050 Więc teraz zbuduje pakiet JavaScript, jak widać tutaj na dole lub innymi słowy, 102 00:07:24,050 --> 00:07:30,260 to zabierze twoją aplikację i skompiluje ją w zasadzie i przygotuje, a następnie załaduje tutaj na serwery expo 103 00:07:30,320 --> 00:07:36,920 do twojej aplikacji i możesz po prostu nacisnąć mam go tutaj na pierwszym ekranie, a potem jest to twoja początkowa 104 00:07:36,920 --> 00:07:38,130 aplikacja React Native. 105 00:07:38,270 --> 00:07:43,220 A teraz zobaczmy kod tego i zobaczmy, jak możemy coś zmienić w kodzie, aby zobaczyć 106 00:07:43,220 --> 00:07:45,110 coś innego na tym ekranie.