{"blocks":[{"type":"paragraph","data":{"text":"React.js — один из лучших и наиболее популярных способов создать одностраничное приложение. Это гибкий и удобный фреймворк, с помощью которого можно либо добавить компонент на существующий сайт, либо создать новый сайт с нуля."}},{"type":"paragraph","data":{"text":"Сейчас React.js используется во многих других фреймворках и инструментах вроде Next.js, GatsbyJs, Razzle, After.js и т. д. Поэтому если вы хорошо разберётесь в React.js, то пользоваться всеми этими фреймворками станет легче."}},{"type":"hint","data":{"fullWidth":true,"text":"Смотрите также: React.js для продолжающих"}},{"type":"header2","data":{"level":2,"text":"Используйте фрагменты вместо div"}},{"type":"paragraph","data":{"text":"Зачастую у нас на руках множество компонентов, которые приходится оборачивать в div, т.к. render() позволяет вернуть только один компонент. Таким образом мы добавляем в документ лишний HTML-элемент."}},{"type":"paragraph","data":{"text":"Согласно официальному руководству:"}},{"type":"hint","data":{"fullWidth":true,"text":"Порой мы нарушаем семантику HTML, когда добавляем элементы <div> в JSX, чтобы заставить код React работать, особенно при работе со списками (<ol>, <ul> и <dl>) и таблицами <table>. В таких случаях лучше использовать фрагменты React для группировки нескольких элементов."}},{"type":"code","data":{"code":"import React, { Fragment } from 'react';\r\n\r\nfunction ListItem({ item }) {\r\n return (\r\n \r\n

{item.term}

\r\n

{item.description}

\r\n \r\n );\r\n}\r\n\r\nfunction Glossary(props) {\r\n return (\r\n

\r\n {props.items.map(item => (\r\n \r\n ))}\r\n \r\n );\r\n}","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Больше информации можно найти в документации по фрагментам."}},{"type":"header2","data":{"level":2,"text":"Пользуйтесь контекстом чаще"}},{"type":"paragraph","data":{"text":"Благодаря контексту можно передавать данные через дерево компонентов, вместо того чтобы вручную передавать свойства на каждом уровне. Поэтому если у вас есть несколько компонентов, которым нужны данные, используйте контекст. Если у вас есть только один дочерний компонент, используйте композицию."}},{"type":"paragraph","data":{"text":"Пример установки темы из документации:"}},{"type":"embed","data":{"link":"theme-context.js"}},{"type":"code","data":{"code":"export const themes = {\r\n light: {\r\n foreground: '#000000',\r\n background: '#eeeeee',\r\n },\r\n dark: {\r\n foreground: '#ffffff',\r\n background: '#222222',\r\n },\r\n};\r\nexport const ThemeContext = React.createContext(\r\n themes.dark // значение по умолчанию\r\n);","language":"javascript lazy-code"}},{"type":"embed","data":{"link":"themed-button.js"}},{"type":"code","data":{"code":"import {ThemeContext} from './theme-context';\r\nclass ThemedButton extends React.Component {\r\n render() {\r\n let props = this.props;\r\n let theme = this.context;\r\n return (\r\n \r\n );\r\n }\r\n}\r\nThemedButton.contextType = ThemeContext;\r\nexport default ThemedButton;","language":"javascript lazy-code"}},{"type":"embed","data":{"link":"app.js"}},{"type":"code","data":{"code":"import {ThemeContext, themes} from './theme-context';\r\nimport ThemedButton from './themed-button';\r\n// Промежуточный компонент, который использует ThemedButton\r\nfunction Toolbar(props) {\r\n return (\r\n \r\n Change Theme\r\n \r\n );\r\n}\r\nclass App extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n theme: themes.light,\r\n };\r\n\tthis.toggleTheme = () => {\r\n\t this.setState(state => ({\r\n\t theme:\r\n\t state.theme === themes.dark\r\n\t ? themes.light\r\n\t : themes.dark,\r\n\t }));\r\n\t };\r\n\t }\r\n\trender() {\r\n\t // Кнопка ThemedButton внутри ThemeProvider\r\n\t // использует тему из state, в то время как внешняя\r\n\t // использует тёмную тему по умолчанию\r\n\t return (\r\n\t \r\n\t \r\n\t \r\n\t \r\n\t

\r\n\t \r\n\t

\r\n\t \r\n\t );\r\n\t }\r\n}\r\nReactDOM.render(, document.root);","language":"javascript lazy-code"}},{"type":"header2","data":{"level":2,"text":"Используйте хотя бы одни границы ошибок"}},{"type":"paragraph","data":{"text":"В React 16 появилась такая замечательная вещь, как границы ошибок. По названию понятно, что это компоненты, которые отлавливают ошибки во всех дочерних компонентах. Идея очень проста: создайте компонент и используйте его в качестве родителя каждый раз, когда вам понадобится обрабатывать ошибки. Если в каком-то из дочерних компонентов возникнет ошибка, границы ошибок будут вызваны для обработки. Имейте в виду, что границы ошибок отлавливают ошибки отображения. Императивные ошибки вроде тех, что возникают в обработчиках событий, должны отлавливаться try/catch-блоком JavaScript."}},{"type":"paragraph","data":{"text":"Для логирования информации об ошибке нужно использовать componentDidCatch():"}},{"type":"code","data":{"code":"class ErrorBoundary extends React.Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\tthis.state = { hasError: false };\r\n\t}\r\n\tstatic getDerivedStateFromError(error) {\r\n\t // Обновляем состояние, чтобы следующее отображение\r\n\t // показало интерфейс на случай ошибок\r\n\t return { hasError: true };\r\n\t }\r\n\tcomponentDidCatch(error, info) {\r\n\t\t// Также можно залогировать ошибку\r\n\t\tlogErrorToMyService(error, info);\r\n\t}\r\n\trender() {\r\n\t if (this.state.hasError) {\r\n\t // Можно отобразить любой интерфейс на случай ошибок\r\n\t return

Something went wrong.

;\r\n\t }\r\n\t return this.props.children; \r\n\t}\t\r\n}","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Теперь его можно использовать как обычный компонент:"}},{"type":"code","data":{"code":"\r\n \r\n","language":"html lazy-code"}},{"type":"paragraph","data":{"text":"Если в самом компоненте ErrorBoundary возникнет ошибка, он её не сможет обработать."}},{"type":"paragraph","data":{"text":"Такая функция была доступна в React 15 под названием unstable_handleError(). Этот метод больше не работает, и с бета-релиза 16 версии вам нужно использовать componentDidCatch() вместо него."}},{"id":"d07a573e-6b88-44c4-880e-9bee1308e10c","type":"banner-blank","data":{}},{"type":"paragraph","data":{"text":"Разработчики React предоставили инструмент для автоматического изменения кода."}},{"type":"header2","data":{"level":2,"text":"Используйте продакшн-сборку в реальной среде"}},{"type":"paragraph","data":{"text":"На официальном сайте перечислены конфигурации, которые могут улучшить производительность. Не забудьте ознакомиться с ними перед развёртыванием в проде."}},{"type":"paragraph","data":{"text":"Здесь можно почитать руководство."}},{"type":"paragraph","data":{"text":"На конфигурацию уйдёт всего 10 минут, а взамен ваше приложение получит большой прирост к производительности."}},{"type":"header2","data":{"level":2,"text":"Используйте ссылки ref для взаимодействия с дочерним элементом"}},{"type":"paragraph","data":{"text":"Мы можем использовать ref’ы для активации анимации, выбора текста или управления фокусом. Например, чтобы установить фокус в React, мы можем ссылаться на элементы DOM. С помощью ref’ов мы сначала создаём ссылку на элемент в JSX класса компонента:"}},{"type":"code","data":{"code":"class CustomTextInput extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n // Создаём ссылку для хранения элемента DOM textInput DOM\r\n this.textInput = React.createRef();\r\n }\r\n render() {\r\n // Используем callback ref, чтобы сохранить ссылку на элемент\r\n // в поле экземпляра (например, this.textInput).\r\n return (\r\n \r\n );\r\n }\r\n}","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"При необходимости мы можем установить фокус где угодно в компоненте:"}},{"type":"code","data":{"code":"focus() {\r\n // Явно устанавливаем фокус с помощью DOM API\r\n // Примечание: \"current\" нужен для получения доступа к узлу DOM\r\n this.textInput.current.focus();\r\n}","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Подробнее в документации React."}},{"type":"header2","data":{"level":2,"text":"Используйте разделение кода"}},{"type":"paragraph","data":{"text":"Если вы используете CRA (create react app) или Next.js, то у вас уже должен быть готовый конфигурационный файл webpack. Он создаст один файл (бандл), который будет содержать всё ваше приложение. Если вы используете сторонние библиотеки и/или приложение увеличивается в размерах, то и бандл будет становиться больше. Когда пользователь зайдёт на сайт, браузер скачает весь бандл и затем всё отобразит. Это может сильно замедлить сайт, поэтому гораздо лучше разделить код и таким образом разбить бандл на части. В результате браузер будет закачивать нужные части по мере необходимости, что приведёт к улучшению времени загрузки сайта."}},{"id":"25ab9fae-a59e-4109-b48f-e44beb08c574","type":"banner-blank","data":{}},{"type":"paragraph","data":{"text":"Для достижения нашей цели можно использовать React.lazy."}},{"type":"paragraph","data":{"text":"Примечание React.lazy и Suspense пока нельзя использовать для отображения на стороне сервера. Для решения этой проблемы вы можете воспользоваться React Loadable. В документации можно найти хорошее руководство по разделению бандлов с серверным отображением."}},{"type":"paragraph","data":{"text":"Разделять код можно разными способами, но хорошей отправной точкой будет разделение на основе путей."}},{"type":"paragraph","data":{"text":"Как правило, переходы на новую страницу требуют времени на загрузку. А если вы заново отображаете всю страницу за раз, то пользователи, не могут взаимодействовать с другими элементами на странице в то же время."}},{"type":"paragraph","data":{"text":"Вот пример настройки разделения на основе путей с помощью библиотек вроде React Router и React.lazy:"}},{"type":"code","data":{"code":"import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\r\nimport React, { Suspense, lazy } from 'react';\r\nconst Home = lazy(() => import('./routes/Home'));\r\nconst About = lazy(() => import('./routes/About'));\r\nconst App = () => (\r\n \r\n Loading...}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n);","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Suspense нужен здесь на всякий случай: он будет показан, если нужный бандл ещё не загрузился. Здесь вы можете использовать индикатор загрузки, чтобы показать пользователям, что процесс не стоит на месте. Вы можете использовать границы ошибок даже в качестве родителя Suspense для обработки других ошибок вроде сетевых."}},{"id":"5e452d36-5111-41c6-a705-d87d11e4f43d","type":"banner-blank","data":{}},{"type":"paragraph","data":{"text":"React.lazy пока что поддерживает только экспорт по умолчанию. Если вам нужно использовать именованные экспорты, загляните в документацию React."}},{"type":"header2","data":{"level":2,"text":"Пользуйтесь статической проверкой типов"}},{"type":"paragraph","data":{"text":"JavaScript является динамически и слабо типизированным языком, поэтому многие проблемы возникают из-за неправильных типов. Для решения этой проблемы можно использовать различные инструменты для проверки типов. Flow — известный и дружелюбный к новичкам вариант. Он был разработан в Facebook и часто используется с React. Он позволяет аннотировать переменные, функции и компоненты React с помощью специального синтаксиса и даёт возможность быстро отлавливать ошибки. Здесь можно изучить основы Flow, а в этом официальном руководстве найти пошаговые инструкции по использованию."}},{"type":"header3","data":{"level":3,"text":"Итак, что же нужно делать, чтобы стать продвинутым разработчиком React"}},{"type":"hint","data":{"fullWidth":true,"text":"

Используйте фрагменты вместо div.
Чаще пользуйтесь контекстом.
Используйте границы ошибок.
Используйте продакшн-сборку в реальной среде.
Используйте ссылки ref для взаимодействия с дочерним элементом.
Используйте разделение кода.
Пользуйтесь статической проверкой типов.

"}}]}

Ошибка в настройках сайта