Максим

Всякие красивые чекбоксы, радиобаттоны и прочие интерфейсы верстаю вручную, и естесственно адаптивно.

// для примера обе переменные (store и dispatch) объявлены в той же области видимости
// на самом деле их нет в вашем файле компонента
// Так как функция connect вызывается "где-то там, где они доступны"
// вы имеете к ним доступ
let dispatch = () => console.log("dispatch")
let store = { user: { name: 'Mike', age: 15 }, data: [1,2,3] }

function connect(mapStateToProps, mapDispatchToProps) {
  console.log(mapStateToProps(store))
}

function mapStateToProps(storeFromClosure) { // здесь оказывается глобальный store доступный из замыкания
  return {
    myData: storeFromClosure.data 
  }
}

connect(mapStateToProps, null)

Есть меню(не навигация, а просто набор плюшек, к примеру добавить заметку) и сама область где отображается эта заметка.

...
<HeaderContainer /> // (или тупой <Header />)
{ this.props.children }
...

...
<Route path='/add' component={AddContainer} />
<Route path='/edit/:id' component={EditContainer} />
...

connect(mapStateToProps,mapDispatchToProps)(имя_компонента)

И еще. думаю вынести все данные(пункты меню к примеру) в отдельный файл(этакий недосервер)
Где с ним лучше общаться? использую react-redux

Да и мне примеры вовсе не нужны. хочу для начала своих шишек набить.
НО точно не хочу пару месяцев пилить проект(бесконечно усложняющаяся toDo) а потом понять что привык делать так как не надо.

module.exports = {
  devtool: 'cheap-module-source-map',
  entry: [
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'production/public/'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new ExtractTextPlugin({
      filename: 'style.css',
      disable: false,
      allChunks: false, // true
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        loaders: ['babel-loader'],
        include: path.join(__dirname, 'src'),
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: ['css-loader', 'postcss-loader'],
          publicPath: '/public',
        }),
      }, {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: ['css-loader', 'postcss-loader', 'sass-loader'],
          publicPath: '/public',
        }),
      },
....

module.exports = {
  devtool: 'cheap-module-source-map',
  entry: [
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'production/public/'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new ExtractTextPlugin('style.css', {
      allChunks: false
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['babel'],
        include: path.join(__dirname, 'src')
      },
      {
        test: /\.scss$/,
        include: path.join(__dirname, 'src'),
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader!sass-loader')
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      },
...

const ExtractTextPlugin = require('extract-text-webpack-plugin');