react js

Wprowadzenie do React JS

ReactJS to biblioteka języka JavaScript stworzona przez Facebook do budowy elastycznych interfejsów. Oficjalna strona projektu: reactjs.org.
React opiera się o tzw. komponenty (fragmenty kodu), które reagują na zdarzenia, mogą pobierać dane i utrzymywać ich wewnętrzny stan poza drzewem DOM. Komponenty są skalowalne i przenośne, bez problemu komunikują się z innymi bibliotekami i frameworkami.

Oczywiście zalet jest więcej 🙂 …

1. Użycie ReactJS na stronie internetowej

Do celów testowych i nauki wystarczy plik html z importem odpowiednich bibliotek w sekcji <HEAD></HEAD>.
Postać wyjściowa dla appki w ReactJS:

  • <div id=”app”></div> – jest to blok, do którego zostanie wczytany komponent,
  • <script type=”text/babel”></script> – wewnątrz script umieszczamy kod komponentu/ów.

2. KOMPONENTY

Przykład komponentu z wiadomością powitalną – „Hello World!”:

Jak widać, komponent to po prostu zwykła funkcja w JSX (JavaScript wymieszany z XML).
Funkcja Hello zwraca nagłówek h1 z powitaniem. Ramy <div></div> wewnątrz komponentu bazowego są wymagane!

Zerknijmy jeszcze na zapis:

ReactDOM zarządza wyświetlaniem elementów DOM.

Metoda render odpowiada za wyrenderowanie komponentu na stronie i przyjmuje dwa parametry:

  • <Hello /> – nazwa funkcji pod postacią znacznika XML (komponent, który zostanie wyświetlony na stronie),
  • document.getElementById(‚app’) – zapis znany Ci zapewne z JS 🙂 – wskazuje id selektora na stronie, do którego wczytany zostanie komponent, czyli do app (<div id=”app”></div>)

3. PROPS – argumenty

Propsy to argumenty, które przekazywane są do komponentów (funkcji).

Przykład:

Argumenty mogą oczywiście przyjmować domyślne wartości, np:


4. ATRYBUT className

Klasę wewnątrz selektora komponentu definiujemy inaczej niż w HTML, za pomocą atrybutu className:


5. LAYOUT STRONY ZŁOŻONY Z KOMPONENTÓW

Przykład layoutu jednokolumnowego, jak na obrazku poniżej, złożonego z trzech komponentów: Header, Section, Footer.

Przykład jest prościutki, więc nie wymaga szczegółowego omówienia. Jak widać, komponent Layout podzielony jest na trzy komponenty: Header, Section, Footer. W kolejnym przykładzie skomplikujemy go 😉 dodając do Section kilka postów: <Article />.

Komponent Article pobiera trzy argumenty: title, content , image i przekazuje je w odpowiednie miejsca wewnątrz szablonu. Przykład ten pokazuje możliwości Reacta , jego elastyczność w szablonach poprzez ich dzielenie na mniejsze komponenty i zagnieżdżanie.

I to już wszystko w ramach wprowadzenia do ReactJS.
Cześć! –>

Czytaj dalej: „KLASY JAKO KOMPONENTY”

wydrukuj temat