Szkolenia informatyczne: biuro, technologie internetowe, egzaminy technik
CENA - OFERTA: Jesteś zainteresowany/na kursem – zapraszam do kontaktu ze mną, szczegóły: www.poswojsku.pl .
React biblioteka components komponenty tworzenie jak zrobić komponent react
React biblioteka components komponenty tworzenie jak zrobić komponent react
React biblioteka components komponenty tworzenie jak zrobić komponent react
Jak wspomniałem w poprzedniej lekcji, podstawowym elementem biblioteki React.js jest komponent (ang. Component). Wytłumaczyłem także co to są: states – stany oraz props – właściwości. Jeżeli te pojęcia są Tobie obce – wróć do poprzedniej lekcji szkolenia z React.
Aby zrozumieć komponenty, trzeba znać podstawy obiektów JavaScript, gdyż komponent biblioteki React to obiekt Javascriptowy odzwierciedlający węzeł z drzewa DOM – nie jest on elementem DOM. W React, omijasz drzewo DOM, tworząc wirtualny DOM, którego odzwierciedleniem są komponenty React. A ponieważ DOM to jeden z najwolniejszych elementów technologii webowych – przyśpieszasz działanie aplikacji pisanych w React.
Komponent React może zawierać w sobie inne komponenty, które mogą w sobie zawierać kolejne komponenty, te – kolejne, itd. Tworzone jest w ten sposób drzewo komponentów. Zwykle w aplikacjach React - jeden komponent odpowiedzialny jest za jedno zadanie. Sposób stworzenia komponentu, umożliwia jego wykorzystanie w przyszłości w innych aplikacjach React.
Istnieją trzy główne sposoby definiowania komponentów React:
bezstanowe elementy funkcyjne (ang. Stateless function components)
React.createClass
React.Component
Komponenty React - bezstanowe elementy funkcyjne (ang. Stateless function components)
Jak zrobić komponent React – sposób I bezstanowe elementy funkcyjne
Wykorzystanie funkcji JavaScript, funkcja otrzymuje props jako argument:
var ObrazekDoKlikania = function(props) {
return (
<a href={props.href}>
<img src={props.src} />
</a>
);
};
ReactDOM.render(
<ObrazekDoKlikania href="//poswojsku.info/%3Ca%20href%3D"https://poswojsku.pl"">https://poswojsku.pl" src="//poswojsku.info/%3Ca%20href%3D"https://poswojsku.info/sites/default/files/poswojsku-info-madre-jak-sowa-logo-end_0.png"">https://poswojsku.info/sites/default/files/poswojsku-info-madre-jak-sowa... />,
document.getElementById("kontener")
);
Jak widać, w React - Komponent umieszczany jest w samozamykającym się znaczniku.
Wykorzystując nową składnię funkcji ES2015 – tzw. funkcja strzałkowa, komponent można zdefiniować bardziej zwięźle:
var ObrazekDoKlikania = props => (
<a href={props.href}>
<img src={props.src} />
</a>
);
ReactDOM.render(React.createElement(
"h1",
null,
<ObrazekDoKlikania href="//poswojsku.info/%3Ca%20href%3D"https://poswojsku.pl"">https://poswojsku.pl" src="//poswojsku.info/%3Ca%20href%3D"https://poswojsku.info/sites/default/files/poswojsku-info-madre-jak-sowa-logo-end_0.png"">https://poswojsku.info/sites/default/files/poswojsku-info-madre-jak-sowa... />
), kontener);
Powyższy zapis zgodny z ES6, niestety nie będzie prawidłowo wyświetlany w niektórych, szczególnie starszych przeglądarkach.
React biblioteka components komponenty tworzenie jak zrobić komponent react
Komponenty React - React.createClass
Jak zrobić komponent React – React.createClass
Kolejny sposób na stworzenie komponentu to React.createClass. Najpierw tworzymy komponent zawierający jakąś właściwość – props.
var Komponent = React.createClass({
render: function () {
return <div>Hello {this.props.name}! Lubisz React?</div>;
}
});
Następnie nakazujemy React wyrenderowanie komponentu z propsem name, równym Darek. Efekt możesz zobaczyć na ekranie.
ReactDOM.render(<Komponent name="Darek" />, document.getElementById("kontener"));
Komponenty React - React.Component
Jak zrobić komponent React – React.Component
React.Component wykorzystuje składnię ES2015, czyli najnowszą działającą wersję JavaScript opartą na wytycznych ECMA. Tworzenie komponentów React odbywa się za pomocą klas wprowadzonych właśnie w ES6. Tworzymy klasę Komponent rozszerzającą komponenty React, czyli nowy komponent React.
class Komponent extends React.Component{
render(){
return <div>Hello {this.props.name}! Lubisz React?</div>;
}
}
Podobnie jak poprzednio renderujemy, czyli wyświetlamy na ekranie stworzoną wcześniej klasę React.
ReactDOM.render(<Komponent name="Darek" />, document.getElementById("kontener"));
Poznałeś/aś podstawy tworzenia komponentów React. Kolejny krokiem będzie dalsze zgłębianie tajemnic biblioteki React. Serdecznie zapraszam.
);
Więcej na temat React.js – znajdziesz w kolejnych częściach mojego kursu.
Zobacz w bocznym menu podobne poradniki do: React biblioteka components komponenty tworzenie jak zrobić komponent react