React components komponenty props właściwości state stan

<
  • 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 components komponenty props właściwości state stan

 

 

framework JavaScript poswojsku

React components komponenty props właściwości state stan

 

Podstawowym elementem biblioteki React jest komponent (ang. Component). Co to jest komponent React?

Komponent biblioteki react to obiekt Javascript odzwierciedlający węzeł z drzewa DOM. Pracując w React, omijasz drzewo DOM, tworząc wirtualny DOM, którego odzwierciedleniem są komponenty React. Komponent React może zawierać w sobie inne komponenty, które mogą w sobie zawierać kolejne komponenty, itd. Tworzone jest w ten sposób drzewo komponentów. Zwykle jeden komponent odpowiedzialny jest za jedno zadanie. Stworzenie komponentu, umożliwia jego wykorzystanie w przyszłości w innych aplikacjach React. Komponenty to elementy wielokrotnego (a nawet) nieskończonego) użytku w aplikacjach React.

 

Istnieją trzy główne sposoby definiowania komponentów React:

 

* bezstanowe elementy funkcyjne (ang. Stateless function components)

* React.createClass

* React.Component

 

W następnej lekcji omówię każdy z wymienionych sposobów tworzenia komponentów React. Teraz wspomnę jedynie o pierwszym sposobie stworzenia komponentu w React, w nawiązaniu do: props - właściwości i state - stanu.

 

Jak zrobić komponent React – sposób I - bezstanowe elementy funkcyjne

 

Komponent powstaje poprzez wykorzystanie funkcji JavaScript, funkcja js 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. Co to jest props w React? Jak każda aplikacja, tak i te tworzone w React, potrzebują modelu danych. W React - komponent zasilamy o model danych korzystając z:

 

props (properties) – właściwości - są niezmienne (ang. immutable) podczas cyklu życia komponentu React

state – stan - jest zmienny (ang. mutable) podczas cyklu życia komponentu React.

 

Każda z w.w. opcji ma swoje właściwość i nie stosuje się ich zamiennie.

W aplikacji stworzonej przy pomocy React, stan to potencjalne miejsce występowania błędów, więc aby ograniczyć prawdopodobieństwo wystąpienia błędów w aplikacji React - dobrą praktyką jest ograniczenie korzystania ze stanu aplikacji do - powiedzmy: właściwego minimum.

W React Props są niezmienne -  nie zmienią się podczas cyklu życia komponentu. To co zrobić, gdy dany komponent chcę wyświetlić z innymi props? Trzeba wywołać go z innymi parametrami z poziomu jego rodzica, gdyż wartość props nie może zmienić się wewnątrz komponentu.

 

Więcej na temat components – komponenty, props – właściwości, state – stan – znajdziesz w kolejnych częściach mojego kursu opisującego bibliotekę React.js.

 

 

Zobacz w bocznym menu podobne poradniki do: React components komponenty props właściwości state stan