Простой веб-сайт, который показывает Reactjs + Redux

Question

Я пытаюсь узнать, как это работает, и каждый вид работы, но каждый пример, который я вижу, настолько прост, что когда я начал свою собственную веб-страницу, я сразу же застрял.

Все примеры - это всего лишь один или два компонента на пустой странице, они могут быть стильными, чтобы выглядеть красиво, но нет ничего другого, ни заголовков, ни нижних колонтитулов, ни навигационных баров.

Для меня у меня есть заголовок, нижний колонтитул, главный контейнер и боковая панель, в которой перечислены все элементы пользователей, которые можно щелкнуть.

Я не знаю, где написать статический html (они являются дампами или просто html?), Я не знаю, как визуализировать несколько интеллектуальных компонентов (боковая панель, основной контейнер, отображающий содержимое того, что было нажато на в боковой панели).

Каждый учебник я вижу, получает все, что написано в одном DIV

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

Есть ли у меня многие из них для каждой области и затем Mutiple из них?

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

Answer 1

<div id="root"></div> в вашем index.html является «мишенью» для React приложения и появляется только один раз. Аналогично, вам нужно только один раз визуализировать приложение для responseDOM. Ваш компонент 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> 
    ); 
    } 
} 

Это предполагает, что вы создали заголовок, верхний и нижний компоненты MainContainer. Компонент App можно рассматривать (очень упрощенно) как более крупный компонент, содержащий несколько компонентов. Поэтому, если вы оказываете приложение на ReactDOM, вы эффективно представляете другие компоненты, содержащиеся в приложении.

Обратите внимание: это предполагает использование webpack, babel и es6.

Answer 2

Facebook имеет большой учебник для построения приложений в реагировать родной, этот раздел объясняет Redux вещи: http://makeitopen.com/tutorials/building-the-f8-app/data/
Этот раздел в основном, как архитектор в ReactJS + Redux, так что не бойтесь, что реагировать чужеродные вещи , этот раздел почти такой же, как в веб-приложениях. you can find code here