Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React.js

 React.js

Georgy Angelov

June 24, 2016
Tweet

More Decks by Georgy Angelov

Other Decks in Programming

Transcript

  1. View Slide

  2. #КОЙ създаде React?

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. React не е нещо младо и
    неузряло

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. Лето Божие 2015

    View Slide

  18. #КОЙ използва React?

    View Slide

  19. View Slide

  20. Малко теория

    View Slide

  21. Mutable (stateful) UI

    View Slide

  22. Първоначални
    данни
    функция 1 Първоначален
    интерфейс

    View Slide

  23. Променени
    данни
    функция 3..+inf
    Промяна на
    интерфейса
    Нови
    данни
    (сървър)
    функция 4

    View Slide

  24. Declarative UI

    View Slide

  25. Данни Интерфейс
    функция 2
    UI
    декларация
    Нови
    данни
    (сървър)

    View Slide



  26. {beer.brand} - {beer.likes}


    View Slide

  27. Immutable UI

    View Slide

  28. Данни
    функция 1
    Интерфейс
    функция 2
    Нови
    данни
    (сървър)

    View Slide

  29. function render(beers) {
    return '' + beers.map(render_beer) + '';
    }
    function render_beer(beer) {
    return '' +
    beer.brand + ' ' + beer.likes +
    ';
    }

    View Slide

  30. Immutable != Declarative

    View Slide

  31. React

    View Slide

  32. View Slide

  33. React

    View Slide

  34. A JavaScript library for building
    user interfaces

    View Slide

  35. Getting started


    View Slide

  36. Hello World

    View Slide

  37. JSX
    • Синтактичен трансформатор
    • Вграден ECMAScript 6 transpiler (с опция --harmony)
    • Client-side & Server-side поддръжка

    View Slide

  38. JSX
    children
     React.createElement(Component, {
    a1: code,
    a2: "str"
    }, children);

    View Slide

  39. JSX
    var Component = React.createClass({ … });
     var Component = React.createClass({
    displayName: "Component",

    });

    View Slide

  40. Virtual DOM

    View Slide

  41. Virtual DOM
    • Структура от данни, скриваща мутациите върху DOM
    елементите
    • Представлява йерархия от обекти
    • Симулира immutable UI
    • Бърз алгоритъм за намиране на разлики

    View Slide

  42. Алгоритъм

    View Slide

  43. Алгоритъм
    var oldDOM = rootComponent.getCurrentVirtualDOMObject(),
    newDOM = rootComponent.render();
    React.applyDifferences(oldDOM, newDOM);

    View Slide

  44. body {
    header(className="menu") {
    ul {
    li(href=…) { начало },
    li(href=…) { вход },
    li(href=…) { регистрация }
    },
    },
    div(className="users") {
    h1 { Пешо }
    h1 { Гошо }
    },
    footer { Copyright 2015 ® }
    }
    IndexPage {
    NavigationMenu,
    IndexPageContent {
    UserList
    },
    Footer
    }
    render
    Йерархия от React
    компоненти
    VirtualDOM

    View Slide

  45. div(className="test") {
    h1 {
    Здравей!
    }
    h2 {
    Тук си от 1234 милисекунди!
    }
    }
    HelloWorld {
    state: {
    initialTime: [Date Object],
    time: [Date Object]
    },
    render() {
    ...
    }
    }
    render
    React компонент VirtualDOM елемент

    View Slide

  46. div(className="test") {
    h1 {
    Здравей!
    }
    h2 {
    Тук си от 1234 милисекунди!
    }
    }
    render
    VirtualDOM елемент Browser DOM

    Здравей!
    Тук си от 1234 милисекунди!

    View Slide

  47. div(className="test") {
    h1 {
    Здравей!
    }
    h2 {
    Тук си от 1234 милисекунди!
    }
    }
    diff
    Стар виртуален DOM Нов виртуален DOM
    div(className="test") {
    h1 {
    Здравей!
    }
    h2 {
    Тук си от 1222 милисекунди!
    }
    }

    View Slide

  48. div(className="test") {
    h1 {
    Здравей!
    }
    h2 {
    Тук си от 1234 милисекунди!
    }
    }
    Разлики Променен HTML

    Здравей!
    Тук си от 1234 милисекунди!

    apply diff

    Здравей!
    Тук си от 1222 милисекунди!

    View Slide

  49. Заради Virtual DOM...
    Може да се рендерира не само HTML:
    • React Native
    • React Canvas
    • React QT*
    • React GTK*
    • React WPF*

    View Slide

  50. React Native sneak peek
    var App = React.createClass({
    render: function() {
    return (





    );
    }
    });

    View Slide

  51. Server-side rendering
    DEAL WITH IT

    View Slide

  52. Data flow

    View Slide

  53. Компонент
    props
    state
    Родител
    state
    Компонент state
    Компонент state

    View Slide

  54. Props
    render() {
    return online={true}
    position={
    Senior dog specialist
    }
    onSelect={function() { ... }} />
    }

    View Slide

  55. Props
    render() {
    return (


    {this.props.name}
    {this.props.online && online}

    {this.props.position}

    );
    }

    View Slide

  56. Prop Validation
    User.propTypes = {
    name: React.PropTypes.string.isRequired,
    online: React.PropTypes.bool,
    position: React.PropTypes.element,
    onSelect: React.PropTypes.func.isRequired
    };

    View Slide

  57. Prop Defaults
    User.defaultProps = {
    online: false,
    position: unknown
    };

    View Slide

  58. Properties
    • Immutable
    • Може да се подменят само от родител
    • При подмяна се пререндерира
    • componentWillReceiveProps, …
    • Може да са всякакви JS обекти
    • Може да се валидират

    View Slide

  59. State
    • Вътрешно състояние за компонент
    • Може да се променя и чете само отвътре
    • При промяна се пререндерира
    • componentWillUpdate, componentDidUpdate
    • Отново, може да съдържа всичко
    • Променя се само чрез `setState`

    View Slide

  60. Events
    • Custom event система – "оправя" разлики в браузърите
    • Clipboard, Keyboard, Mouse, Touch, Focus, Form, Scroll &
    Wheel
    • Закачат се като property-та на елементите

    View Slide

  61. Events
    render() {
    return (

    Why do you want to destroy the world?
    } />

    Launch nukes


    );
    }

    View Slide

  62. Data loading
    • componentDidMount
    • componentWillReceiveProps

    View Slide

  63. Data loading
    componentDidMount() {
    ajax('user/all', function(users) {
    this.setState({users: users});
    }.bind(this));
    }

    View Slide

  64. Events
    componentDidMount() {
    ajax('user/all', (users) => {
    this.setState({users: users});
    });
    }

    View Slide

  65. References
    class SearchForm extends React.Component {
    clear() {
    this.setState({text: ''});
    }
    ...
    }

    View Slide

  66. References
    render() {
    onSearch={...} />

    }
    clear() {
    this.refs.searchForm.clear();
    }

    View Slide

  67. Демота

    View Slide

  68. Обобщение

    View Slide

  69. JSX – синтаксис за вграждане на
    HTML-о-подобни тагове в JS

    View Slide

  70. Virtual DOM – структурата, която
    моделира HTML елементите

    View Slide

  71. Data flow – events, props, states

    View Slide

  72. Възможност за други
    имплементации (React Native) и
    Server-side rendering

    View Slide

  73. Добра енкапсулация

    View Slide

  74. Бърза разработка

    View Slide

  75. Лесно unit тестване
    (без браузър)

    View Slide

  76. View Slide