React

Esimerkki

React on Facebookin ja Instagramin Javascript-kirjasto käyttöliittymien tekemiseen. kts. Why React?

Kannattaa katsoa seuraavat videot:

Reactin perusteet käsitellään hyvin ja selkeästi Learning React.js: Getting Started and Concepts-tutoriaalissa.

JSX

Hello world

Yksinkertaisimmassa React-ohjelmassa liitetään html-dokumenttiin react-kirjasto, JSXTransformer-kirjasto ja kirjoitetaan script-elementin sisään oma yksinkertainen komponentti ja renderoidaan se. Huom. script-elementin type-attribuutin arvon on oltava text/jsx.

kts. Getting Started ja tutorial

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
    <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
    <script src="https://fb.me/react-0.14.8.js"></script>
    <script src="https://fb.me/react-dom-0.14.8.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="main"></div>
    <script type="text/jsx">
// yksinkertainen komponentti, joka palauttaa tekstikappaleen jossa lukee haluttu nimi   
// komponentille annetut parametrit löytyvät this.props-objektista
var HelloWorld = React.createClass({
  render: function() {
    return (
      <p>
        Hello {this.props.name}!
      </p>
    );
  }
});
// näytetään main-tunnisteella varustetun lohkon sisällä edellä luotu oma komponentti
// esitettävä nimi annetaan attribuuttina
  ReactDOM.render(
    <HelloWorld name="Tommi" />,
    document.getElementById('main')
  );
    
    </script>
  </body>
</html>
        

React-komponentit

react ja silmukat

Reactin JSX-koodiin ei voi kirjoittaa kuin React-elementteja, html-elementtejä ja {}-sulkujen sisään funktiokutsuja tai laskutoimituksia ja muuttujien nimiä. Jos on tarve käyttää for-looppia tai muita vastaavia rakenteita on nämä suoritettava erikseen. Sisäkkäisten for-looppien tapauksessa on toinen looppi piilotettava erilliseen funktioon tai komponenttiin

Allaolevaa esimerkkiä voi kokeilla pääteohjausmallissa.

var Test = React.createClass({
  render: function(){
    var taulukko = ["foo", "bar", "foobar", "barfoo"];
    var taulukko2 = [1, 2, 3, 4];
    var aputaulukko = [];
    // JSX-koodissa voi olla vain funktiokutsuja tai muuttujia
    // tässä tapauksessa taulukko[i] kelpaa hyvin <li></li>-rakenteen sisään
    // muista antaa jokin uniikki avain jokaiselle riville
    for(var i=0;i<taulukko.length;i++) {
          aputaulukko.push( <li key={i}>{taulukko[i]}</li> );               
    }
    
    aputaulukko = [];
    // entä jos on kaksi for-looppia?
    // tulostetaan sisempään listaan kaikki saman taulukon alkiot    
    // toinen for-looppi on piilotettava toiseen funktioon
//    for(var i=0;i<taulukko2.length;i++) {
//        aputaulukko.push( apufunktio(taulukko2[i], taulukko) );               
//    }
    // sama kuin edellä mutta käyttäen toista react-komponenttia
    for(var i=0;i<taulukko2.length;i++) {
        aputaulukko.push( <Apuluokka key={i} taulukko={taulukko} ulompi={taulukko2[i]} /> );               
    }
    
    return (
      <ul>
      { aputaulukko }
      </ul>
    ) 
    /* tämä ei toimi vaan tulee unexpected token -virheilmoitus
        return (
      <ul> {
        for(var i=0;i<taulukko.length;i++) {
              aputaulukko.push( <li>{taulukko[i]}</li> );               
        }}
      </ul>
    ) 
*/    

  }
});

// tekee saman asian kuin alempana oleva apufunktio
var Apuluokka = React.createClass({
  render: function(){
    var aputaulukko = [];
    for(var i=0;i<this.props.taulukko.length;i++) {
        aputaulukko.push( <li key={i}>{this.props.taulukko[i]}</li> );               
    }
    return (
      <li>
      {this.props.ulompi} 
          <ul>
                { aputaulukko }
          </ul>
      </li>
    )


  }
});


 
// tekee sisemmän for-loopin, parametrina tuodaan ulomman listan teksti ja sisempään
// listaan vaadittava taulukko
function apufunktio(sarake, taulukko) {
    var aputaulukko = [];
    for(var i=0;i<taulukko.length;i++) {
        aputaulukko.push( <li key={i}>{taulukko[i]}</li> );               
    }
    return (
      <li key={sarake}>
      {sarake} 
          <ul>
                { aputaulukko }
          </ul>
      </li>
    )

}


Lisätietoa

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/web-sovellukset/luennot/react/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2016-04-14 09:09:12
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta