React JS

Сборник шпаргалок для фронтенд-разработчика

В этих шпаргалках собраны не просто методы, функции и базовый синтексис, но и их подробное объяснение с примерами.

— Шпаргалка по тегам HTML5
— Шпаргалка по методам JavaScript для работы с DOM
— Шпаргалка по работе с медиа в браузере
— Шпаргалка по HTTP-заголовкам, связанным с безопасностью
— Шпаргалка по доступности веб-приложений
— Шпаргалка по Internationalization API
— Шпаргалка по Temporal API и Dayjs

Сохраняйте себе в закладки, чтобы не потерять.

#js #html #фронтенд

6 проектов на ReactJS для начинающих

В этом видеоуроке подробно разбирается, как создать простые проекты уровня Junior, а именно:

— счётчик,
— модальное окно,
— простой опросник,
— конвертер валют,
— коллекция фотографий,
— список пользователей.

Ссылка на видео: https://youtu.be/eS0GL73tkmw

#reactjs


@react_tg

Выбор CSS макета: Grid или Flexbox?

В целом Grid и Flex решают одни и те же задачи при разработке макета, но между ними всё же есть отличия:

— Flexbox является популярной системой вёрстки, но она одномерна: разработчики могут работать только со столбцами или строками.
— CSS Grid считается двумерной системой компоновки, с помощью которой можно передвигать элементы между строками и рядами.

Однако для более удобной вёрстки сайта можно совмещать оба модуля и использовать гриды только для каркаса сайта, а флексы — для контента.

Источник: https://odva.pro/blog/flex_or_grid/

#web #css

@react_tg

​Zustand как альтернатива Redux

Управление состоянием в React за последнее время значительно меняется. Одни перешли на Redux, другие — используют сторонние библиотеки, например: Zustand или Recoil.

Библиотека Zustand была разработана создателями Jotai и React-spring и позволяет легко управлять состоянием приложения, не усложняя разработку обилием кода.

В этом видео рассматривается, что такое Zustand, работа с этой библиотекой и оптимизация рендера компонентов:

https://youtu.be/l6WDSN-_HSI

#фронтенд

@react_tg

Популярные инструменты и библиотеки веб-разработки

Автор собрал все известные графические ресурсы, React UI и Vue UI библиотеки, шаблоны HTML, CSS и многое другое в одном Notion файле. Вам нужно только выбрать категорию.

Например, если вы забывали, где найти бесплатные шрифты, то здесь собрано 37 полезных ресурсов для любого проекта:

https://surffers.notion.site/surffers/The-Best-Web-Development-Tools-2cf90734ead54d748edaf706120728d8

#web

@react_tg

​Создаём приложение для чата с помощью ReactJS и Firebase

Небольшое приложение со входом в аккаунт через учётную запись Google с помощью Firebase Authentication (SDK). Это инструмент Firebase, который поддерживает различные методы аутентификации, такие как пароли, номера телефонов, Google, Facebook, Twitter, GitHub и другие.

Все сообщения из чата пользователя хранятся в облаке Firestore. Cloud Firestore сохраняет данные в документах в виде пар ключ-значение.

В этой статье вы найдёте пошаговое руководство, как настроить проект в Firebase и React, и создадите полноценное приложение для чата:

https://www.freecodecamp.org/news/building-a-real-time-chat-app-with-reactjs-and-firebase/

#react

5 библиотек для React-разработчика, которые стоит попробовать

1. React Joyride помогает создать пошаговое руководство и интерактивную экскурсию по приложению.

2. React Beautiful DnD — для перетаскивания (drag and drop) с поддержкой мыши и клавиатуры. Также библиотека поддерживает вертикальные, горизонтальные передвижения и между списками.

3. Enzyme — это библиотека JavaScript, созданная командой AirBnB для тестирования компонентов React.

4. React Spring — популярная библиотека для анимаций.

5. Styled Components используется для стилизации приложений. Позволяет отслеживать компоненты и добавлять только их стили.

#react

@react_tg

⭐️ ​Работа с картами на React с помощью Pigeon Maps и Mapbox

Разработчики из Evil Martians делятся подробный гайдом, как создать красивую карту для веб-приложения на React. В статье разбираются все шаги реализации проекта: дизайн, концепция, сбор данных, внедрение логики и многое другое:

https://evilmartians.com/chronicles/how-to-build-a-better-react-map-with-pigeon-maps-and-mapbox

@react_tg

⏩ Логический border-radius

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

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

https://css-irl.info/logical-border-radius/

@react_tg

