Леша Федосеев

index.html — его быть не должно.

Должен быть шаблон (jade, handlebars, whatever), в который:

• через переменную вставляется DOM от реакта (результат React.renderToString);
  
• после него через тег script подключается файл приложения (bundle.js)
  

Сервер рендерит этот шаблон и отдает html с клиентским приложением на клиента.

bundle.js.map — это SourceMaps, их в production быть не должно, оно убирается через настройку Webpack.

Роутинг

Если это SPA:

import express    from 'express';
import React      from 'react';
import Router     from 'react-router';
import Location   from 'react-router/lib/Location';

import App        from '/path/to/App';
import routes     from '/path/to/routes';


const app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.use('/', middleware);

function middleware(req, res, next) {
  
  const location = new Location(req.path, req.query);
  
  Router.run(routes, location, (error, initialState, transition) => {
    
    const body   = React.renderToString(<App {...initialState} />);
    const layout = `${process.cwd()}/path/to/layout.jade`;
    const html   = Jade.compileFile(layout, { pretty: false })({ body });
    
    res.send(html);
    
  });
  
}

Если это статика:

import express  from 'express';
import React    from 'react';

import Main     from 'components/Main';
import About    from 'components/About';


const app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => middleware(req, res, Main));
app.get('/about', (req, res) => middleware(req, res, About));

function middleware(req, res, Component) {
  
  const body   = React.renderToString(<Component />);
  const layout = `${process.cwd()}/path/to/layout.jade`;
  const html   = Jade.compileFile(layout, { pretty: false })({ body });
  
  res.send(html);

}

/* Jade Layout */

doctype html
html
  
  head
    // head stuff...

  body
    #app!= body
    script(src="/bundle.js")

const footerColumns = [
   {
     name: "О компании",
     items: {
       route1: "sdf",
       route2: "sdfsdf"
     }
   },
   {
     name: "Потребителям",
     items: {
       route1: "sdf",
       route2: "sdfsdf",
       route3: "qwert"
     }
   }
];

class Footer extends React.Component {
  
  constructor(props) {
    super(props);
  }
  
  
  _renderColumnItems(items) {
    
    // Если есть возможность изначально сделать `items` массивом,
    // то лучше сделать его массивом
    
    let itemsArray = [];
      
    for (let item in items) {
      if (items.hasOwnProperty(item)) {
        itemsArray.push({
          route: item,
          name : items[item]
        });
      }
    }
        
    return (
      <ul>
        {itemsArray.map(item => (
          <li>
            <a href="#">{item.name}</a>
          </li>
        ))}
      </ul>
    );
  }


  render() {
    
    const { columns } = this.props;
    
    return (
      <div>
        {columns.map(column => (
          <div className="column footer">
            <h3>{column.name}</h3>
            {this._renderColumnItems(column.items)}
          </div>
        ))}
      </div>
    );
  }
}

React.render(<Footer columns={footerColumns} />, document.getElementById('app'));