2.9 KiB
2.9 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d403618d | Render React on the Server with renderToString | 6 | false | Render React en el servidor con renderToString |
Description
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
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