Question

我正在努力学习redux并做出反应，我总是得到它的全部工作原理，但我看到的每个例子都非常简单，当我开始自己的网页时，我就被卡住了。

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

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

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

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

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

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

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

Answer 1

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

index.html是＆＃34;目标＆＃34;您的React应用程序，只出现一次。同样，您只需要将一次App呈现给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>
    );
  }
}

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

请注意：这假定使用了webpack，babel和es6。

Answer 2

Facebook有一个很好的教程，用于在react-native中构建应用程序，本节介绍了redux的内容： http://makeitopen.com/tutorials/building-the-f8-app/data/
本节基本上是如何在ReactJS + Redux中进行架构，所以不要害怕反应原生的东西，这部分几乎与网络应用程序相同。 you can find code here

显示Reactjs + Redux的简单网站

2 个答案: