React JS

Поздравляем юбиляра библиотеке React исполнилось 10 лет.

React - это проект, который принес многое а в веб-индустрию и ещё больше впереди. Давайте поддержим React реакциями!

@react_tg

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

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

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

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

@react_tg

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

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

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

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

#react #фронтенд

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

Читать

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

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

▪ Читать

@react_tg

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

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

@react_tg

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

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

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

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

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

@react_tg

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

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

@javascriptv

Создание веб-приложения на Kotlin и React - часть 1/2 - Backend + Frontend

🎞 Video

@react_tg

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

Java книги

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

Golang библиотека

Python библиотека

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

C++ книги

C# книги

Frontend книги

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

Топ книги по Linux

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

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

​Тестируйте свои 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

React Quickly, Second Edition Version 5

📚 Книга

@react_tg

Поэтапный перевод учебника Patterns.dev, в котором представлен современный взгляд на шаблоны проектирования, рендеринга и производительности JavaScript.

🗄 Часть 1
🗄 Часть 2

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

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

@react_tg

🖥 React Interview Questions & Answers

500 популярных вопросов с React собеседований.

https://github.com/sudheerj/reactjs-interview-questions

@react_tg

🖥 React Router 6 Lazy Loading

Полезный гайд по React Router, из которого вы узнаете, как использовать отложенную загрузку с React Router 6.

https://www.robinwieruch.de/react-router-lazy-loading/

@react_tg

⏩ Folding Ticket Detail — интересная реализация складного билета с помощью React

https://codepen.io/pizza3/pen/bGVPZvo

@react_tg

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

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

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

https://previewjs.com/

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

@react_tg