Browserling — тестирование кроссбраузерности онлайн

Работает сервис достаточно просто — он запускает веб-приложения на своих удалённых виртуальных машинах.

Тестируется же всё в совершенно разнообразных браузерах и системах: начиная с Windows 10 и Google Chrome либо Opera, заканчивая Windows 7 и Android 7 с Safari и Internet Explorer

Стоимость: #бесплатно (но есть платные функции)

#web #qa

@react_tg

🖥 Разработка микро-интерфейса с помощью Single SPA на React 2023

Разработка микро-интерфейса с помощью Single SPA на React.

Single SPA – это JavaScript-фреймворк для создания микро-интерфейсов. Он позволяет вам создавать несколько небольших приложений и объединять их в одно более крупное. С помощью Single SPA вы можете использовать различные интерфейсные фреймворки (такие как React, Angular, Vue и т.д.) для создания своих микро-интерфейсов.

▪Читать

@react_tg

🖥 React. Компоненты

Читая документацию React наткнулся на интересную с моей точки зрения конструкцию в react-bootstrap:

<Nav
activeKey="/home"
onSelect={selectedKey => alert(`selected ${selectedKey}`)}>
<Nav.Item>
<Nav.Link href="/home">Active</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-1">Link</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-2">Link</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="disabled" disabled>
Disabled
</Nav.Link>
</Nav.Item>
</Nav>

Это способ структурирования кода.

Nav.Item это такой же компонент, как и любой другой обычный компонент React. Но, в данном случае, мы используем namespace для того, что бы точно знать, какой именно компонент используем. Посмотрите сами, Item очень обобщенное имя, поэтому другие библиотеки могут тоже его использовать

import {Item} from 'one-lib';
import {Item} from 'two-lib'; // Oooops. Duplicate name!

Можно выкрутиться используя конструкцию as, но это не так красиво)

import {Item} from 'one-lib';
import {Item as ItemTwo} from 'two-lib'; // Ok

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

import {Nav} from 'lib';

Nav.Component1; // Ok!
Nav.Component2; // Ok too!

// В коде либы

export Nav = {
Component1: ...,
Component2: ...,
}

При этом Nav сам может являться компонентом, тогда остальные будут статическими св-свами

class Nav extends React.Component {}; // Тут уже используются эта техника - React.Component

Nav.Component1 = class Component1 extends React.Component {}
Nav.Component2 = class Component1 extends React.Component {}

export Nav

@react_tg

🖥 Storybook

Storybook — это проект для создания компонентов и страниц пользовательского интерфейса.

Storybook полезен для разработки пользовательского интерфейса, тестирования и создания документации.

🖥 Github
📝 Project

@react_tg

Библиотеки react в 2023 году

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

Читать

@react_tg

🖥 Современный модульный лендинг React

Шаблоны лендингов очень распространены в интернете: легко собираются, удобны в использовании и выглядят отлично. Но это только в теории.

На практике большинство шаблонов либо красивые, но с неаккуратным кодом, либо наоборот: имеют приличный код, но выглядят ужасно.

Шаблон с разумным применением современных технологий отличается от них как небо и земля.

▪Читать
▪Код

@react_tg

🖥 Топ-45 библиотек React

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

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

Сегодня проведем сравнительное обсуждение с целью детально разобраться в альтернативных решениях различных проблем React.

▪Читать

@react_tg

💨 Card Hover Interactions — шикарная анимация текста.

https://codepen.io/hexagoncircle/pen/XWbWKwL

@react_tg

Анонс Sandpack 2.0 и среды разработки Node.js для любого браузера.

CodeSandbox анонсировала новую версию Sandpack, инструмента для лайв-кодинга в браузере (редактор кода + предварительный просмотр). Sandpack хорошо интегрируется с React благодаря специальному пакету. Первая версия уже использовалась на новом сайте бета-документации React Джошем Комо и многими другими.

Вторая версия основана на новой технологии NodeBox, которая позволяет запускать Node.js в браузере. Можно запускать Next.js, Vite, Astro и другие стеки.

Это напоминает технологию StackBlitz, которая только что анонсировала WebContainers API . В статье Sandpack объясняются различия между NodeBox и WebContainers.

https://codesandbox.io/blog/announcing-sandpack-2

@react_tg

🐵🙈 Форма входа с анимодзи в стиле неоморфизм, написанная на HTML, CSS и ReactJs.

Пользователь гитхаба поделился репозиторием:
Ссылка

@react_tg

🖥 7 советов по очистке кода React

▪ Читать

@react_tg