顯示Reactjs + Redux的簡單網站

我想學習redux並作出反應，我有點得到它是如何工作的，但每個我看到的例子都非常簡單，當我開始自己的網頁時，我被卡住了。顯示Reactjs + Redux的簡單網站

所有的例子都只是空白頁面上的一個或兩個組件，它們可能被設計得很好看，但沒有別的東西，沒有頁眉，頁腳，沒有導航欄。

所以對於我來說，我有一個頁眉，頁腳，主容器和側欄，列出所有可點擊的用戶項目。我不知道如何呈現多個智能組件（側欄，主容器什麼顯示什麼內容的點擊），我不知道在哪裏寫靜態HTML（他們轉儲組件或只是HTML？），我不知道如何呈現多個智能組件在側欄中）。

每個教程中，我看到的一切被寫入到一個DIV

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

我必須爲每個區域許多這些，然後讓這些多發？

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

來源

2016-08-02 chobo2

reactjs中的標準方法是擁有一個html元素，並且您的反應代碼會在您的頁面上構建所有其他組件，並將它們放在一起以顯示您的網頁。這意味着一切都是由JS「即時」建立的。它可以讓你更好地控制不同的組件相互交談。現在，如果你想要一些靜態元素，你可以把它們放到你的HTML中，然後像在你的帖子中一樣將反應部分加載到一個div中。 – jzm

你可以看看更復雜的'redux'應用程序，例如[SoundRedux]（https://github.com/andrewngu/sound-redux）。它展示瞭如何用許多組件構建一個複雜的應用程序。您可以輕鬆克隆，在本地運行並檢查所有代碼。 – Steve

<div id="root"></div>在index.html是「目標」爲您作出反應的應用程序，只出現一次。同樣，您只需將應用程序呈現給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> 
    ); 
    } 
}

這是假設你已經創建了頁眉，頁腳和mainContainer上的部件。您的App組件可以被認爲（非常簡單）爲包含多個組件的較大組件。因此，如果您將應用程序渲染到ReactDOM，則您實際上正在渲染App中包含的其他組件。

請注意：這假定使用webpack，babel和es6。

來源

2016-08-03 08:13:39 JimmyWinestock

Facebook已經在反應原生應用程序建立一個偉大的教程，這部分解釋了終極版的東西： http://makeitopen.com/tutorials/building-the-f8-app/data/
這部分基本上是ReactJS如何建築師+終極版，所以不要害怕反應本土的東西，這部分幾乎與網絡應用程序中的相同。 you can find code here

來源

2016-08-03 08:40:50 Wint

顯示Reactjs + Redux的簡單網站

回答

相關問題