Reactアプリケーションの構造化の助けが必要

Question

私はReactでアプリケーションを設計/作成していますが、全体を構造化するための助けが必要です。次のように私が作成したい

アプリが構築されています：

を今、私はこれを構造化する方法についてのカップルの質問があり、そしてどのようなプラグインやフレームワークに反応することは便利になる：

1. 「フィルタ」バーがメインレイアウト（「マスターページ」）の一部であるべきか？
2. 私はreact-routerが反応のルーティングに適していると思いますか？
3. データを表示（操作）するときは、Fluxと一緒に作業するのが良いですか？あるいは、Fluxはデータとは関係ありませんか？

4. 私はASP.Net WebAPIからデータを取得したいと思います。これは私が通常 "普通の" XmlHttpRequest/jquery ajaxでやっていることですか？それとももっと「リアクト」な道があるのだろうか？

5. 追加：使用する特定の理由はありますかRedux？私は本当にそれの使用を理解していません:)

あなたの助けを前にありがとう。

Answer 1

は、私はあなたがこのようなレイアウト持つことができますね。あなたが持っているでしょう

<App> 
    <Navbar /> { /* Here you show the username also, this view will depend on props */ } 
    <Layout /> { /* Here you may have the content and the sidenav */ } 
</App> 

アプリケーションがトップ部品、render（）を、例えば小道具を渡し本体容器です

// You should treat this as a Page component, the one that grabs 
// data and passes it as props to another components 
export default class AppPage extends React.Component { 
    render() { 
     return (<AppLayout { ...this.props } />); 
    } 
} 

export default class AppLayout extends React.Component { 
    render() { 
     return (
      <Navbar someProp={ this.props.someProp } /> 
      { this.props.children } 
     ); 
    } 
} 

ルータは、たとえば次のようになります。

<Router history={ browserHistory }> 
    <Route path="/" component={ App }> 
    <IndexRoute component={ Landing } /> 
    <Route path="/index" component={ Layout } /> 
    </Route> 
</Router> 

IndexRouteは '/'で、どのコンポーネントを私たちにするべきか例えば、あなたが/ layout {this.props。 children}は、<Layout />コンポーネントとしてレンダリングされます。

私はあなたがこの記事を読むことをお勧め：https://facebook.github.io/react/docs/thinking-in-react.html は、より良い作品をどのように反応するかを理解するために...それはそれはナビゲーションバーの構成要素である必要があり