显示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的简单网站

回答

相关问题