React.js

w aplikacjach not(SPA)

Navigation Editor

React.js

V in MVC

building large applications with
data that changes over time

JSX

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

(html
  [:a {:class "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