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:
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!