Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Секретный доклад о React Router - OdessaJS 2014

2,116 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Секретный доклад о React Router - OdessaJS 2014

  1. 1. Секретный Доклад о раутинге в React.js Андрей Листочкин
  2. 2. var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.renderComponent( <HelloMessage name="John" />, mountNode); Hello World
  3. 3. npm, Common JS, components ТРУ
  4. 4. DOM Diff, Lean, Perf, etc Перспективен
  5. 5. MVC+R
  6. 6. MVC+R
  7. 7. Routing
  8. 8. sharing, liver-reload-ability, bookmarks, SEO URL
  9. 9. URL = Телефонный номер
  10. 10. director Backbone react-router react-router- component Aviator Finch Routers
  11. 11. A framework for creating ambitious web applications
  12. 12. Ambitious applications — url-driven applications
  13. 13. URL https://myapp.com/posts/1 PostsRoute PostsController <posts> {{outlet}} PostRoute PostController <post>
  14. 14. Ember JS + React Views HTMLBars
  15. 15. React + Ember Router
  16. 16. github.com/rpflorence/react-nested-router @ryanflorence
  17. 17. Nested views mapped to nested routes Modular construction of route hierarchy Fully asynchronous transition hooks Transition abort / redirect / retry Dynamic segments Query parameters Links with automatic .active class when their route is active Multiple root routes Hash or HTML5 history URLs
  18. 18. DEMO github.com/toranb/react-es6-routing-example
  19. 19. MVC+R
  20. 20. @listochkin

×