React

Hva er React? (1/3)

  • Bibliotek for å bygge brukergrensesnitt

Hvordan?

  • Bygger en virituell DOM 
  • Bygd opp av funskjoner
  • DOM-diffing mellom virituell og aktuell

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

});

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

});

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

});

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
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

 

React lifecycle

  • componentWillMount( )
  • componentWIllUnmount( )

Mount/Unmount

Update

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

That's it folkz!

https://github.com/magnudae

React mini-intro

By Magnús Dæhlen

Made with Slides.com

React mini-intro

  • 1,071

More from Magnús Dæhlen