🪝 Давайте углубимся в React Hooks — React 16.8

В React есть десять встроенных хуков; вы узнаете, что выполняет каждый из них. Хуки – это функции, которые всегда начинаются с названия использования.

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

▪Читать

@react_tg

Инструмент, упрощающий отладку компонентов UI

Preview.js — функциональное расширение для VSCode или JetBrains IDEs, которое позволяет видеть превью вашего кода, не переходя в браузер. Работает плагин со многими популярным фреймворками: Preact, React, Svelte, Vue и SolidJS.

Здесь вы можете посмотреть все возможности плагина и установить его:

https://previewjs.com/

#инструмент #фронтенд

@react_tg

Scroll direction rotation — красивая галерея с эффектом наклона при скроллинге. Галерея написана с помощью SCSS и JavaScript.

https://codepen.io/choogoor/pen/bGjrWVL

@react_tg

React Quickly, Second Edition Version 5

📚 Книга

@react_tg

​Тестируйте свои React-компоненты с помощью Nightwatch и Testing Library

Nightwatch и Testing Library — два крайне полезных инструмента для тестирования компонентов. Первая библиотека написана на Node.js и позволяет проводить полноценное сквозное тестирование веб-приложений и сайтов, написанных на JS. В свою очередь Testing Library более минималистичный инструмент, созданный специально для тестирования React-компонентов.

В этой статье вы научитесь:

— устанавливать новый проект React с помощью Vite, который также используется внутри Nightwatch для компонентного тестирования;
— подключать и конфигурировать Nightwatch и Testing Library;
— имитировать API запросы с помощью плагина @nightwatch/api-testing;
— писать комплексные React-компонентные тесты, используя Nightwatch и Testing Library.

https://habr.com/ru/companies/otus/articles/719266/

#react #qa

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

Java книги

Книги датасаентиста

Golang библиотека

Python библиотека

Крупнейший склад ит-книг

C++ книги

C# книги

Frontend книги

Книги по базам данных

Топ книги по Linux

Библиотека машинного обучения

Сохраняем себе, чтобы не потерять

Gallery animation — анимированная галерея с эффектом при прокрутке. Реализована с помощью CSS и JavaScript.

https://codepen.io/Tiopayo/pen/GRYoMEZ

@javascriptv

⚡ Подборка ресурсов с полезными шпаргалками для фронтенд-разработчика:

▫️htmlcheatsheet
▫️cssreference
▫️reactcheatsheet
▫️cheatography
▫️javascriptcheatsheet

Сохраняем себе, чтобы не потерять

@react_tg

React recursively re-renders child components, but there is a nuance

https://alexsidorenko.com/blog/react-render-children-prop #react

Mountain Hero Page — красивая страница с анимированным скроллом. Страница реализована с помощью CSS и JavaScript.

https://codepen.io/aryancodeworm/pen/rNKqgpY

@react_tg

Обрабатываем ошибки в React: полное руководство

Рассмотрим обработку ошибок в React: что делать при их появлении, как их выявить и устранить.

▪ Читать

@react_tg

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

Читать

​Как писать комментарии в React: хорошие, плохие и уродливые

Когда дело доходит до написания комментариев, React предлагает синтаксис {/* Comment */}, который может быть немного многословен.

В этой статье вы можете посмотреть, как использовать обычные комментарии JSX и ещё 2 других способа комментирования, которые могут быть лучше:

https://dmitripavlutin.com/react-comments/

#react #фронтенд

5 ошибок, которые можно допустить при запуске первого проекта React

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

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

https://css-tricks.com/5-mistakes-starting-react/

@react_tg