Workshop: React

Repo

https://github.com/magnudae/react-workshop

Hva er React? (1/3)

  • Bibliotek for å bygge brukergrensesnitt

UI bygget opp av komponenter

  • Komponent er en instans av en klasse
  • Klasse må inneholde render()
var HelloWorld = React.createClass({

  render: function() {
    return (
      <div>
        <h1> Hello World! </h1>
      </div>
    );
  }

});

JSX

  • JS-syntaks som likner XML
  • Enklere å lese og jobbe med
var HelloWorld = React.createClass({

  render: function() {
    return (
      <div>
        <h1> Hello World! </h1>
        <p> Dette er et eksempel </p>
      </div>
    );
  }

});

Uten JSX

var HelloWorld = React.createClass({

  render: function() {
    return (
      React.createElement("div", null, 
        React.createElement("h1", null, "HelloWorld"), 
        React.createElement("p", null, "Dette er et eksempel")
      )
    );
  }

});

Oppgave

Gjør om MainComponent til å skrive ut

1. "Hello World!" i en <h1>

2. Noe tekst i en <p> 

 

Ekstra: Legg til et bilde og bruk imageUrl som src

Nestede komponenter

  • UI består av et tre av komponenter
var InnerComponent = React.createClass({

  render: function() {
    return (
      <p>
        Dette er et eksempel
      </p>
    );
  }

});

var HelloWorld = React.createClass({

  render: function() {
    return (
      <div>
        <h1> Hello World! </h1>
        <InnerComponent />
      </div>
    );
  }

});

Oppgave

Lag en ny komponent og flytt enten <h1>-en eller <p>-en fra MainComponent dit

 

Ekstra: Lag den nye komponenten i en egen fil

Komponenter innholder to typer data

this.props

this.state

 

Mutable

(med this.setState)

Immutable

this.props - Properties

  • Dette er hvordan data beveger seg ned treet av komponenter
  • Kommer fra forelder-komponent
  • Alltid immutable data

Eksempel

var InnerComponent = React.createClass({

  render: function() {
    return (
      <p>
        {this.props.innertext}
      </p>
    );
  }

});

var HelloWorld = React.createClass({

  render: function() {
    return (
      <div>
        <h1> Hello World! </h1>
        <InnerComponent innertext="Dette er et eksempel" />
      </div>
    );
  }

});

this.state

  • Beskriver en tilstand i en komponent
    • Eks. dropdown
  • Gjelder kun for en komponent
  • Mutable - men endres kun via this.setState-metoden
    • Trigger render-metoden

Eksempel

var CounterComponent = React.createClass({
    
    getInitialState: function(){
        return {
            counter: 1
        };
    },

     _onClick: function (event) {
        this.setState({
            counter: this.state.counter + 1
        });
    },

    render: function() {
        return (
            <div>
                <p>
                    Counter: {this.state.counter}
                </p>
                <button onClick={this._onClick}> 1 up </button>
            </div>
        );
    }

});

Oppgave

1. Send en property inn i den nye komponenten og vis den på skjermen

2. Lag en ny tilstandsvariabel og vis den på skjermen (hint: getInitialState)

3. Lag en button og oppdater den nye tilstanden med onClick

Hva er React? (2/3)

  • Bibliotek for å bygge brukergrensesnitt
  • Lager et tre av komponenter/render-funksjoner
    • Data sendes som parametere
    • Funksjonene returnerer HTML

Collection rendering

var MessagesComponent = React.createClass({
   
    getInitialState: function(){
        return {
            messages: [
                {text: "Lorem ipsum dolor sit amet"}, 
                {text: "Cras convallis congue"},
                {text: "Donec cursus leo malesuada"}
            ]
        };
    },

    render: function() {
        var messages = this.state.messages.map(function (message) {
            return (
                <p>{message.text}</p>
            );
        });

        return (
            <div>
                {messages}
            </div>
        );
    }

});

Oppgave

Send en liste (med lengde > 1) med tekster som props til barnekomponenten din, og vis disse tekstene i hver

sin <li>-tag inni en <ul>-tag

 

Ekstra: Se i konsollen i nettleseren din. Får du

feilmelding fra React? Hvorfor?

Behind the scenes

  1. this.setState() endrer tilstanden til en komponent
     
  2. render() blir kalt, som igjen rekursivt kaller render() på alle barnekomponenter
    • Sender med eventuelle props
       
  3. render() resulterer i et tre av Reacts egne datastruktur
    • Virtual DOM
       
  4. Differansen mellom virtuell og ekte DOM blir beregnet,
    og ekte DOM blir oppdatert dersom nødvendig
class MainComponent extends React.Component {

  constructor(props){
    this.state =  {
      win: "lost damn!",
    };
  }

  render() {
   return (
     <div>
       <h1> Hello World </h1>

     </div>
   );
  }

};

The ES6 way

var InputComponent = React.createClass({

  getInitialState: function(){
    return  {
      placeholder: "Input here"
    };
  },

  render: function() {
    return (
      <div>
        <textarea placeholder={this.state.placeholder} />
      </div>
    );
  }

});

module.exports = InputComponent;

The "old" way

Hva er React? (3/3)

  • Bibliotek for å bygge brukergrensesnitt
  • Lager et tre av komponenter/render-funksjoner
    • Data sendes som parametere
    • Funksjonene returnerer HTML
  • Komplett re-rendering for hver tilstandsendring i komponenten

 

Flux architecture

Utvidelser

  • McFly
  • Fluxible
  • Fluxxor
  • Reflux
  • mm
var Flux = <require McFly instance>;
var _text = [];

var Store = Flux.createStore({

  emitChange: function() {
    this.emit("CHANGE_EVENT");
  },

  addChangeListener: function(callback) {
    this.on("CHANGE_EVENT", callback);
  },

  getText: function(){
    return _text;
  }
}, function(payload){
  if(payload.actionType === "TEST_ACTION") {
    _text.push(payload.text);
   Store.emitChange();
  }
});

Store

var Flux = <require McFly instance>;

var Actions = Flux.createActions({
  testAction: function(text) {
    return {
      actionType: 'TEST_ACTION',
      text: text
    }
  }
});

Actions

Oppgave 1

Lag en ny action

Eks: onClick sender tekst action

Oppgave 2

Ta i mot den nye actionen i storen

Eks: Lagre innkommende tekst

Oppgave 3

Oppdater applikasjonen

Eks: Få appen til å oppdateres på en change emit

BONUS

  • componentWillMount( )
  • componentWIllUnmount( )

Mount/Unmount

Update

  • componentWillRecieveProps( nextprops )
  • shouldComponentUpdate( nextProps, nextState )
  • componentWillUpdate( nextProps, nextState )

Oppgave 2

Lag en shouldComponentUpdate funksjon som bare oppdaterer component i spesielle cases

Eks: Hver gang vi har et partall antall meldinger

Oppgave 1

Bruk componentWillRecieveProps til å påvirke

staten til componenten

Eks: Sett placeholder state ifra props

Workshop: React

By Magnús Dæhlen

Made with Slides.com

Workshop: React

  • 1,077

More from Magnús Dæhlen