Skocz do treści

Już wkrótce odpalamy zapisy na drugą edycję next13masters.pl. Zapisz się na listę oczekujących!

Podział na komponenty w React.js

W tej części skupisz się na teorii i praktyce dzielenia zaprojektowanych aplikacji na poszczególne komponenty. Zaczniesz też tworzyć prostą appkę — menedżer kontaktów. W planach wyświetlanie, dodawanie i edycja kontaktów. Ale najpierw — musimy przecież zaprojektować HTML i CSS dla tej aplikacji.

Ten artykuł jest częścią 5 z 43 w serii React.js.

Zdjęcie Michał Miszczyszyn
JavaScript59 komentarzy

Projekt

Przyjrzyj się temu co będziesz budował(a). Będzie to lista kontaktów, ale na początku spójrz tylko na pierwszy widok:

Komponenty w React.js i JSX To dzisiaj „potniemy” i podzielimy na komponenty React.js w JSX.

zapisz się na szkolenie z React.

Zacznij od napisania kodu HTML i CSS. W przykładzie wykorzystuję framework CSS semantic-ui, ale na dobrą sprawę z łatwością napiszesz wszystko w gołym CSS. Możesz też użyć bootstrapa — do woli. Oto kod HTML:

<header className="ui fixed menu">
<nav className="ui container">
<a href="#" className="header item">
<img className="logo" src="/public/assets/wp-content/uploads/2017/08/cropped-typeofweb_logo-04-white-smaller-1-e1504359870362.png" />
Lista kontaktów
</a>
<div className="header item">
<button className="ui button">Dodaj</button>
</div>
</nav>
</header>
<main className="ui main text container">
<ul className="ui relaxed divided list selection">
<li className="item">
<img src="https://api.adorable.io/avatars/55/typeofweb1.png" className="ui mini rounded image" />
<div className="content">
<h4 className="header">Lena</h4>
<div className="description">JavaScript Developer</div>
</div>
</li>
<li className="item">
<img src="https://api.adorable.io/avatars/55/typeofweb2.png" className="ui mini rounded image" />
<div className="content">
<h4 className="header">Brian</h4>
<div className="description">Human Resources</div>
</div>
</li>
<li className="item">
<img src="https://api.adorable.io/avatars/55/typeofweb3.png" className="ui mini rounded image" />
<div className="content">
<h4 className="header">Rick</h4>
<div className="description">QA</div>
</div>
</li>
</ul>
</main>

Jest tutaj nagłówek z logo i przyciskiem dodawania kontaktów oraz lista z trzema kontaktami. Wygląda dokładnie jak na screenshocie powyżej. Ale chcesz mieć to w React, prawda? Do dzieła!

Co dalej?

W kolejnych wpisach dodasz interakcję (np. kliknięcia) do komponentów. Dodatkowo poznasz stan (state), który potem przyda się nam przy rozbudowie aplikacji. Bez niego praktycznie niemożliwe byłoby tworzenie jakichkolwiek aplikacji, które oprócz wyświetlania treści miałyby robić cos jeszcze :)

Jeśli chcesz na bieżąco śledzić kolejne części kursu React.js to koniecznie śledź mnie na Facebooku i zapisz się na newsletter.

Ćwiczenie

Ćwiczenie: Stwórz komponent do wyświetlania avatarów i przenieś do niego kod za to odpowiedzialny. Niech ten komponent przyjmuje jako props tylko login. Wrzuć swój kod w komentarzu!

Ćwiczenie*: Zmodyfikuj stworzony komponent z avatarem tak, aby obecne obrazki były wyświetlane gdy login nie jest mailem. Natomiast gdy jest mailem to skorzystaj z Gravatara. Zauważ, że całkowita zmiana działania tego komponentu nie wymaga wprowadzania żadnych zmian w pozostałym kodzie aplikacji!

👉  Znalazłeś/aś błąd?  👈Edytuj ten wpis na GitHubie!

Autor