Это вторая статья в серии о том, как использовать Node для изоморфного рендеринга приложения React. Вы можете найти ссылки на различные части в разделе ниже. В этой статье я рассмотрю ReactDOM.hydrate, React Router и несколько компонентов React.
Если вы хотите взглянуть на код для этой серии статей, вот репозиторий Github, который я создал.
В Части 1 были рассмотрены конфигурации Webpack и Babel для настройки приложения React с рендерингом на стороне сервера.
В третьей части будет настройка маршрутов API и Express-сервера. Эта часть скоро появится!
В четвертой части этой серии мы поговорим об изоморфном рендеринге. Эта часть скоро появится!
Обзор
Прежде чем смотреть на код, давайте обсудим, как выглядит приложение React. Когда пользователь переходит к приложению, ему будет представлена домашняя страница. На главной странице есть кнопка, которая является ссылкой на другую страницу нашего приложения. На второй странице есть панель поиска с кнопкой отправки и вторая кнопка под панелью поиска. Когда пользователь вводит текст в строке поиска и нажимает кнопку «Отправить», мы собираемся инициировать запрос AJAX к API Github. Мы будем искать пользователя с именем, которое было в строке поиска, и если мы найдем пользователя, мы собираемся отобразить его изображение профиля на экране под панелью поиска.
Вторая кнопка сделает запрос AJAX к маршруту API на нашем собственном сервере, который мы настроим в следующей статье. Наш маршрут API ответит JSON, содержащим текст.
Маршрутизатор React и граница ошибок
Теперь, когда мы знаем, что нужно нашему приложению, приступим к его созданию. Мы создадим в нашем клиентском каталоге файл с именем index.js.
В этом файле мы импортируем ReactDOM, BrowserRouter и наш компонент приложения. Возможно, вы знакомы с методом ReactDOM.render в React, но что это за ReactDOM.hydrate? Когда вы используете SSR в приложении React, Hydrate - это полезный метод, который предоставляет React. Hydrate - это метод, который запускается на стороне клиента вашего приложения.
Разница между гидратированием и рендерингом заключается в том, что гидрат не добавляет HTML на вашу веб-страницу, как это делает метод рендеринга. Вместо этого, поскольку на стороне клиента используется гидрат, он оценивает компоненты React, которые вы ему передаете, и компоненты React, которые ваш сервер отправил в браузер. Затем hydrate определяет, где добавить обработчики событий Javascript во всем приложении. Это предотвращает ненужную рендеринг React компонентов, которые уже были отрисованы вашим сервером.
Мы передаем наш компонент приложения как дочерний BrowserRouter, чтобы воспользоваться предоставляемым им API маршрутизации, сохраняя при этом наше приложение одностраничным приложением (SPA).
Далее мы собираемся создать несколько маршрутов для нашего приложения.
Здесь мы импортируем Route и Switch из response-router-dom, наши три компонента, ErrorBoundary, HomePage и LinkedPage из их локальных файлов и фрагмент из response.
Фрагмент позволит нам окружить несколько компонентов одним родительским узлом без фактического добавления дополнительных узлов в DOM.
Используя компонент Switch, расположенный в строке 12, мы можем определить все маршруты, которые мы хотим, чтобы наше приложение использовало. В строках 13 и 14 мы определяем два отдельных маршрута. На каждом маршруте проезжается 3 реквизита:
Точно
Мы передаем точную опору, потому что в противном случае React Router будет соответствовать маршрутам, которые начинаются с указанного вами пути (например, путь «/» будет соответствовать запрошенному URL-адресу «/ connectedpage», потому что URL-адрес начинается с «/»).
Путь
Определяет, какой URL-адрес будет соответствовать этому компоненту маршрута.
Компонент
Если URL-адрес в браузере совпадает с путем, то свойство компонента определит, какой компонент отображается на экране.
Наш компонент ErrorBoundary будет выглядеть так:
Границы ошибок в React - это компоненты, которые могут перехватывать ошибки, создаваемые другими компонентами. Если компонент в React выдает ошибку во время рендеринга, по умолчанию React отключит этот компонент и все его дочерние элементы с экрана, оставив пользователю пустой экран. Если граница ошибки перехватывает ошибку, вы можете решить, что вместо этого отображать на экране. В этом случае, если возникает ошибка, мы установим состояние hasError в значение true, и если состояние hasError когда-либо будет истинным, мы отобразим на экране некоторый текст, указывающий, что произошла ошибка.
Если вы вернетесь к компоненту App (где определены наши маршруты), вы увидите, что наша ErrorBoundary является родительским элементом для компонента Switch. Это означает, что если какой-либо из компонентов в любом из наших маршрутов выдает ошибку во время рендеринга, наша ErrorBoundary может отловить эту ошибку и, по крайней мере, отобразить некоторый текст на экране.
Компоненты
Наконец, у нас есть отдельные компоненты. Я не буду тратить слишком много времени на детализацию компонентов; я покажу код и кратко объясню, что делает каждый компонент.
Домашняя страница
Прежде всего, это домашняя страница.
Этот компонент состоит из кнопки, при нажатии которой происходит ссылка на нашу связанную страницу маршрут.
Связанная страница
Далее идет наш компонент LinkedPage.
Этот компонент будет отображать наш компонент GithubSearch и наш компонент CoolButton.
Поиск на Github
В-третьих, это наш компонент, который будет запрашивать API Github для поиска изображения профиля пользователя Github.
Этот компонент состоит из формы с панелью поиска и кнопкой отправки (строки 40–49). Когда пользователь набирает текст в строке поиска, состояние нашего компонента обновляется, и значение строки поиска будет таким, каким он набрал (мы используем управляемый компонент). Когда пользователь нажимает кнопку Отправить, мы используем axios для отправки запроса на получение к API Github и указываем имя пользователя в запросе в строке 24. Если это действительное имя пользователя Github, мы берем ответ и сохраняем его в состоянии нашего компонента. . Если в ответе есть изображение профиля, мы отобразим его на экране; в противном случае мы отобразим текст (строки 52 - 57).
Крутая кнопка
Наконец, у нас есть классная кнопка.
Этот компонент похож на наш компонент GithubSearch, только при нажатии кнопки мы делаем запрос на получение к нашему собственному api, который ответит JSON, содержащим текст. Получив ответ, мы сохраняем его в состоянии нашего компонента и отображаем текст на экране.
