Server side docs require JSX compiling but don't talk about it

[kingjerod]

I'm trying to follow the docs on server side rendering, and inside the function handleRender it calls renderToString with JSX elements. Code here:

https://github.com/reactjs/redux/blob/master/docs/recipes/ServerRendering.md

function handleRender(req, res) {
  // Create a new Redux store instance
  const store = createStore(counterApp)

  // Render the component to a string
  const html = renderToString(
    <Provider store={store}>
      <App />
    </Provider>
  )

  // Grab the initial state from our Redux store
  const preloadedState = store.getState()

  // Send the rendered page back to the client
  res.send(renderFullPage(html, preloadedState))
}

This code lives inside the server.js file, alongside the express app. After looking at other parts of the docs, it seems that JSX components are put under the /components directory. Is it implied that this file needs to be compiled also? I don't see anything on that page mentioning that, but otherwise it's not going to work. It seems strange even for the components to have a .js file ending, when they include jsx in them.

[brigand]

It also uses import/export which node doesn't support, and the babel implementation is very unlikely to match what node ends up with. Perhaps a link to a guide on setting up babel with node would suffice; don't want to bloat this.

About the js extension, it's pretty normal. The logic goes that it's not a new language, it's an extension to js, like flow and experimental features, which can be used together or in part (App.flow.stage0.jsx would look silly).

[timdorr]

We should probably add a small note about babel, as @brigand pointed out. I don't think we need to go into the whole boilerplate setup for using babel-register or something like that, as that's a lot of knowledge to drop on code that should be fairly simple.