React Tutorial

Om kennis te maken met React van facebook heb ik een widget gemaakt. En
om het voor mezelf leuk te maken heb ik deze gekoppeld aan mijn nieuwe hobby : fietsen.

Wat is het?

Het is een overzicht van de UCI World Cycling ranking geworden. In een datagrid kun je
zoeken op naam van de renner, filteren op land en team. Ook kun je deze kolommen sorteren

Hier kun je een werkend voorbeeld zien

Klick op de button voor een live demo

De broncode staat op Github

Klick op de button voor de code.

Voor deze demo hoeft je niets te  ïnstalleren. Om te debuggen is het wel handig om de React Chrome Plugin te installeren.


Deze widget heb ik opgezet in de JSX syntax. En het mooie van deze syntax vind ik is dat de html en javascript nu zijn samengevoegd en dat maakt het heel overzichtelijk en intuitief.
Bijvoorbeeld :

var CyclistsList = React.createClass({
//toggle value asc , desc
getInitialState: function() {
   return {order: 'ASC'};
},
handleUserInput: function (filterText, tata) {
var column = 0;
var order = 'ti-angle-up';
//first set the order
(this.refs.listheader.state.order=='ti-angle-up') ? order = 'down' : order = 'up';
if(this.refs.listheader.state.active=='country'){
   column = 3;
}
if(this.refs.listheader.state.active=='team'){
   column = 4;
}
(column>0) ? this.props.data.sort(compareColumnByNr(column,order)) : this.props.data.sort(compareColumnByValue(column,order));
(this.state.order=='ASC') ? this.setState({order: 'DESC'}) : this.setState({order: 'ASC'});
},
render: function() {
var rows = [];
//fixed menu always on top
rows.push(<ListHeader onUserInput={this.handleUserInput } ref="listheader"  key="x" />)
this.props.data.forEach(function (cyclist) {
if (cyclist[this.props.filterColumn].toLowerCase().indexOf(this.props.filterText.toLowerCase()) === -1) {
return;
}
rows.push(<Cyclist cyclist={cyclist} key={cyclist[0]} />);
}.bind(this));
return (
<ul>{rows}</ul>
);
}
});

Filosofie van React in een notedop :

React richt zich alleen op UI componenten. React faciliteert een ‘refresh’ of update van deze componenten zodra er een verandering in hun data plaatsvindt. Als er een update van een component is, bijvoorbeeld in mijn datagrid wanneer je op een naam filtert, worden alleen de verschillen doorgevoerd naar de DOM en word de browser minimaal belast.

Wat betekent dit voor jou als developer?

  • React is geen MVC framework. Voor grotere applicaties zijn er integraties met bijv Backbone
  • React leunt op het ‘props’ en ‘state’ concept
  • Ontwerp je componenten zodat zij verantwoordelijk zijn voor één taak

Het concept van Props en State:

  • State. Gebruik state voor variabelen die aan verandering onderhevig zijn. Zoals data die
    van de gebruiker komen. I.C. filterText om de renners te filteren op naam.
  • props zijn data die je aan een component kunt meegeven zoals een attribuut in de HTML tag

Meer over state en props vind je hier

React ziet de UI componenten in een bepaalde ‘state’ of staat dus. Zodra deze state verandert word de UI opnieuw gerenderd. React doet dat voor je.

In mijn voorbeeld is een Component ‘UCIRanking’ verantwoordelijk voor de data van de renners. Zodra er een input van een gebruiker is word de filterText ‘state’ aangepast naar de tekst die word ingevoerd.De array met renners is een ‘state’ in ‘UCIRanking’ maar word als props doorgegeven aan ‘CyclistsList’.

 

Hier puntsgewijs de naam “filter functionaliteit”:

  1. UCIRanking. Het über component heeft 2 UI componenten:
    • Search
    • CyclistsList

UCIRanking :
– functie handleUserInput . In deze functie word de state filterText gezet.
– render : Deze geeft aan de ‘Search’ UI een verwijzing naar de UI functie (eigen) handleUserInput als prop.

<Search onUserInput={this.handleUserInput}

Search :
– functie handleChange. Deze roept de UCIRanking.handleUserInput met de input text als parameter
– render In de input tag koppelen we native javascript event onChange aan de UI handleUserInput :

<input onChange={this.handleChange}

CyclistsList:
Op het moment van renderen word de array met renners gefilterd op naam/karakters.

Korte omschrijving:

  1. Search.input : Op input.onChange word de waarde van het veld doorgeven aan handleChange
  2. Aan UCIRanking.handleUserInput word de ingevoerde string doorgegeven
  3. UCIRanking verandert de ‘state’ van de filter text
  4. Via een props referentie van zowel de renners als filterText is er een link met CyclistsList
  5. CyclistsList.render zit de routine om de juiste renners te filteren

Dit is in een notedop hoe deze applicatie in elkaar zit. Als je in de code kijkt zul je nog
veel meer tegenkomen zoals filteren op land en team en ook het sorteren van de kolommen.
Daarnaast heb ik met CSS wat dynamische icoontjes gezet. CSS heb ik opgezet met Susy/Compass en Sass.

Mocht je opmerkingen hoor ik het graag !

Comments

comments