Rendering to strings

When React components are rendered in Node.js, they're transformed into strings of HTML output. The string content is then returned to the browser, which displays this to the user immediately. Let's look at an example.

Here is the component to render:

import React from "react";
import PropTypes from "prop-types";
 
export default function App({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}
 
App.propTypes = {
  items: PropTypes.arrayOf(PropTypes.string).isRequired
};

Next, let's implement the server that will render this component when the browser asks for it:

import * as React from "react";
import ReactDOM from "react-dom/server&quot...