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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>React.js</title> <script src="https://unpkg.com/react/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone/babel.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> // kod komponentu ... </script> </body> </html> |
- <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!”:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>React.js</title> <script src="https://unpkg.com/react/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone/babel.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> function Hello() { return( <div> <h1>Hello World!</h1> </div> ); } ReactDOM.render(<Hello />, document.getElementById('app')); </script> </body> </html> |
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:
|
1 |
ReactDOM.render(<Hello />, document.getElementById('app')); |
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).
|
1 2 3 |
function Hello({arg1, arg2, arg3 ... }) { // ... } |
Przykład:
|
1 2 3 4 5 6 7 8 |
function Hello({content}) { return( <div> <h1>{content}</h1> </div> ); } ReactDOM.render(<Hello content="Hello World!" />, document.getElementById('app')); |
Argumenty mogą oczywiście przyjmować domyślne wartości, np:
|
1 2 3 4 5 6 7 8 |
function Hello({content="Hello World!"}) { return( <div> <h1>{content}</h1> </div> ); } ReactDOM.render(<Hello />, document.getElementById('app')); |
4. ATRYBUT className
Klasę wewnątrz selektora komponentu definiujemy inaczej niż w HTML, za pomocą atrybutu className:
|
1 2 3 4 5 6 7 |
function Hello({content}) { return( <div> <h1 className="header">{content}</h1> </div> ); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>React.js</title> <script src="https://unpkg.com/react/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone/babel.js"></script> <style type="text/css"> header, section, footer { font-family:Arial; padding: 25px; text-align:center; } header { background-color:#555; color:#fff; } section { background-color:#fafafa; } footer { background-color:#eee; padding:5px; font-size:13px; } </style> </head> <body> <div id="app"></div> <script type="text/babel"> function Layout() { return( <div> <Header /> <Section /> <Footer /> </div> ); } function Header() { return( <header> <p>Header</p> </header> ); } function Section() { return( <section> <p>Section</p> </section> ); } function Footer() { return( <footer> <p>Footer</p> </footer> ); } ReactDOM.render(<Layout />,document.getElementById('app')); </script> </body> </html> |
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 />.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function Section() { return( <section> <Article title="Artykuł 1" content="Content 1 ..." image="https://geekster.pl/wp-content/uploads/2019/02/ReactJs.jpg" /> <Article title="Artykuł 2" content="Content 2 ..." image="https://geekster.pl/wp-content/uploads/2019/02/ReactJs.jpg" /> <Article title="Artykuł 3" content="Content 3 ..." image="https://geekster.pl/wp-content/uploads/2019/02/ReactJs.jpg" /> </section> ); } function Article({title,content,image}) { return( <article> <img src="{image}" /> <h2>{title}</h2> <p>{content}</p> </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”
