React JS

🖥 quicktype — безопасная работа с JSON (и не только) во многих ЯП

— npm install -g quicktype

quicktype — это инструмент, написанный на TypeScript, который генерирует сильно типизированные модели и сериализаторы из JSON, JSON Schema, TypeScript и GraphQL-запросов, что позволяет легко работать с JSON безопасно для типов во многих языках программирования.

🖥 GitHub
🟡 Можно использовать онлайн

@react_tg

🖥 Надежная библиотека хуков React от Alibaba

— npm install --save ahooks

• Простая в освоении и использовании
• Поддерживает SSR
• Специальная обработка функций позволяет избежать проблем с закрытием
• Содержит большое количество продвинутых хуков, которые были разработаны на основе бизнес-сценариев
• Содержит обширную коллекцию базовых хуков
• Написана на TypeScript с предсказуемыми статическими типами

🖥 GitHub

@react_tg

🖥 Recharts — пересмотренная библиотека для графиков на основе React и D3

— npm install recharts

Recharts - это библиотека графиков Redefined, созданная на основе React и D3.

Основная цель Recharts — помочь легко создавать графики, диаграммы в React-приложениях. Вот некоторые особенности Recharts:
— Простое развертывание с помощью компонентов React
— Нативная поддержка SVG, легкий вес, зависящий только от некоторых субмодулей D3
— Декларативные компоненты

🖥 GitHub
🟡 Доки

@react_tg

🖥 react-pdf — создание pdf-файлов в React

— yarn add @react-pdf/renderer

react-pdf — пакет React, позволяет создавать pdf-файлы в браузере или на стороне сервера

🖥 GitHub
🟡 Доки

@react_tg

🖥 Tina — удобная open-source CMS

— npx create-tina-app@latest

Tina — это headless CMS с открытым исходным кодом и поддержкой Git, позволяющая разработчикам и создателям контента беспрепятственно сотрудничать на одной платформе.
Tina позволяет разработчикам реализовывать возможности визуального редактирования, идеально подходящие для их сайта или приложения, поддерживая при этом широкий спектр типов контента, таких как Markdown, MDX и JSON.

🖥 GitHub
🟡 Доки

@react_tg

🖥 Ant Design — проектирование UI корпоративного уровня

— npm install antd

Фишки Ant Design:
— UI корпоративного уровня
— Набор высококачественных компонентов React из коробки
— Написан на TypeScript с предсказуемыми статическими типами
— Целый пакет ресурсов для проектирования и инструментов разработки
— Поддержка десятков языков
— Мощная кастомизация тем на базе CSS-in-JS

Использование:

import { Button, DatePicker } from 'antd';

export default () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker placeholder="select date" />
  </>
);

🖥 GitHub
🟡 Страничка Ant Design

@react_tg

🖥 SVGR: SVG — в React-компонент

SVGR — это универсальный инструмент для преобразования SVG в компоненты React.
На входе — необработанный SVG, на выходе — готовый к использованию React-компонент.

🖥 GitHub

@react_tg

⚡️ Большая подборка вопросов с собеседований: Frontend, Javascript, React, Vue и многое другое.

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

▪Front-end. Вопросы на собеседовании - Репозиторий видеокаста, содержит коллекцию вопросов, которые можно получить на техническом собеседовании на вакансию Junior/Middle Front-end разработчик.

▪Вопросы (с ответами) кандидату на должность frontend разработчика

▪Front End Interview Handbook - В отличие от типичных собеседований, в frontend собеседованиях меньше внимания уделяется алгоритмам и больше вопросов о сложных знаниях и экспертизе в предметной области - HTML, CSS, JavaScript. Этот репозиторий содержит все, что вам нужно знать для прохождения собеседований frontend собеседованиями.

▪ Полное собеседование React разработчика 2024🧑🏻‍💻

▪Front-end Developer Interview Questions
список полезных вопросов с собесов.

▪ Interview-questions наиболее часто задаваемые вопросы Frontend-разработчику.

▪Список тестовых заданий на позицию JS-разработчика

▪10 задач по промисам JavaScript

▪Вопросы с собеседования на фронтенд разработчика React.js

▪100 вопросов по React для подготовки к собеседованию

@react_tg

🖥 Интересные задачи и идеи для практики React

📎 Здесь собраны разные практические задачи, решение которых поможет глубже разобраться в React.

А вот некоторые из заданий:

— Крестики нолики
Поле 3×3, игра должна содержать возможность перейти на любой из предыдущих шагов.
🟡 Codepen

— Генератор цитат
Пользователь должен иметь возможность запросить новую цитату, а так же создать пост для социальных сетей.
🟡 Решение может выглядеть так

@react_tg

⭐️ Крутая анимация кнопки с соц сетями для

https://codepen.io/carsonf92/pen/PoxxmeO?__cf_chl_tk=

@react_tg

🖥 Создаем компонент прокручиваемого контейнера на React

Задача — требуется реализовать компонент-контейнер:
— в который можно просто передать список карточек
— который ограничен по ширине
— который скроллится по горизонтали
— который имеет базовые контролы — стрелочки влево и вправо

▶️ Поехали к реализации
🟡 Открыть в Sandbox

@react_tg

🖥 Вышел React 19 beta

🟡Команда React.js вовсю готовится к предстоящей конференции и видимо именно на ней они представят React 19. На сайте уже была опубликована страница релиза.

🟡В релизе всё то, о чём рассказывала команда Next.js — action для формы, новые хуки, серверные компоненты и серверные действия, метаданные страницы и предзагрузка ресурсов из коробки. Из нового — для передачи ref больше не нужно использовать forwardRef, обновлённое API контекстов и продвинутая поддержка таблиц стилей.

🟡Вместе с релизом был опубликован и гайд на обновление до 19 версии для библиотек. В гайде можно отметить значительные удаления функционала помеченного в последние годы как устаревший.

@react_tg

🔥 Beautiful icon library, made for creativity.

- Более 27 000 красивых иконок для разработчиков
- Более 3800 бесплатных иконок для коммерческого использования
- Доступны npm, SVG, React и React Native

→ http://hugeicons.com

@react_tg

🖥 Авторизация в React — базовые сведения

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

🟡Для того, чтобы сделать функционал авторизации нужно иметь back-end приложение с API, при вызове которого мы будем получать информацию о том, что пользователь прошёл авторизацию. И front-end приложение, которое будет запрашивать API.
Здесь сфокусируемся на архитектуре front-end приложения

🔜 Поехали

@react_tg

🖥 Аналог Taplink и Linktree на React JS и Chakra UI

Простое веб-приложение, чтобы собрать все ссылки на свои соцсети в одном месте.
Отличная идея для пет-проекта, можно взять это за основу и улучшить)

📎 YouTube
🖥 GitHub

@react_tg