Teraz, w tym kursie odświeżającym, moduł Yeater nie napisze złożonej aplikacji reagującej, ponieważ to po prostu nie
jest pomysł tego modułu.
Później w tym kursie po tym module napiszemy realistyczną aplikację w głównym module, w którym będziemy pracować
nad projektem kursu.
Więc to tylko odświeżenie tutaj.
Skupiam się na podstawowych elementach reagujących, Stael, na budowaniu niesamowitej aplikacji, a nie na tworzeniu.
Dlatego w REACT chodzi o komponenty, dlatego zazwyczaj dzielimy naszą aplikację na komponenty.
Teraz zacznijmy jednak bez podziału.
I zamiast wypuszczać tutaj jedną technologię, aplikację, użyję div, powiedzmy w tym div.
Dodajmy więcej kodu html.
Mówię html tutaj, oczywiście, że J to X, ale zostało to jeszcze przetłumaczone na dwie notatki HCM Altidore.
Dobrze.
Ale to J to X.
Więc tutaj możemy mieć H do oznaczenia, gdzie mówimy, że powodują cele, a poniżej, że chcemy mieć listę lub
dodać listę naszych celów kursu.
I są celem.
Możliwe.
Tato, chcemy ukończyć kurs.
Że chcemy dowiedzieć się wszystkiego o kursie.
Główny temat i chcemy, powiedzmy, pomóc.
Nasi studenci w trakcie, CU i.
Część, a może to być trochę złota.
Teraz bardzo trywialna aplikacja.
Teraz nie mam tutaj żadnej specjalnej efektownej stylizacji, dlatego to oszczędzamy i wyciągamy to.
Ale teraz dodam trochę stylizacji i do tego dodam aplikację, plik Searsa tutaj i zaimportuję Deadfall do
pliku JavaScript.
Nie jest to oczywiście możliwe w Manili, JavaScript, ale z tego powodu pod maską narzędzi, które
Nien analizuje nasze pliki, a następnie przekształca kod.
Jest to możliwe i jest to po prostu przekształcane, aby wstrzyknąć ten kod CSX do H.
Plik Timal również.
Teraz tutaj dam C jako klasę.
I jest jedna specjalna rzecz.
Taki atrybut klasy nie istnieje, a J to X, ponieważ klasa jest słowem kluczowym w JavaScript.
To jest nazwa klasy.
I w ten sposób dodajesz klasy siestas do elementów, a J to X.
To wszystko jest oczywiście dowodem lub przypomina wam, że to nie jest H Tim.
Ale H Tim.
Owlish wyglądająca składnia, wszystkie wymienione tutaj jako lista celów klas, a teraz tutaj możemy.
Definiuje tutaj niektóre style dla Gollust, a ja po prostu ustawię listę stylów na non tutaj,
usuń margines lub dam mu margines dwóch górnych i dolnych ram i dopełniania zera.
I do każdego elementu listy bramek dodam margines jednego górnego i dolnego zera jednego pokoju dwa po lewej i prawej stronie,
a następnie po prostu granicę bryły jednego piksela.
A potem ten szarawy kolor i wyściółka jednego barana.
To bardzo, bardzo prosta stylizacja, ponieważ nie chcę spędzać dużo czasu na pisaniu, patrz tutaj jako
style.
Teraz może jedna korekta.
Dajmy liście margines dwóch wstążek we wszystkich kierunkach.
Teraz mamy tę listę naszych celów, aby dostosować cele kursu tutaj na górze.
Ja również.
Nadaj temu d'Hiv nazwę klasy, oczywiście, czaszki.
A potem w D. DO. jako plik US.
Może na samym szczycie uda nam się zablokować bramki i ich d. h, aby oznaczyć do wyrównania w środku.
Właśnie tak.
Znowu bardzo ogromne gole.
Ale tutaj można dyskutować.
Po prostu ćwiczymy reagować.
Mamy więc te cele kursu tutaj.
Niesamowite.
Jest to oczywiście bardzo prosty znacznik.
Teraz, kiedy często reagujesz na to, co robisz, dzieląc to na więcej komponentów, na
przykład outsourcingujesz tę listę do osobnego komponentu, aby każdy komponent pozostawał sam w sobie stosunkowo szczupły i
skoncentrowany na jednym zadaniu.
W tym celu możemy dodać folder sup składników tutaj w folderze źródłowym.
I tam dodam listę celów J. S. Plik.
To pomieści mój komponent listy celów.
Teraz, aby stworzyć taki nowy komponent, musimy przede wszystkim zaimportować, zareagować od zareagować.
W przeciwnym razie nie możemy użyć tego J jako X Syntex.
A potem wspomniałem o martwych.
Składnik jest funkcją.
Nawiasem mówiąc, można również utworzyć za pomocą słowa kluczowego funkcji lub.
Z wyrażeniem funkcyjnym lub.
Dzięki funkcji strzałki wkrótce użyłem wcześniej tekstu, którego użyję w tym przypadku, ale nie
jest to konieczne.
A potem tutaj eksportuję moją listę celów w ten sposób.
A teraz tutaj wracam.
Ta nieuporządkowana lista, sól, wytnij ją tutaj, a następnie dodana, oto wartość zwracana, a
jeśli reforma, zobaczysz automatycznie, że nawiasy są dodawane wokół niej, dzięki czemu można ją ładnie sformatować
w wielu wierszach.
W przeciwnym razie nie byłby to prawidłowy JavaScript.
Podobnie jest w nawiasach.
To dlatego, że JavaScript wie, że ten blok należy do siebie.
Teraz mamy tutaj listę celów i aplikację.
Tak, możemy teraz zaimportować nasz komponent listy celów.
Możesz nazwać go tutaj, jak chcesz.
Nie musi to być ta sama nazwa, pod którą eksportujesz go tutaj.
Jedyną ważną rzeczą jest to, że musi zaczynać się od dużej litery tutaj w Abcess i importu z
folderu komponentów i są one z listy celów.
I jak wspomniałem wcześniej, możesz pominąć D. rozszerzenie pliku tutaj.
To nie jest wymagane.
A potem używasz listy przejść jak zwykłego J. S. Element X, jak zwykły element H tim L, można
powiedzieć.
Ale ponieważ nie mamy treści między tagiem otwierającym i zamykającym, możemy i musimy napisać tutaj tag
samozamykający.
To nie byłoby dozwolone.
Zawsze musisz zamknąć podatek i jazz x.
To byłby teraz mój komponent listy celów.
A zatem, jeśli mamy bezpieczeństwo, widzimy taki sam wynik jak poprzednio.
Otrzymujemy również tę samą stylizację, ponieważ tutaj style są zawsze stosowane globalnie, nawet jeśli zostaną zaimportowane do
określonego pliku komponentu.
Mimo to dobrą praktyką jest konfigurowanie stylów w pliku CSX obok komponentu, do którego należą.
Dlatego dodam listę celów C jako plik.
Dodaj moją listę celów Stollsteimer i zaimportuj tę listę celów.
CSX wpada do pliku JavaScript listy celów.
Nie jest to konieczne, ale ułatwia znalezienie stylów należących do tego komponentu.
Należy pamiętać, że style nie są automatycznie uwzględniane w podziale na komponenty, chociaż stosowane są normalne
reguły as, ponieważ całe to C jest następujące, bez względu na to, gdzie je importujesz, są stosowane globalnie
do całej strony.
Dzięki temu wracamy do tego samego wyniku, co wcześniej.
Dlaczego to zrobiliśmy?
I dlaczego dzielimy to, jeśli mamy taki sam wynik jak wcześniej?