React

Magnús Dæhlen

Henrik Glasø Skifjeld

Om oss

  • Iterate
  • Jobbet med React hos:
    • Amedia
    • Get
    • Cisco
    • mm.

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")
      )
    );
  }

});

Nøstede 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>
    );
  }

});

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 én 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>
        );
    }

});

https://jsfiddle.net/mr91mtmy/​

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>
        );
    }

});

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

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


React lifecycle

Erfaringer

  • Forutsigbar kode
    • UI beskrives deklarativt gitt noe data
  • Mindre magi
    • React prøver ikke å løse alle problemer
  • Fleksibelt
    • Single page og som web komponenter
    • Ikke et påtrengende rammeverk
  • Stort fagmiljø
  • Gøy
     
  • Håndterer ikke dataflyt i store programmer
  • Animasjoner er vanskelig

Flux architecture

  • One way data binding
  • Spec fra Facebook
  • Håndtere dataflyt frontend

Utallige implementasjoner

  • McFly
  • Fluxible
  • Fluxxor
  • Reflux
  • mm

...men den mest populære er ->

Redux

React foredrag

By Magnús Dæhlen

Made with Slides.com

React foredrag

  • 984

More from Magnús Dæhlen