React biblioteka components komponenty tworzenie jak zrobić komponent react

React biblioteka components komponenty tworzenie jak zrobić komponent react

 

 

React 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="http://poswojsku.pl" src="http://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="http://poswojsku.pl" src="http://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.

 

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