Список тегов для более удобного поиска постов

👉 Основные понятия

#компоненты
#jsx
#жизненныйциклкомпонента
#виртуальныйdom
#состояние
#обработкасобытий
#потокданных
#ключи
#формы
#рефы
#hoc
#рендерпропсы
#контекст
#порталы
#хуки
#concurrentmode

👉 Управление состоянием

#управлениесостоянием
#redux
#mobx
#recoil

👉 Работа с ошибками

#обработкаошибок
#предохранители
#отладка
#проверкатипов
#typescript
#строгийрежим

👉 Оптимизация

#оптимизация
#profiler
#ленивыекомпоненты
#purecomponent

👉 Тестирование

#тестирование
#jest
#testinglibrary

👉 Серверный рендеринг

#серверныйрендеринг

👉 Стилизация

#стили
#styledcomponents
#jss
#radium
#shadowdom

👉 Распространенные задачи

#валидацияформ
#роутинг
#обменданными
#rtkquery

👉 Прочее

#документация - материалы из официальной документации
#ссылки - полезные ссылки
#началоработы - базовые знания, необходимые для начала работы
#паттерны - хорошие практики работы с React
#примерыкода - реальные примеры кода для изучения
#важно - моменты, на которые нужно обратить внимание
#ошибки - частые ошибки новичков в React
#вопросы
#подкапотом - невидимая часть React
#подключение - подключение React, а также дополнительных пакетов
#инструменты - полезные инструменты для разработки
#доступность
#проект - организация файлов и другие вопросы уровня целого проекта
#api
#безопасность
#отложено - аспекты уже пройденных тем, временно отложенные

React API

Часть методов, предоставляемых библиотекой, мы уже разобрали. Оставшиеся в основном относятся к работе с DOM-элементами. В большинстве случаев с этим успешно справляется синтаксис JSX, но на всякий случай, вот список:

👉 React.createElement() - создает новый React-элемент
👉 React.createFactory() - создает фабрику React-элементов определенного типа
👉 React.cloneElement() () - клонирует React-элемент и возвращает копию
👉 React.isValidElement() - проверяет, является ли объект элементом React
👉 React.Children() - набор функций для работы со структурой this.props.children

ReactDOM API

Пакет react-dom предоставляет специфические для DOM методы, которые могут быть использованы на верхнем уровне вашего приложения. Мы уже знакомы с двумя:

👉 ReactDOM.render() - рендерит React-элемент в DOM-элемент
👉 ReactDOM.createPortal() - создает портал для рендера компонента вне родительского DOM-элемента

А вот остальные:

👉 ReactDOM.hydrate() - нужен для гидратации контейнера при серверном рендеринге. В этом мы будем разбираться позже
👉 ReactDOM.unmountComponentAtNode() - Удаляет смонтированный компонент React из DOM

ReactDOMServer

Объект с набором методов для генерирования статической разметки. Используется на Node-сервере, вернемся к нему позже.

Страница в документации (рус.): https://ru.reactjs.org/docs/react-dom-server.html

#api #документация

React Router. Вспомогательные функции

Помимо рассмотренных компонентов и хуков, в пакете React Router есть еще ряд вспомогательных функций, которые используются для матчинга роутов и текущего урла, рендера активного роута и т.д. Они используются под капотом, но при необходимости, можно использовать их напрямую.

Их можно найти в документации на страничке с описанием API: https://reactrouter.com/docs/en/v6/api#api-reference

Если при дальнейшем изучении что-то из этого понадобится, то мы сюда вернемся.

#документация #роутинг