Как реализовать однократное выполнение компонентом некоторой операции при первоначальном рендеринге в React?

Для этого можно использовать метод жизненного цикла componentDidMount() в классовом компоненте:

 class Homepage extends React.Component {
   componentDidMount() {
     trackPageView('Homepage')
   }
   render() {
     return <div>Домашняя страница</div>
   }
 }

Любые операции, определенные в componentDidMount(), будут выполнены только один раз при монтировании компонента.

Аналогичный функционал можно реализовать с помощью хука useEffect() с пустым массивом зависимостей.
const Homepage = () => {
useEffect(() => {
trackPageView('Homepage')
}, [])

return <div>Домашняя страница</div>
}

JavaScript на примерах. Практика, практика и только практика

Данная книга - это прекрасное учебное пособие для изучения языка программирования JavaScript на примерах. Изложение ведется последовательно: от написания первой программы, до создания полноценных проектов: интерактивных элементов (типа слайдера, диалоговых окон) интернет-магазина, лендинговой страницы и проч. По ходу даются все необходимые пояснения и комментарии.

Вклад

У вас есть определенная сумма денег a0 > 0. Вы вкладываете их под годовой процент p. И вы хотите в итоге получить сумму денег = a >= a0.

Напишите функцию, datenbdays, которая принимает параметры a0, a, p и возвращает дату, к которой накопится целевая сумма.

Примеры:
date_nb_days(100, 101, 0.98) --> "2017-01-01" (366 days)
date_nb_days(100, 150, 2.00) --> "2035-12-26" (7299 days)

JavaScript Cookbook

Раньше JavaScript был вполне себе легко изучаемым языком программирования, требующим только знаний по работе в браузере. Теперь, когда JavaScript работает и на сервере, и на мобильных устройствах, начинающим программистам становится сложнее выбрать, какое из направлений подойдёт ему лучше всего. В этом руководстве автор раскроет возможности JavaScript в любой из областей, приведёт примеры его работы и даст советы.

Как автоматизированные инструменты помогают улучшить доступность приложения?

Существует две категории инструментов, которые могут быть использованы для определения проблем с доступностью приложения:

Инструменты статического анализа
"Линтеры", вроде ESLint, могут использоваться совместно со специальными плагинами, например, eslint-plugin-jsx-a11y для анализа React-проектов на уровне компонентов. Статические анализаторы выполняются очень быстро, поэтому "цена" их использования невелика, а преимущества очевидны.

Инструменты браузера
Браузерные инструменты анализа доступности контента, такие как aXe и Google Lighthouse, осуществляют автоматическую проверку на уровне всего приложения. Они могут обнаружить более "реалистичные" проблемы, поскольку браузеры имитирую поведение пользователя, взаимодействующего со страницей.

Как работать с JS / CSS / Node.js / SQL в 2021 году

Языки эволюционируют. Поиск и изучение новых фишек отнимает у опытных web-разработчиков до 10 часов в неделю.

Вы же хотите дорасти до тимлида? Значит, нужно повышать квалификацию.

С подпиской на @sWebDev достаточно 5 минут в день, чтобы узнавать новые трюки JS / CSS / Node.js / SQL.

@sWebDev — это быстрые тесты, примеры кода и актуальные решения, которые сделают вас самым подготовленным сотрудником компании.

​Что такое хуки в React? В чем заключаются преимущества их использования?

Хуки - это встроенные функции, которые позволяют использовать состояние и методы жизненного цикла внутри функциональных компонентов.

Правила использования хуков
1. нельзя использовать внутри циклов, условий или вложенных функций
2. можно использовать либо внутри компонентов, либо внутри других хуков (в том числе, пользовательских, "кастомных", custom)

Основные хуки
useState()
useEffect()
useContext()

Дополнительные (продвинутые)
useReducer()
useCallback()
useMemo()
useRef()
useImperativeHandle()
useLayoutEffect()
useDebugValue()

Преимущества хуков
1. С ними легче работать, их легче тестировать (как отдельные функции компонентов), они делают код чище, улучшают его читаемость - сложная логика может быть вынесена в "кастомный" хук
2. Позволяют разделять сложную логику на маленькие функции, используемые внутри компонентов
3. Повышают уровень "переиспользуемости" кода
4. Позволяют распределять логику между компонентами через пользовательские хуки
Являются более податливыми к перемещениям в дереве компонентов

Только уникальные

Создайте функцию, которая будет определять, содержит ли строка только уникальные символы.
Строка может содержать любой из 128 ASCII символов. Символы чувствительны к регистру.

Примеры:

 hasUniqueChars("  nAa")

false Потому что присутствует два пробела

 hasUniqueChars("abcdef")

true

 hasUniqueChars("aA")

true - чувствительна к регистру

 hasUniqueChars("++-")

false Пристутствует два +

Сколько внешних элементов может содержаться в JSX-выражении?

JSX-выражение должно содержать только один внешний (родительский) элемент. Например:

 const headings = (
     <div id = "outermost-element">
        <h1>Заголовок</h1>
        <h2>Еще один заголовок</h1>
     </div>
 )

Обратите внимание: для предотвращения рендеринга лишних DOM-элементов можно воспользоваться компонентом <React.Fragment></React.Fragment> или его сокращенной версией (<></>). Сокращенная версия работает не во всех вспомогательных инструментах.

Что такое LocalStorage и SessionStorage?

Веб-хранилище - это данные, хранящиеся локально в браузере пользователя.существует 2 типа веб-хранилищ: LocalStorage и SessionStorage.
В них вы можете хранить информацию в формате ключ-значение. Ключ и значение – это всегда строки.

Отличие между этими хранилищами сводится только к периоду времени, в течение которого они могут хранить данные, помещенные в них:

SessionStorage – выполняет это в течение определённого промежутка времени (сессии). Закрытие вкладки или браузера приводит их к удалению. При этом данные в SessionStorage сохраняются при обновлении страницы.

LocalStorage – осуществляет это в течение неограниченного времени. Они сохраняются при перезагрузке браузера и компьютера. Их длительность хранения ничем не ограничена. Но, хоть эти данные могут храниться бесконечно в браузере, обычный пользователь может их очень просто удалить, например выполнив очистку истории (при включенной опции «файлы cookie и другие данные сайтов»).

Что такое порталы (portals)?

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

Обычно, компонент рендерит дерево элементов (как правило, с помощью JSX). React-элемент определяет, как должен выглядеть DOM родительского компонента.

 ReactDOM.createPortal(child, container)

Возможности
1. Дочерний компонент передается узлу, находящемуся в другом поддереве
2. По умолчанию таким узлом является document.body, но им может быть любой существующий DOM-элемент
3. Поддерживается рендеринг на стороне сервера
4. Массивы не требуется оборачивать в div или React.Fragment

Случаи использования
1. Модальные окна
2. Всплывающие подсказки
3. Раскрывающиеся меню
4. Виджеты и т.д.

HTTP/2 in Action (2019)

Данное руководство рассматривает HTTP/2, один из основных сетевых протоколов. Вы узнаете про то, как разрабатывался данный протокол, про обратную совместимость, основные характеристики и приемы работы с ним. Также в конце вас ждет небольшой обзор HTTP/3, который должен выйти совсем скоро.