Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Reagują kurs dla początkujących, część 1

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called React Crash Course for Beginners.
React Crash Course for Beginners, Part 2

Polish (Polski) translation by Max Benjamin (you can also view the original English article)

W tym tutorialu serii będziemy nurkować prosto przez reagujemy, jak budujemy w pełni działającą aplikację do wyświetlania galerii filmów.

 Uczenie się, jak zbudować aplikację od podstaw-to świetna okazja, aby ćwiczyć, wykorzystując wszystkie kluczowe funkcje zareagować, podczas gdy podnoszenie swoich kwalifikacji. Wszystkie zalecane metody i najlepsze praktyki, które są niezbędne do tworzenia nowoczesnych aplikacji reagować.

 Tworzymy zupełnie nową aplikację reagować z pomocą stworzyć-elastyczny-aplikacja narzędzie opracowane przez Facebook, a także przedstawiono takie zagadnienia, jak reagować w szczegółach:

  • Składniki
  • JSX
  • Rekwizyty
  • Państwo
  • Poprawnie uporządkować swoją aplikację
  • Wykorzystując możliwości ES6 dla nowoczesnych rozwoju aplikacji

Że będziemy budować

 Aby nauka o React więcej zabawy, będziemy budować w pełni działającą aplikację, a nie wprowadzenie wspólnych fragmentów kodu, gdy rozważają nowe aspekty, które reagować będą.

Razem zbudujemy filmu Mojo', aplikacja do wyświetlania galeria dobrego kina. Po zakończeniu, aplikacja będzie pobrać kilka filmów na stronie pobierania, a następnie przesłać do innego po naciśnięciu przycisku.  Wreszcie, można wprowadzić własne nazwy filmów poprzez formularz niestandardowy, który po wysłaniu będzie dynamicznie wstaw nowe kino w galerii.

Finished Movie Mojo App

Wymagania wstępne

Jest to pośredni poziom tutorial, więc będziesz znacznie wygrać, jeśli masz jakieś wstępne wiedzę na następujące tematy:

  • Możliwości ES6, takich jak analogowy funkcje, klasy i moduły.
  • Wiem, że reaguje składniki, rekwizyty i państwo.
  •  Jakieś wrażenia z użytkowania Node.js i npm.
  • Co najmniej podstawowy poziom znajomości języka JavaScript.

 Większość z nich są szczegółowo opisane, jak idziemy razem, ale polecam odświeżyć w danej dziedzinie, jak trzeba.

 Przystępujemy do konfiguracji

 Będziemy używać do tworzenia reagują-aplikacja narzędzie do konfiguracji naszej aplikacji reaguje. Jest to niezwykle prosta w obsłudze i pozwoli nam skupić się na kodowaniu naszą aplikację już teraz, bez konieczności przechodzenia przez skomplikowany proces instalacji.

Korzystanie nowy-elastyczny-aplikacja musi mieć Node.js i ustawić NPM. Można sprawdzić, czy obie są dostępne, wpisując następujące polecenie w oknie wiersza polecenia:

A następnie:

Jeśli oboje nie jest ustawiony, zostanie wyświetlony numer wersji dla każdego.

 Jeżeli musisz zainstalować lub zaktualizować Node.js a potem NPM najprostszym sposobem, aby to pobrać Node.js na oficjalnej stronie internetowej. Node.js w komplecie z NPM, więc nie trzeba wykonać dodatkową instalację.

Aby zainstalować nowy-elastyczny-aplikacji na całym świecie, wpisać w dowolnym wierszu polecenia:

npm instalacji utworzyć - g-reagować app

 Teraz możemy iść do przodu i używać stworzyć-elastyczny-aplikacja na szafot nasza nowa aplikacja reaguje. Będzie również utworzyć folder najwyższego poziomu, aby zawierać pliki projektu. Otwórz okno wiersza polecenia i przejdź do folderu, który chcesz, aby twoja aplikacja (na przykład na pulpicie) i wprowadź następujący:

stworzyć elastyczny-aplikacja Wideo-Mojo

 To zajmie minutę lub tak, aby zakończyć, ale kiedy to się stanie, pojawi się komunikat podobny do tego:

Nowy film-Mojo folderze zostanie utworzony plik o następującej strukturze:

Project file structure

 W folderze src, gdzie można edytować pliki projektu, i gdy przyjdziesz, aby rozwinąć swoją aplikację, będą one związane i dodał do udostępnionego folderu, gotowy do dystrybucji.

Aby zobaczyć na przykładzie aplikacji w przeglądarce, dalej korzystać z mini-serwer www wraz z nowy-elastyczny-aplikacja. Musimy być w folderze projektu, który właśnie stworzył, tak, że w oknie wiersza polecenia wpisz:

dysk cd wideo-Mojo

A następnie:

NPM zacząć

Ta prosta drużyna robi trzy główne rzeczy. To:

  • Skompilować nasz przykład aplikacji reagują.
  • Otwórz nowe okno przeglądarki i pokazać naszą aplikację.
  •  Śledzenie zmian w plikach projektu.

 Po kompilacji, zobaczysz następujący wniosek:

A oto przykład aplikacji działającej w przeglądarce.

