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

https://tprg.ru/XWhs

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

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

#веб #react

Способы передачи данных между компонентами в React

https://tprg.ru/Q0Dk

Если вы в своём проекте используете React, то вам очень пригодится понимание того, как происходит взаимодействие React-компонентов.

В статье подробно рассказываем про возможные способы передачи данных между компонентами:
— через свойства (props),
— передача через Context,
— с использованием React-Redux.

#javascript #react

Создаём drag-and-drop элементы на React

https://tprg.ru/j7nd

В этой статье рассмотрим создание drag-and-drop элементов на React с помощью библиотеки react-beautiful-dnd от Atlassian. Статья рассчитана на людей, знакомых с React.

Изучать библиотеку будем, разрабатывая простую игру с drag-and-drop элементами.

#react #reactjs

Солидному программисту — солидные часы. На React и со styled-components, конечно.

Код в помощь: https://codepen.io/JohnRiordan/pen/mgdpKN

#react

5 современных способов создания анимации в React

https://tprg.ru/6btU

Многие разработчики анимируют приложения только с помощью CSS, добавляя классы в теги HTML. Это отличный способ, но если хотите создавать сложные анимации, обратите внимание на другие подходы.

В нашем материале давайте поговорим о них.

#веб #react

Мы подготовили для вас подборку материалов по кроссплатформенной и Android-разработке, из которых вы узнаете:

— о жизненном цикле Android-приложений: https://tprg.ru/Gu3w

— Java или Kotlin лучше для Android-разработки: https://tprg.ru/h2XB

— натив или кроссплатформенность выбрать начинающему мобильному разработчику: https://tprg.ru/Yz9h

— чем отличаются друг от друга фреймворки React Native, Flutter, Ionic, Xamarin и PhoneGap: https://tprg.ru/Twhk

— как разработать первое приложение на React Native: https://tprg.ru/A61F

— как создать первое приложение на Kotlin Multiplatform: https://tprg.ru/N4rZ

— безумие или дальновидный шаг перейти из Android во Flutter: https://tprg.ru/LIwO

#кроссплатформенность #flutter #react #android

​Что нужно знать React-разработчику в 2021 году?

В этой статье Максим Кравец, руководитель аутсорс-продакшна Holyweb составил целую дорожную карту по изучению фреймворка. Всё с подробными примерами и полезными ссылками:

https://tprg.ru/UQOi

#веб #react

​В своей статье о русскоязычной версии Wordle Саша рассказал, что использовал для её разработки Next.js.

Если вкратце, Next.js — это JavaScript-фреймворк, внутри которого работает библиотека React. Он «из коробки» отлично справляется с созданием статических веб-сайтов. Но главное, за что любят Next.js, — это возможность предварительного рендеринга страниц динамических сайтов на стороне сервера.

И если вам стало интересно, как использовать этот фреймворк в своих проектах, или вы хотели бы разрабатывать похожие веб-приложения, советуем годную подборку уроков от Жени Ковальчука на YouTube.

#курсы #js #веб #react

​​Где и как учить React в 2022 году?

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

https://blog.openreplay.com/where-to-learn-react-js-in-2022-a-list-of-resources-for-new-developers

#javascript #react #веб #начинающим

Годнота для веб-разработчиков: подробное руководство как создавать впечатляющие 3D-сцены на React Three Fiber

В статье показано, как правильно настроить сцены, создать геометрию, добавить освещение и активировать эффекты постобработки. Из приятного — статья просто напичкана кучей примеров, которые можно «потрогать» самому:

https://varun.ca/modular-webgl/

#фронтенд #react #веб

​Пишем собственное портфолио на React, GreenSock и Animate.css

Это просто достойный полуторачасовой гайд от разработчиков freeCodeCamp, как создать сайт-портфолио на React с нуля с продвинутой анимацией. Но нужно немного английского:

https://youtu.be/bmpI252DmiI

