React biblioteka components komponenty tworzenie jak zrobić komponent react

<
  • DANE ADRESOWE

     

    w czym mogę pomóc?

    biuro(at)gddm.com.pl

    Zd Wola Paprocka 86

    znajdź mnie na Youtube

  • PROGRAMOWANIE

     

    JavaScript HTML CSS

    jQuery jQuery Mobile

    node.js React Angular

    ES6 babel rollup karma

  • GRAFIKA ANIMACJA

     

    grafika na strony www

    grafika reklamowa

    animacja 2D i 3D

    grafika 2D i 3 D

  • DORADZTWO

     

    doradztwo IT

    doradztwo biznesowe

    usługi IT

    analizy biznesowe i IT

  • SZKOLENIA

     

    technologie IT

    marketing

    zarządzanie

    projekty metodologia

>

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