freeCodeCamp/curriculum/challenges/spanish/03-front-end-libraries/react/render-react-on-the-server-with-rendertostring.spanish.md

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d403618d	Render React on the Server with renderToString	6	false		Render React en el servidor con renderToString

Description

Hasta ahora, has estado renderizando componentes React en el cliente. Normalmente, esto es lo que siempre harás. Sin embargo, hay algunos casos de uso en los que tiene sentido renderizar un componente React en el servidor. Dado que React es una biblioteca de vista de JavaScript y puede ejecutar JavaScript en el servidor con Node, esto es posible. De hecho, React proporciona un método renderToString() que puede utilizar para este propósito. Hay dos razones clave por las que la representación en el servidor se puede utilizar en una aplicación del mundo real. Primero, sin hacer esto, sus aplicaciones React consistirán en un archivo HTML relativamente vacío y un gran paquete de JavaScript cuando se cargue inicialmente en el navegador. Es posible que esto no sea ideal para los motores de búsqueda que intentan indexar el contenido de sus páginas para que las personas puedan encontrarlo. Si representa el marcado HTML inicial en el servidor y lo envía al cliente, la carga de la página inicial contiene todo el marcado del que los motores de búsqueda pueden rastrear. En segundo lugar, esto crea una experiencia de carga de página inicial más rápida porque el HTML representado es más pequeño que el código JavaScript de toda la aplicación. React aún podrá reconocer su aplicación y administrarla después de la carga inicial.

Instructions

El método renderToString() se proporciona en ReactDOMServer , que está disponible aquí como un objeto global. El método toma un argumento que es un elemento React. Usa esto para renderizar la App a una cadena.

Tests

tests:
  - text: El componente de la <code>App</code> debe representar en una cadena utilizando <code>ReactDOMServer.renderToString</code> .
    testString: 'getUserInput => assert(getUserInput("index").replace(/ /g,"").includes("ReactDOMServer.renderToString(<App/>)") && Enzyme.mount(React.createElement(App)).children().name() === "div", "The <code>App</code> component should render to a string using <code>ReactDOMServer.renderToString</code>.");'

Challenge Seed

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <div/>
  }
};

// change code below this line

Before Test

var ReactDOMServer = { renderToString(x) { return null; } };

After Test

console.info('after the test');

Solution

// solution required