freeCodeCamp

4.0 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d403618d	Render React on the Server with renderToString	6	false		Render React на сервере с помощью renderToString

Description

До сих пор вы предоставляли компоненты React на клиенте. Обычно это то, что вы всегда будете делать. Однако есть некоторые варианты использования, когда имеет смысл отображать на сервере компонент React. Так как React - это библиотека просмотра JavaScript, и вы можете запускать JavaScript на сервере с помощью Node, это возможно. Фактически, React предоставляет метод renderToString() который вы можете использовать для этой цели. Существует две основные причины, по которым рендеринг на сервере может быть использован в приложении реального мира. Во-первых, без этого приложения React будут состоять из относительно пустого HTML-файла и большого пакета JavaScript, когда он первоначально загружен в браузер. Это может быть не идеальным для поисковых систем, которые пытаются индексировать содержимое ваших страниц, чтобы люди могли вас найти. Если вы визуализируете начальную разметку HTML на сервере и отправляете ее клиенту, загрузка начальной страницы содержит всю разметку страницы, которая может быть сканирована поисковыми системами. Во-вторых, это создает более быструю загрузку начальной загрузки страницы, поскольку отображаемый HTML меньше, чем код JavaScript всего приложения. React по-прежнему сможет распознать ваше приложение и управлять им после начальной загрузки.

Instructions

Метод renderToString() предоставляется на ReactDOMServer , который доступен здесь как глобальный объект. Метод принимает один аргумент, который является элементом React. Используйте это, чтобы отобразить App в строку.

Tests

tests:
  - text: Компонент <code>App</code> должен отображать строку с помощью <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

4.0 KiB Raw Blame History Unescape Escape