#фронтенд #react #веб

Что будет, если объединить несколько фэнтезийных миров в одном проекте на React?

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

Вот тут вы можете изучить код проекта и его особенности: https://github.com/sfatihk/react-world

А здесь протестировать его в деле:https://sfatihk.github.io/react-world/#

#веб #react

​​Хуки — наше всё: рассматриваем наглядные примеры использования React Hooks

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

Всё с полезными советами и на наглядных примерах с кодом: https://css-tricks.com/react-hooks-the-deep-cuts/

А если ещё не знакомы с хуками или только начинаете с ними работать, этот материал поможет вникнуть: https://habr.com/ru/company/simbirsoft/blog/652321/

#react #фронтенд

​Заграничные фронтендеры и бэкендеры говорят про революцию в React.js. Что произошло?

Недавно Ден Абрамов написал в своём Twitter, что React-разработчикам больше не нужно использовать API в своих приложениях. Теперь фронтенд может общаться с бэком с помощью React Server Components. Это такие компоненты React, которые будут исполнятся на сервере.

С одной стороны это значит, что ​React может заменить бэкенд. С другой похоже на то, что разработчики изобрели велосипед Next.js заново. Как на деле — давайте разбираться в этом видео.

#react #бэкенд

​Express — гибкий веб-фреймворк для Node.js, который облегчает разработку веб-приложений

Подготовили для вас гайд как соединить серверную часть с приложением на React. Понадобиться лишь лишь небольшой опыт работы с Node.js, редактор кода VS Code и браузер. И всё, можно приступать: https://tproger.ru/articles/kak-nastroit-node-js-express-server-dlya-react/

#nodejs #react

​Вышла новая версия React-фреймворка Next.js 14

26 октября разработчики выпустили новый релиз Next.js. Из основных нововведений: релиз ускоряет время сборки в 2 раза, а Server Actions позволяет выполнять код на сервере.

Что ещё нового в Next 14:
— Ускоренный компилятор: Rust-based компилятор Turbopack обеспечивает стабильность и производительность.
— Fast Refresh ускоряет обновление кода до 94,7%.
— Введены маршруты API для упрощения создания внутренних эндпоинтов.
— Серверные действия позволяют определить функции, выполняемые на сервере и вызываемые из React-компонентов.
— Частичная предварительная отрисовка (Prerendering) оптимизирует отрисовку динамического контента.
— Улучшена обработка метаданных для более плавного пользовательского опыта и предотвращения проблем.
— Запущен новый бесплатный курс Next.js Learn для обучения разработчиков.

Подробнее: https://github.com/vercel/next.js/releases/tag/v14.0.0

#react #веб #фронтенд

Как переписать библиотеку с JavaScript на Rust

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

Именно так и поступил автор статьи и получил программу с производительностью, сравнимой с С++, а типизацией лучше, чем в Java. Тут он рассказал, как у него и его команды получилось ускорить программу в три раза, с какими трудностями они столкнулись во время перехода и какие решения использовали.

#javascript #react

​​Разработчик React рассказал, как создали фреймворк на самом деле: чинили баг, но проблема оказалась в DNS где-то в Индии.

В 2013 году в Facebook Chat часто появлялся баг: уведомление о сообщении приходило, а самого сообщения не было.Как считали разработчики, это происходило из-за ужасного императивного кода.

Было решено создать фреймворк, который бы решил эту проблему, а заодно дал высокую скорость разработки, простоту и масштабируемость. И хотя с последними задачами он справился неплохо, проблему, с которой все начиналось, он так и не решил.

Как рассказывает один из разработчиков Adam Wolff, немного позже оказалось, что проблема на самом деле была в неправильных настройках DNS где-то в Индии. Эту проблему обнаружили, DNS починили, проблема ушла, а React остался.

Даже страшно становится, когда понимаешь, сколько всего в IT создано благодаря индийцам.

@tproger_web #react #история