Full-Stack React Projects

Generating markup

The purpose of using renderToString is to generate an HTML string version of the React component that is to be shown to the user in response to the requested URL: 

mern-skeleton/server/express.js:

const context = {} 
const markup = ReactDOMServer.renderToString(
      <StaticRouter location={req.url} context={context}>
        <JssProvider registry={sheetsRegistry} generateClassName=          {generateClassName}>
          <MuiThemeProvider theme={theme} sheetsManager={new Map()}>
            <MainRouter/>
          </MuiThemeProvider>
        </JssProvider>
      </StaticRouter>
) 

The client app's root component, MainRouter, is wrapped with the Material-UI theme and JSS to provide the styling props needed by the MainRouter child components. The stateless StaticRouter is used here instead ...