Expressive UI with React

 

Marionette

 

var ProfileView = Marionette.ItemView.extend({
    template : '<h1>Users profile view<h1> '
});

var PageLayout = Marionette.LayoutView.extend({
    el : 'body',
    regions : {
        'sidebar' : '#sidebar',
        'content' : '#content'
    },
    template : '<div id="sidebar"></div><div id="content"></div>'
});

var layout = new PageLayout()
layout.render();

layout.getRegion('content').show(new ProfileView({ profile : { id : 1, name : "Peeter" } }));





angular.module('docsSimpleDirective', [])
.directive('ngProfileDirective', function() {
  return {
    template: '<h1>Profile directive<h1>'
  };
});

app.html:

<ng-profile-directive profile=profile></ng-profile-directive>

Sama tulemus

Angular

React

var ProfileComponent = React.createClass({
  render: function() {
    return (
      <h1>Profile Component</h1>
    );
  }
});

React.render(
  <ProfileComponent />,
  document.getElementById('content')
);

Proptypes

 

Võimaldab ära määrata komponendi sisendi. Näiteks et su komponent vajab töötamiseks "profile" muutujat.

Sarnane Hapi.JSi raamistiku "joi.js"ile

Clear component lifecycle

Ilusasti ära defineeritud mis su kompnendiga juhtub. A.la 

 

componentDidMount (domis olemas)

componentDidUnmount (domist ära korjatud)

componentShouldUpdate (kas peaks uuesti renderdama)

Inline CSS

Idee on selles, et kui sa teed tööd ühe komponendiga siis sa teed tööd selle ühe komponendiga. Seal siis on siis nii HTML, JS kui ka CSS. 

 

Kõik ühes failis, vähem võimalusi vigu teha, kergem tööd teha.

React dev tools

Karjuvad su peale nii pea kui midagi valesti teed. Saad inspekteerida reacti komponente live'is. 

Isomorphic router

Võimaldab routerit jooksutada nii nodeis kui ka browseris. Server side renderingule aitab kaasa

React

By Peeter Tomberg

React

  • 269

More from Peeter Tomberg