2.9 KiB
2.9 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d403618d | Render React on the Server with renderToString | 6 | false | Renderizar Reagir no Servidor com renderToString |
Description
renderToString()
que você pode usar para essa finalidade. Existem dois motivos principais pelos quais a renderização no servidor pode ser usada em um aplicativo do mundo real. Primeiro, sem fazer isso, seus aplicativos React consistiriam em um arquivo HTML relativamente vazio e um grande pacote de JavaScript quando inicialmente carregado no navegador. Isso pode não ser ideal para mecanismos de pesquisa que tentam indexar o conteúdo de suas páginas para que as pessoas possam localizá-lo. Se você renderizar a marcação HTML inicial no servidor e enviá-la ao cliente, o carregamento inicial da página conterá toda a marcação da página, que pode ser rastreada pelos mecanismos de pesquisa. Segundo, isso cria uma experiência de carregamento de página inicial mais rápida porque o HTML renderizado é menor que o código JavaScript de todo o aplicativo. O React ainda poderá reconhecer seu aplicativo e gerenciá-lo após o carregamento inicial. Instructions
ReactDOMServer
renderToString()
é fornecido no ReactDOMServer
, que está disponível aqui como um objeto global. O método usa um argumento que é um elemento React. Use isso para renderizar o App
em uma string. Tests
tests:
- text: O componente <code>App</code> deve renderizar uma string usando <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