Sample app

 Kiedy są robione jakieś zmiany w aplikacji, zostanie ona automatycznie skompilowany i załadowany w oknie przeglądarki. Jest to bardzo fajna cecha tworzyć-elastyczny-aplikacja pomoże ci zaoszczędzić wiele czasu w trakcie tworzenia!

 To także pozwala ci skupić się na programowaniu aplikacji, nie odrywając się na to, aby ręcznie ponownie skompilować i stale aktualizować okno przeglądarki, aby zobaczyć najnowsze zmiany.

Chyba najlepszy workflow, jeśli masz dostępną przestrzeń ekranu, aby przeglądarka i edytor tekstu otwórz obok siebie. W ten sposób, po wprowadzeniu zmian w jednym z plików projektu, można zobaczyć zmiany niemal natychmiast pojawia się w oknie przeglądarki.

Spróbujmy zrobić zmiany w nasz projekt.

Wewnątrz folder src, otworzyć App.js w swoim edytorze tekstu. Spróbuj zmienić linię:

 Aby rozpocząć edycję src/App.js i zapisać ponownie.

do:

 Witamy w 'kinie Mojo' aplikacja reaguje!

Jak tylko zapisz zmiany, aplikacje reagują automatycznie ponownie skompilował i okno przeglądarki zostanie odświeżona. Jeśli jesteś przestawiłem miejsca pracy, jak sugerowano wcześniej, to zobaczysz, jak tam jest.

Updated sample app

Organizacja Nasza Aplikacja

 Stwórzmy strukturę naszej aplikacji, który będziemy używać do pozostałej części tego podręcznika.

 Stworzyć elastyczny-narzędzie aplikacja robi wielką pracę na montaż naszą aplikację, ale wciąż mamy szansę, aby dostosować go do swoich potrzeb.

 Po pierwsze, pozwala pozbyć się plików już nie chcę z naszego katalogu src. Nie potrzebujemy pracownicy serwisu w naszej aplikacji, aby usunąć registerServiceWorker.js plik.  To jest link do index.js, aby otworzyć go w edytorze i usunąć wszystkie linki, więc wygląda to tak:

 Dalej, usunąć logo.SVG plik i edytować App.js aby usunąć linki do niego. Twój zaktualizowany plik powinien wyglądać następująco:

 Możemy również pozbyć się App.test.js plik. To zostawi nam następujące pliki w src:

  • index.js
  • indeks.SSG
  • App.js
  • Aplikacja.SSG

 Będziemy tworzyć kilku składników, więc stwórzmy osobny folder do przechowywania ich wszystkich. Wewnątrz src utwórz nowy folder składniki i dodać App.js plik do niego. Nasza aplikacja nie będzie poprawnie skompilować, podczas gdy odświeżymy kilka linków.

W index.js zaktualizuj drogę do importu :

I w App.js zaktualizować drodze do aplikacji.Zus:

 Zapisz zmiany i sprawdź, czy twoja aplikacja z powodzeniem ponownych kompilacji.

 Teraz jesteśmy prawie gotowi przystąpić do pisania kodu naszej aplikacji kino Mojo'. Po pierwsze, mimo, przedstawmy się z tym, jak nasza aplikacja oglądania.

 Spójrz na index.js. Jest to plik, który właściwie sprawia, że nasze aplikacje do domu. Czyni to poprzez ReactDom.metoda render (), która przyjmuje dwa argumenty.  Pierwszy argument to składnik chcemy zaoferować. W naszym przypadku jest to składnik, który jest top-tier (i na razie jedynym) składnikiem w naszej aplikacji.

Drugi argument określa docelowy DOM-element, który chcemy zamontować nasza aplikacja reaguje. Domyślnie, 'tworzenie-elastyczny-aplikacja tworzy ten element automatycznie.  Jeśli spojrzeć wewnątrz folderu, jest index.html który zawiera element o identyfikatorze root.

 Można to zmienić, aby być wszystko, co chcesz, ale to jest w porządku, aby pozostawić domyślne dla tego kursu.

 index.js obciążenia w naszej od App.js i będziemy oglądać razem z tym szablonem konstrukcji poprzez oddzielenie każdego składnika zawartego w naszą aplikację na swój własny plik.

 App.js będzie nasz główny składnik, który zawiera inne składniki, które, z kolei, może zawierać linki do innych składników. Myślę składników, jak istoty podobne tagi HTML, gdzie masz top-tier element, który może zawierać jeden lub więcej elementów , który z kolei może zawierać znacznik element menu, i tak dalej.

Wnioski

 Ten poradnik zawiera wszystkie podstawowe, niezbędne, aby zainstalować naszą aplikację reaguje.  Za pomocą create-elastyczny-aplikacja czyni go niezwykle łatwo zbudować działający przykład aplikacji wszystkie konfiguracje są przetwarzane dla nas. Potem będziemy zmieniali ustawienia domyślne, aby zaspokoić nasze potrzeby.

Zostańcie z nami do części 2, gdzie zaczniemy tworzyć komponenty do aplikacji nasz film Mojo i spójrz na dodawanie rekwizyty, aby nasze składniki dynamiczny!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.