React js lekcja 2

Witaj zapraszam Ciebie do lekcji nr 2 o React js.
Dziś pobawimy się state i props.
Tutaj trochę teorii:

Właściwości props (skrót od properties) i stan state są zwykłymi obiektami javascriptowymi. Przechowują informacje, które wpływają na wynik renderowania komponentu, jednak jest między nimi istotna różnica: właściwości props są przekazywane do komponentu (podobnie jak argumenty do funkcji), podczas gdy stan state jest zarządzany wewnątrz komponentu (podobnie jak zmienna w ciele funkcji).

Jak z tego skorzystać

W naszej aplikacji dodamy nowy komponent
Name

Do components dodajemy Folder Name zaś do niego dodajemy index.js

import React, { Component } from 'react';

class Name extends Component {
    render() {
      return <h1>Cześć, {this.props.imie}</h1>;
    }
  }

export default Name;

Tak powinien wyglądać nasz komponent Components/Name/index.js

Spowoduje to stworzenie komponentu typu Klasa który będzie mógł przyjąć propsa imię
By go zobaczyć dodaje do App.js

import Name from './Components/Name';
<Name imie="Wartość którą chcesz przekazać do propsa"/>

Możesz dowolnie zmieniać wartość propsa.

W react stosuje się podejście komponentów dzięki temu możesz wywołac ten sam komponent wielokrotnie np

<Name imie="Karol" />
<Name imie="Bartek" />
<Name imie="Brak imienia" />

Ok był to 1 przykład stosowania props przejdziemy teraz do state

State – czyli stany dedykowane są dla komponentów do przetrzymywania wartości

W oparciu o tą informacje zbudujemy komponent Input bedzie on przetrzymywał wartość wpisaną do niego

Tworzymy komponent w Components/Input

import React, { Component } from 'react';

class Input extends Component {
    constructor(props) {
        super(props);
        this.state ={
            wartosc: '',
        }

        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({wartosc: event.target.wartosc});
      }

    render() {
      return (
          <div>
            <input type="text" value={this.state.value} onChange={this.handleChange} />
        </div>
      )
    }
  }

export default Input;

Komponent ten bedzie zawierać w sobie state który bedzie ustawiany dzięki metodzie (funkcji) handleChange dzięki temu jak podasz wartość do inputa zostanie ona zapisana wewnątrz komponentu i bedzie można ją wykorzystać do jakiegość celu np wysłania formularza.

By zobaczyć ten input dodaj do App.js

import Input from './Components/Input'
<Input />

Kolejny przykład to prosty komponent zawierający state który bedzie wyświetlany jako wartość

Dodajemy do Components/Notowania

w Notowania dodajemy index.js

import React, { Component } from 'react';

class Notowania extends Component {
    constructor(props) {
        super(props);
        this.state ={
            dolar: '4,00',
            euro: '3,50'
        }
    }

    render() {
      return (
          <div>
            Notowanie dolara {this.state.dolar} zł <br/>
            Notowanie euro {this.state.euro} zł <br/> 
        </div>
      )
    }
  }

export default Notowania;

Zawiera on 2 state dolar i euro

W komponencie zostaną one wyświetlone

Dodaj do App.js

<Notowania />
import Notowania from './Components/Notowania'

Post navigation