React.js

w aplikacjach not(SPA)

Navigation Editor

Navigation Editor

Navigation Editor

React.js

JSX

React.createElement('a', {
    className: "button",
    href: 'https://facebook.com/'
  }, 'Hello!')

JSX

var renderButtons = function(context) {
  return (
    <div>
      <AolButton onClick={context.handleEditItem} title="Edit" />
      <AolButton onClick={context.handleDeleteItem} title="Delete" />
    </div>);
};

• sugar syntax na JS (ES6)
• class vs. className
• createElement - tylko jeden węzeł
• kompilacja JSX

VirtualDOM

• mutation View - DOM problem
• rerender everything!
• render VirtualDOM path

Components

• reużywalne API
• dwa źródła danych
  • properties
  • state
• stateless components
• data down - actions up

Components

<ItemComponent index={index}
               item={item}
               editMode={editMode}
               onEdit={onEditItem}
               onRemove={onRemoveItem}
               onMove={onMoveItem} />

AppComponent:
    State: {}

ColumnComponent:

SectionComponent:

data

actions

React.js

OneWeb

AppComponent {
  ColumnComponent {
    SectionComponent {
      ItemComponent {}
    }
  }
}

State

SectionPopup

ItemPopup

SelectCategoryPopup

SelectCMSNodePopup

SelectProductPopup

React.js in not(SPA)

• jest łatwiej
• jest szybciej
• jest czytelniej
• jest sens