React быстро

«React быстро. 2-е издание» предлагает уникальный подход к освоению фреймворка React. Более 80 компактных примеров проведут читателя от изучения основ работы к созданию довольно сложных приложений. В книге подробно описаны многие функциональные компоненты, хуки React и средства доступности веб-приложений, а также представлены интересные проекты для отработки новых навыков.

👉

@frontend_mind

Largest 5 digit number in a series

В следующем 6-значном номере:
283910

91 - наибольшая последовательность из 2 цифр подряд.

В следующем 10-значном числе:
1234567890

67890 - наибольшая последовательность из 5 последовательных цифр.

Заполните решение так, чтобы оно возвращало наибольшую последовательность из пяти последовательных цифр, найденных в заданном числе. Число будет передано в виде строки, состоящей только из цифр. Решение должно вернуть пятизначное целое число. Передаваемое число может быть до 1000 цифр.

👉

@frontend_mind

👉

@frontend_mind

Загрузка файла с прогресс-баром

Загрузка пользователем файлов на сервер — часто встречающаяся задача при создании сайтов и приложений. Если файлы большие, то хорошей практикой будет показывать пользователю прогресс и результат загрузки файла. Для этого можно использовать прогресс-бар.

Организовать полный процесс загрузки файла возможно только с использованием серверной части, реализация которой выходит за рамки данной статьи. Поэтому в статье будет рассмотрена организация отправки файла на стороне клиента: HTML-разметка, стилизация элементов и JS-код для передачи файла на сервер.

👉

@frontend_mind

Юнит-тестирование в Angular: лучшие практики и инструменты

В этой статье я хочу поделиться опытом, который накопил за годы работы с юнит-тестами в Angular. Вот о чём пойдёт речь:

- Почему важно писать юнит-тесты
- Зачем мокать зависимости и каковы плюсы и минусы
- Что такое SIFERS и почему это важно
- Что такое Angular Testing Library (ATL)
- Как тестировать с помощью SIFERS
- Как получать элементы DOM и генерировать события
- Что такое jest-auto-spies и observer-spy

👉

@frontend_mind

Если вы вдруг забыли как выглядит фуллстэк

👉

@frontend_mind

State Management with React Query: Improve developer and user experience by mastering server state in React

Начиная с краткой истории управления состоянием в экосистеме React, вы узнаете, что послужило причиной перехода от глобального состояния к состоянию клиента и сервера и, таким образом, поймете необходимость создания React Query. По мере продвижения по главам вы увидите, как React Query позволяет выполнять задачи, связанные с состоянием сервера, такие как выборка, кэширование, обновление и синхронизация данных с сервером. Но это еще не все: освоив React Query, вы сможете применить эти знания для работы с состоянием сервера в серверных фреймворках рендеринга. Вы также будете работать с паттернами для тестирования вашего кода, используя библиотеку тестирования и Mock Service Worker.

👉

@frontend_mind

Sort Numbers

Доработайте решение так, чтобы оно сортировало переданный массив чисел. Если функция передала пустой массив или значение null/nil, то она должна вернуть пустой массив.

Например:
solution([1, 2, 10, 50, 5]); // should return [1,2,5,10,50]
solution(null); // should return []

👉

@frontend_mind

Зачем нужен React Context?

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

Основные случаи использования React Context:

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

1. Темизация:
Context позволяет легко управлять темами (например, светлая/темная тема) и применять их к разным компонентам без необходимости передавать тему через пропсы.

2. Аутентификация:
Context может быть использован для хранения и передачи информации о текущем пользователе и его аутентификационном статусе.

3. Настройки локализации:
Context позволяет управлять и передавать текущие языковые настройки, обеспечивая локализацию и интернационализацию приложения.

Примеры использования React Context:

Создание контекста:
import React from 'react';

// Создание контекста с дефолтным значением
const ThemeContext = React.createContext('light');

Использование Provider для предоставления значения контекста:
import React from 'react';
import ReactDOM from 'react-dom';

function App() {
return (



);
}

function Toolbar() {
return (



);
}

function ThemedButton() {
return (

{theme => Themed Button}

);
}

ReactDOM.render(, document.getElementById('root'));

Преимущества использования React Context:

1. Упрощает управление состоянием:
Context позволяет избегать "prop drilling" — необходимости передавать пропсы через множество уровней компонентов.

2. Повышает читаемость и поддержку кода:
Централизованное управление состоянием и данными улучшает читаемость и упрощает поддержку кода.

Когда не следует использовать React Context:

1. Избыточное использование:
Контекст не следует использовать для данных, которые изменяются часто или предназначены только для узкой области компонента. Частые изменения данных в контексте могут привести к избыточному рендерингу компонентов.

2. Сложные состояния:
Для управления сложными состояниями и побочными эффектами лучше использовать специализированные библиотеки, такие как Redux или MobX.

👉

@frontend_mind

От кнопки до продакшена: как мы делаем Telegram Mini Apps

Telegram Mini Apps — это мощный инструмент, который позволяет создавать интерактивные веб-приложения, работающие прямо внутри мессенджера. Они идеально подходят для игр, маркетплейсов, сервисов бронирования и многого другого.

В этом туториале мы разберем процесс создания Mini App:
- настроим проект
- создадим фронтенд на React с поддержкой Telegram SDK
- реализуем бэкенд на Python (Django)
- свяжем все компоненты и развернем приложение.

👉

@frontend_mind

Стрелочные функции JS, быстро, просто и без проблем

Сегодня мы заберем важную тему → "Стрелочные функции JS"

Содержание:
1. Стрелочные функции: arguments, hoisting
2. Работа с контекстом
3. Методы присваивания контекста
4. Обработчик событий

👉

@frontend_mind