JavaScript и jQuery

React.js. Хук useCallback и зависимости

Смотрю сейчас на Udemy видео-курс по хукам — столкнулся с непониманием, зачем хуку useCallback нужны зависимости. Выяснил у преподавателя и решил записать, чтобы не наступать больше на эти грабли. Итак, есть два компонента — Parent и Child, в Parent есть функция, обернутая в useCallback, чтобы избежать лишних рендеров Child.

React.js. Компоненты высшего порядка

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

React.js. Что такое рендер-пропсы

На концептуальном уровне понять render props очень просто. Давайте забудем на минуту о React и посмотрим на вещи в контексте ванильного JavaScript. У нас есть функция, которая вычисляет сумму двух чисел. Для начала мы просто хотим вывести результат вычисления в консоль.

React.js. Компонент для ввода pin-кода

Небольшой компонент для ввода pin-кода из четырех цифр. Создает четыре input-поля и отслеживает, чтобы в каждом была только одна цифра. При вводе очередной цифры смещает фокус на следующее поле. Используя клавишу Backspace, можно удалить введенное значение, при втором нажатии — сместить фокус на предыдущее поле.

React.js. Функциональное программирование

Функциональное программирование — это способ программирования, при котором можно передавать функции в качестве параметров другим функциям, а также возвращать их как значения. Так как функции в JavaScript являются объектами, то их можно использовать как значение переменной, передавать и возвращать по ссылке, как и другие переменные.

React.js. Приложение каталога рецептов

Небольшое приложение — каталог рецептов блюд всего мира, не имеет практической ценности, сделано исключительно с целью изучения React. Для оформления используется css-фреймворк materialize.css, http-запросы на получение рецептов отправляются сервису themealdb.com. Итак, разворачиваем react-приложение.

React.js. Маршрутизация. Часть третья из трех

Давайте еще доработаем наше приложение и добавим маленький блог. Категорий у блога не будет, а постов будет всего два — но для нас этого достаточно. Создадим директорию src/blog и разместим в ней два компонента и контекст (в котором будем хранить посты блога). И посмотрим, как передавать параметры…

React.js. Маршрутизация. Часть вторая из трех

В рамках маршрутов в React можно определять дочерние маршруты. Такие подмаршруты будут отсчитываться от главного маршрута. Давайте добавим в наше приложение маленький каталог товаров, который будет содержать два раздела и четыре товара (по два в каждом разделе).

React.js. Маршрутизация. Часть первая из трех

В React имеется своя система маршрутизации, которая позволяет сопоставлять запросы к приложению с определенными компонентами. Ключевым звеном в работе маршрутизации является модуль react-router, который содержит основной функционал по работе с маршрутизацией. Для браузерных приложений предназначен модуль react-router-dom…

React.js. Витрина интернет-магазина и корзина

Небольшое приложение — витрина интернет-магазина + корзина покупателя, не имеет практической ценности, сделано исключительно с целью изучения React. Для оформления используется css-фреймворк materialize.css, http-запросы на получение списка товаров отправляются сервису fortniteapi.io.
Каталог оборудования
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Производители
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Функциональные группы
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.