// on the server
import ReactDOMServer from 'react-dom/server';

const markup = ReactDOMServer.renderToStaticMarkup(<App />);
return `<!doctype html>${ markup }`;
// on the client
import ReactDOM from 'react-dom';

ReactDOM.render(<App />, document.querySelector('#root'));
// webpack.config.js
module.exports = {
  entry: {
    polyfills: '.../polyfills/index.js',
    app: '.../src/client.js'
  },
  output: {
    filename: '[name]-[hash].js',
    path: path.resolve(__dirname, 'public/js'),
    publicPath: settings.basePath + '/js/',
    chunkFilename: 'part-[id]-[chunkhash].js'
  }
  ...
};
{
  path: SEARCH_APP_MOUNT_PATH,
  init: () => import('./search')
    .then(extractDefaultExport)
    .then(createModule),
  component: ModuleRoute
}
import React from 'react';
import Modular from 'react-app';
import Composable from 'react-app';

export default function App() {
  return (
    <Modular>
      <Composable>It works!</Composable>
      <Composable>And it scales.</Composable>
    </Modular>
  );
}
// side effects managed with redux-saga
function * watchLogout(authService) {
  yield takeEvery(LOGOUT, function * () {
    authService.logout();
    yield put(trackLogout());
  });
}
// proper dependency injection
map('conditionService')
  .to(matchClient => createConditionService(matchClient))
  .as(LAZY, SINGLETON, PROVIDER)
  .injecting('matchClient');

// later in the code
export default wire(ConditionAutocomplete)
  .with('conditionService')
  .toProps(conditionService => ({
    fetch: keyword => conditionService.fetch(keyword)
  }));
import styled from 'styled-components';
  
const Icon = styled(X).attrs({
  strokeWidth: 2
})`
  height: 0.75rem;
  width: 0.75rem;
  stroke-linecap: round;
`;

export default function CloseButton(props) {
  return (
    <Close aria-label='Close' padding={2} {...props}>
      <Icon />
    </Close>
  );
}