Пример рефакторинга старого кода с использованием React Hooks

https://youtu.be/KBUIPO8o0Ao

useSWR – "моя новая любимая библиотека React".

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

https://habr.com/ru/company/otus/blog/506158/

Великий раскол в import: проясняем неопределенность с импортом в Typescript или почему надо писать

 * as React from 'react'

https://habr.com/ru/company/otus/blog/507104/

React Hook Form VS Formik - что выбрать для работы с формами

https://blog.bitsrc.io/react-hook-form-vs-formik-form-builder-library-for-react-23ed559fdae

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

https://felixgerschau.com/react-rerender-components

​5 способов документировать React-компоненты

Компоненты делают код гибким и переиспользуемым. Документированные компоненты к тому же делают его понятным и поддерживаемым. Поэтому документируйте ваши компоненты - в 2020 это даже необязательно делать вручную!

Cтатья рассматривает 5 популярных сервисов для удобной работы с компонентами:

👉 Bit
👉 React Styleguidist
👉 React-Docz
👉 React-docgen
👉 Storybook

Примеры установки и использования прилагаются 😉

Читать: https://blog.bitsrc.io/5-ways-to-document-react-components-in-2020-ecf60f24dee8

#tools #components #react

React Native - Building Mobile Apps with JavaScript

Автор: Vladimir Novick
Год издания: 20

Скачать книгу

#react #english #middle

Правильный ответ: Все объявления корректны

Свойство content допускает использование самых разных значений и даже их комбинацию.
Пример: https://codepen.io/mohnatus-the-lessful/pen/MWKvRpy
Документация: https://developer.mozilla.org/ru/docs/Web/CSS/content

Подробный разбор свойства content читайте в статье Вот что я не знал о content.

#css

Добро пожаловать в ад…зависимостей JavaScript

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

https://nuancesprog.ru/p/8559

@nuancesprog #статьи #JavaScript

jest vs jasmine: основные отличия

В чем разница между двумя самыми популярными решениями для тестирования и почему jest один, а карма всегда в связке с жасмином?

Читать: https://prglb.ru/tej1

#testing #jest #jasmine

Создаем прогрессивное веб-приложение на ReactJS и размещаем его в Netlify и PWA Store

https://habr.com/ru/post/507812/

15 вопросов для интервью по React с решениями

https://www.sitepoint.com/react-interview-questions-solutions/

#react #tips

Tool selection tips for React Native (russian translation)

Выбор инструментов для React Native

https://nuancesprog.ru/p/7738

О тестировании React приложений с помощью Jest

https://www.smashingmagazine.com/2020/06/practical-guide-testing-react-applications-jest/

ES6 - Symbol

Symbol это уникальный и неизменяемый тип данных.

Свойства символов:
При создании символам можно дать имя.

 Создаём символ id с описанием (именем) "id"
let id = Symbol("id");

Они гарантированно уникальны.

 let id1 = Symbol("id");
 let id2 = Symbol("id");

alert(id1 == id2); // false

Не преобразуются автоматически в строки.

 let id = Symbol("id");
alert(id); // TypeError: Cannot convert a Symbol value to a string

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

let id = Symbol("id");

let user = {
  name: "Вася",
  age: 30,
  [id]: 123 // просто "id: 123" не сработает
};

Игнорируются циклом for…in

 for (let key in user) alert(key); // name, age (свойства с ключом-символом нет среди перечисленных)

React и Redux. Функциональная веб-разработка

Авторы: Бэнкс А., Порселло Е.

Год издания: 2018

Скачать книгу

#react #redux #русский

Как протестировать ваши приложения React с помощью React Testing Library

https://www.smashingmagazine.com/2020/07/react-apps-testing-library/

​Вам не нужен Moment.js

Подборка функций для замены библиотеки moment.js при работе с датами и временем.

В закладки: https://prglb.ru/ovb6

#javascript #library

​Полный список решений для валидации форм в React-приложениях

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

👉 Formik
👉 React Final Form
👉 Unform
👉 React Form
👉 react-json-schema-form
👉 React Hook Form
👉 Redux Form
👉 Formsy
👉 Simple React Validator

Подробный обзор с примерами использования здесь: https://prglb.ru/5wgzp

#frameworks #react #validation

Типичные ошибки джунов, использующих React

https://tproger.ru/translations/mistakes-junior-react-developers-make/