Reactjs + Reduxを表示するシンプルなウェブサイト

Question

私は貧乏人を勉強しようとしています。すべての仕組みを理解していますが、私が見ているすべての例はとても簡単なので、自分のウェブページを始めるとすぐに立ち往生しました。

すべての例は、空白のページの1つまたは2つのコンポーネントです。見た目はスタイリングされていても何もありません。ヘッダー、フッター、ナビゲーションバーはありません。

私には、ヘッダー、フッター、メインコンテナ、サイドバーがあり、クリック可能なすべてのユーザーアイテムがリストされています。

静的なHTMLを書き込む手がかりがありません（コンポーネントをダンプするのか、htmlだけをダンプしますか）、複数のスマートコンポーネントを表示する方法がわかりません（サイドバー、メインコンテナでクリックされた内容サイドバー）。

私が見るすべてのチュートリアルでは、1つのdiv要素にすべてが書き込まれます

<div id="root"></div> 

私はエリアごとにこれらの多くを持っているし、これらのみとめを持っていますか？あなたのindex.htmlで

ReactDOM.render(
    <Provider store={store}> 
     <App /> 
    </Provider>, 
    document.getElementById('root') 
); 

Answer 1

<div id="root"></div>あなたのリアクトアプリケーションのための「ターゲット」で、一度だけ表示されます。 同様に、アプリケーションをreactDOMに一度だけレンダリングする必要があります。

import React, { Component } from 'react'; 

import Header from './components/header'; 
import Footer from './components/footer'; 
import MainContainer from './components/main_container'; 

class App extends Component { 
    render() { 
    return (
     <div> 
     <Header /> 
     <MainContainer /> 
     <Footer /> 
     </div> 
    ); 
    } 
} 

これは、ヘッダー、フッター、メインコンテナの各コンポーネントが作成されていることを前提としています。あなたのAppコンポーネントは、（非常に単純化して）複数のコンポーネントを含む大きなコンポーネントと考えることができます。したがって、AppをReactDOMにレンダリングすると、App内に含まれる他のコンポーネントを効果的にレンダリングすることになります。

注意：これは、webpack、babel、es6の使用を前提としています。

Answer 2

Facebookが反応し、ネイティブでアプリを構築するための素晴らしいチュートリアルを持って、このセクションはReduxの事を説明しています http://makeitopen.com/tutorials/building-the-f8-app/data/
このセクションでは、それほど反応ネイティブの事を恐れてはいけないかReactJS + Reduxのでは建築家に、基本的にはこのセクションはウェブアプリケーションとほぼ同じです。 you can find code here