Как выучить React в 2023 году

В этом руководстве я покажу вам самые ценные ресурсы и советы, которые, по моему мнению, помогут вам быстрее освоить React. Вы также сэкономите много драгоценного времени и энергии в процессе.

https://shly.link/Dvik5

Оптимизация производительности React: useMemo vs useCallback
useCallback и useMemo — это хуки React, которые помогают оптимизировать производительность приложения React, запоминая значения. Они оба принимают функцию в качестве аргумента и возвращают запомненную версию функции.

Вот упрощенное объяснение разницы между ними: https://shly.link/devFwiM

Лекарство от ада React useState

Вы когда-нибудь попадали в ад хуков React useState?

https://shly.link/dev6C35

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

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

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

Итак, начнем!

(если пост не открывается полностью,войдите в режиме инкогнито )

https://shly.link/YyEJd

Я слишком остро реагирую? Или React чрезмерно реагирует?

огда я впервые начал заниматься веб-разработкой, в основном я использовал Python/Django. Все рендерилось на стороне сервера, и я ни разу не подумал о «производительности рендеринга». 10 лет спустя, когда компьютеры работают как минимум в два раза быстрее, производительность рендеринга стала более серьезной проблемой, чем когда-либо. Одностраничные приложения (SPA) и внешние библиотеки, такие как React, поощряют и поддерживают высокодинамичные веб-страницы. К сожалению, по моему опыту, рекомендуемый по умолчанию способ написания кода React на самом деле не очень хорошо поддерживает высокодинамичные страницы.

В этом посте я рассмотрю проблемы, возникающие со стандартным кодом React, рекомендуемые варианты повышения производительности React и, наконец, противопоставлю их примерам в vanilla JS.

https://shly.link/ixyLf

Потрясающие шаблоны программного обеспечения и архитектурного проектирования

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

https://github.com/DovAmir/awesome-design-patterns

Как использовать React Dev Tools — с примерами кода и видео

Когда вы работаете над проектом React, одним из самых простых способов отладки кода является использование React Dev Tools.

React Dev Tools — это расширение, созданное командой React. Это позволяет разработчикам отлаживать свой код в своих инструментах разработчика.

https://shly.link/dyUnd

5 советов по оптимизации производительности вашего приложения React

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

В этом посте мы рассмотрим пять советов по повышению производительности вашего приложения React.

https://shly.link/51uF0

5 шаблонов проектирования React, которые вы должны знать

Вы устали писать один и тот же код снова и снова? Хотите вывести свои навыки React на новый уровень? Откройте для себя возможности HOC, Render Props, Hooks и Context API; эти пять умопомрачительных шаблонов проектирования React изменят ваше представление о программировании!

(если пост не открывается полностью, откройте в режиме инкогнито)

https://shly.link/VmS9G

Методы структурирования папок для начинающих и продвинутых проектов React

Из-за полного отсутствия определенных понятий относительно структуры и написания вашего кода, React является невероятно гибкой библиотекой. Однако, поскольку React не устанавливает никаких стандартов, эта гибкость усложняет структурирование проекта с использованием React. В этой статье мы рассмотрим три различные структуры папок, которые можно применять к проектам любого размера. Сложность этих структур указана от самой простой до самой сложной, но в зависимости от размера вашего проекта может быть предпочтительнее более простой подход.

https://shly.link/dev6ebH

4 совета React, которые мгновенно улучшат ваш код

Уверенное знание React — один из самых ценных навыков для фронтенд-разработчика. Многие компании постоянно ищут разработчиков React и хотят платить им все больше и больше. Вот почему так важно постоянно совершенствоваться как разработчик, поскольку это очень полезное занятие.

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

https://shly.link/GP6t7

Многопоточное приложение React с использованием useWorker

Web Worker — это скрипт, работающий в фоновом режиме, не влияющий на пользовательский интерфейс, поскольку он выполняется в отдельном потоке, а не в основном потоке. Таким образом, это не приведет к блокировке взаимодействия с пользователем. Веб-воркеры в основном используются для выполнения дорогостоящих задач в веб-браузере, таких как сортировка большого количества данных, экспорт CSV, обработка изображений и т. д.

https://shly.link/deveHkh

7 маленьких и недооцененных библиотек React 🔥

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

https://dev.to/naubit/7-small-underrated-react-libraries-h54

6 подходов к выборке данных в React

Введение в выборку данных в React
Простое объяснение обещаний JavaScript
Подход № 1: Fetch API с методами промисов
Подход № 2: библиотека Axios с методами промисов
Подход №3: асинхронные функции (async/await)
Подход № 4: Создание пользовательского хука «useFetch»
Подход № 5: Библиотека запросов React
Подход № 6: RTK-запрос Redux Toolkit
Некоторые заключительные мысли


https://goo.su/TMoWi

Компоненты React используют props для связи друг с другом. Каждый родительский компонент может передавать некоторую информацию своим дочерним компонентам, предоставляя им реквизиты. Свойства могут напоминать вам атрибуты HTML, но вы можете передавать через них любое значение JavaScript, включая объекты, массивы и функции.

https://beta.reactjs.org/learn/passing-props-to-a-component#passing-jsx-as-children

React Anti-Patterns и лучшие практики — что можно и чего нельзя делать

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

https://dev.to/perssondennis/react-anti-patterns-and-best-practices-dos-and-donts-3c2g

react-email

Коллекция высококачественных компонентов без стиля для создания красивых электронных писем с использованием React и TypeScript. Это упрощает кодирование адаптивных электронных писем с поддержкой темного режима. Он также позаботится о несоответствиях между Gmail, Outlook и другими почтовыми клиентами.

https://github.com/resendlabs/react-email

15 лучших расширений кода VS на 2023 год

Правильное расширение для вашей IDE всегда ускорит процесс разработки и сделает вашу жизнь проще.

Если вы хотите сэкономить свое время, вот 15 лучших расширений VS Code, которые я часто использую:

https://javascript.plainenglish.io/top-15-vs-code-extensions-for-2023-dffa4460b505


(если пост не открывается полностью, откройте в режиме инкогнито)

15 обязательных шпаргалок для разработчиков🚀

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

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

Я не хочу отговаривать вас от ведения записей; вы должны это делать, потому что вы знаете, что иногда вы понимаете только те заметки, которые пишете для себя. 😂

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

https://dev.to/ishratumar/15-must-have-cheatsheets-for-developers-1n92