Секретный доклад о react router - odessajs 2014

Секретный Докладо раутинге в React.jsАндрей Листочкин

var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; }});

React.renderComponent( <HelloMessage name="John" />, mountNode);

Hello World

npm, Common JS, components

ТРУ

DOM Diff, Lean, Perf, etc

Перспективен

MVC+R

MVC+R

Routing

sharing, liver-reload-ability, bookmarks, SEO

URL

URL =

Телефонный номер

director Backbone react-router react-router-component Aviator Finch

Routers

A framework for creating ambitious web applications

Ambitious applications — url-driven applications

URL

https://myapp.com/posts/1

PostsRoutePostsController<posts> {{outlet}}

PostRoutePostController<post>

Ember JS + React ViewsHTMLBars

React + Ember Router

github.com/rpflorence/react-nested-router

@ryanflorence

Nested views mapped to nested routesModular construction of route hierarchyFully asynchronous transition hooksTransition abort / redirect / retryDynamic segmentsQuery parametersLinks with automatic .active class when their route is activeMultiple root routesHash or HTML5 history URLs

DEMOgithub.com/toranb/react-es6-routing-example

MVC+R

@listochkin