显示 Reactjs + Redux 的简单网站答案

【问题标题】：Simple Website that Shows Reactjs + Redux显示 Reactjs + Redux 的简单网站
【发布时间】：2016-12-08 12:03:48
【问题描述】：

我正在尝试学习 redux 和 react，我有点了解它是如何工作的，但是我看到的每个示例都非常简单，以至于当我开始自己的网页时，我立即被卡住了。

所有示例只是空白页面上的一两个组件，它们的样式可能看起来不错，但没有其他内容，没有页眉、页脚、没有导航栏。

所以对我来说，我有一个页眉、页脚、主容器和一个侧边栏，列出了所有可点击的用户项目。

我不知道在哪里编写静态 html（它们是转储组件还是只是 html？），我不知道如何呈现多个智能组件（侧栏、主容器显示点击内容的内容侧边栏）。

我看到的每个教程都将所有内容写入一个 div

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

每个区域我都有很多这些，然后有多个？

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

【问题讨论】：

reactjs 中的标准方式是拥有一个 html 元素，您的 react 代码在您的页面上构建所有其他组件并将它们组合在一起以显示您的网页。这意味着一切都是由 JS “即时”构建的。它使您可以更好地控制不同组件之间的通信。现在如果你想要一些静态元素，你可以把它们放在你的 HTML 中，然后像在你的帖子中一样将反应部分加载到一个 div 中。
您可以查看一些更复杂的redux 应用程序，例如SoundRedux。它展示了如何构建具有许多组件的复杂应用程序。您可以轻松克隆、在本地运行并检查所有代码。

标签： html reactjs redux

【解决方案1】：

index.html 中的<div id="root"></div> 是 React 应用程序的“目标”，并且只出现一次。同样，您只需要将 App 渲染到 reactDOM 一次。然后，您的 App 组件可以自己渲染多个组件，例如

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>
    );
  }
}

这假设您已经创建了 Header、Footer 和 MainContainer 组件。您的App 组件可以（非常简单地）被认为是包含多个组件的更大组件。因此，如果您将 App 渲染为 ReactDOM，您实际上是在渲染 App 中包含的其他组件。

请注意：这里假设使用了 webpack、babel 和 es6。

【讨论】：

【解决方案2】：

Facebook 有一个很棒的在 react-native 中构建应用程序的教程，这部分解释了 redux 的事情： http://makeitopen.com/tutorials/building-the-f8-app/data/
这部分基本上是如何在 ReactJS + Redux 中进行架构，所以不要害怕 react-native 的东西，这部分几乎和 web 应用程序一样。 you can find code here

【讨论】：