React: практики, которые помогут стать продвинутым разработчиком
https://tprg.ru/XWhs
React.js — один из самых популярных способов создать одностраничное приложение. Это гибкий и удобный фреймворк, с помощью которого можно либо добавить компонент на существующий сайт, либо создать новый сайт с нуля.
В статье собрали несколько советов, которые помогут начать использовать React.js с большей эффективностью:
— зачем нужен контекст,
— как можно обрабатывать ошибки,
— где взять конфигурации сборок, которые могут улучшить производительность,
— как взаимодействовать с дочерними элементами,
— зачем нужно разделение кода и как его использовать.
#веб #react
https://tprg.ru/XWhs
React.js — один из самых популярных способов создать одностраничное приложение. Это гибкий и удобный фреймворк, с помощью которого можно либо добавить компонент на существующий сайт, либо создать новый сайт с нуля.
В статье собрали несколько советов, которые помогут начать использовать React.js с большей эффективностью:
— зачем нужен контекст,
— как можно обрабатывать ошибки,
— где взять конфигурации сборок, которые могут улучшить производительность,
— как взаимодействовать с дочерними элементами,
— зачем нужно разделение кода и как его использовать.
#веб #react
Способы передачи данных между компонентами в React
https://tprg.ru/Q0Dk
Если вы в своём проекте используете React, то вам очень пригодится понимание того, как происходит взаимодействие React-компонентов.
В статье подробно рассказываем про возможные способы передачи данных между компонентами:
— через свойства (props),
— передача через Context,
— с использованием React-Redux.
#javascript #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
https://tprg.ru/j7nd
В этой статье рассмотрим создание drag-and-drop элементов на React с помощью библиотеки react-beautiful-dnd от Atlassian. Статья рассчитана на людей, знакомых с React.
Изучать библиотеку будем, разрабатывая простую игру с drag-and-drop элементами.
#react #reactjs
This media is not supported in your browser
VIEW IN TELEGRAM
Солидному программисту — солидные часы. На React и со styled-components, конечно.
Код в помощь: https://codepen.io/JohnRiordan/pen/mgdpKN
#react
Код в помощь: https://codepen.io/JohnRiordan/pen/mgdpKN
#react
5 современных способов создания анимации в React
https://tprg.ru/6btU
Многие разработчики анимируют приложения только с помощью CSS, добавляя классы в теги HTML. Это отличный способ, но если хотите создавать сложные анимации, обратите внимание на другие подходы.
В нашем материале давайте поговорим о них.
#веб #react
https://tprg.ru/6btU
Многие разработчики анимируют приложения только с помощью CSS, добавляя классы в теги HTML. Это отличный способ, но если хотите создавать сложные анимации, обратите внимание на другие подходы.
В нашем материале давайте поговорим о них.
#веб #react
Forwarded from Мобильная разработка
Мы подготовили для вас подборку материалов по кроссплатформенной и 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
— о жизненном цикле 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
В этой статье Максим Кравец, руководитель аутсорс-продакшна Holyweb составил целую дорожную карту по изучению фреймворка. Всё с подробными примерами и полезными ссылками:
https://tprg.ru/UQOi
#веб #react
В своей статье о русскоязычной версии Wordle Саша рассказал, что использовал для её разработки Next.js.
Если вкратце, Next.js — это JavaScript-фреймворк, внутри которого работает библиотека React. Он «из коробки» отлично справляется с созданием статических веб-сайтов. Но главное, за что любят Next.js, — это возможность предварительного рендеринга страниц динамических сайтов на стороне сервера.
И если вам стало интересно, как использовать этот фреймворк в своих проектах, или вы хотели бы разрабатывать похожие веб-приложения, советуем годную подборку уроков от Жени Ковальчука на YouTube.
#курсы #js #веб #react
Если вкратце, Next.js — это JavaScript-фреймворк, внутри которого работает библиотека React. Он «из коробки» отлично справляется с созданием статических веб-сайтов. Но главное, за что любят Next.js, — это возможность предварительного рендеринга страниц динамических сайтов на стороне сервера.
И если вам стало интересно, как использовать этот фреймворк в своих проектах, или вы хотели бы разрабатывать похожие веб-приложения, советуем годную подборку уроков от Жени Ковальчука на YouTube.
#курсы #js #веб #react
YouTube
Next.js #0 Введение (Introduction)
#YauhenK #webdev #Next #Nextjs
Всех приветствую в курсе «Next.js».
В данном видеокурсе мы с вами рассмотрим фрэймворк для серверного рендеринга - Next.js. Разберём основные концепции по типу роутинга, создания страниц и копонентов. Рассмотрим разницу подходов…
Всех приветствую в курсе «Next.js».
В данном видеокурсе мы с вами рассмотрим фрэймворк для серверного рендеринга - Next.js. Разберём основные концепции по типу роутинга, создания страниц и копонентов. Рассмотрим разницу подходов…
Больше дорожных карт богу дорожных карт: обновлённый роадмап для React-разработчиков
В шпаргалке собраны все актуальные на 2022 год инструменты и технологии. Новичкам она будет полезна для уверенного старта, а опытным разработчикам подскажет, куда развиваться дальше.
Кратко — на картинках, а более подробно — в заметке на Medium: https://medium.com/javarevisited/the-2019-react-js-developer-roadmap-9a8e290b8a56
#react #шпаргалка
В шпаргалке собраны все актуальные на 2022 год инструменты и технологии. Новичкам она будет полезна для уверенного старта, а опытным разработчикам подскажет, куда развиваться дальше.
Кратко — на картинках, а более подробно — в заметке на Medium: https://medium.com/javarevisited/the-2019-react-js-developer-roadmap-9a8e290b8a56
#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 #веб #начинающим
Вот целый гайд, в котором собрали качественные источники и советы, проверенные опытными разработчиками. Притом, не только по React, но и по JavaScript и смежным технологиям:
https://blog.openreplay.com/where-to-learn-react-js-in-2022-a-list-of-resources-for-new-developers
#javascript #react #веб #начинающим
This media is not supported in your browser
VIEW IN TELEGRAM
Годнота для веб-разработчиков: подробное руководство как создавать впечатляющие 3D-сцены на React Three Fiber
В статье показано, как правильно настроить сцены, создать геометрию, добавить освещение и активировать эффекты постобработки. Из приятного — статья просто напичкана кучей примеров, которые можно «потрогать» самому:
https://varun.ca/modular-webgl/
#фронтенд #react #веб
В статье показано, как правильно настроить сцены, создать геометрию, добавить освещение и активировать эффекты постобработки. Из приятного — статья просто напичкана кучей примеров, которые можно «потрогать» самому:
https://varun.ca/modular-webgl/
#фронтенд #react #веб
Пишем собственное портфолио на React, GreenSock и Animate.css
Это просто достойный полуторачасовой гайд от разработчиков freeCodeCamp, как создать сайт-портфолио на React с нуля с продвинутой анимацией. Но нужно немного английского:
https://youtu.be/bmpI252DmiI
#фронтенд #react #веб
Это просто достойный полуторачасовой гайд от разработчиков freeCodeCamp, как создать сайт-портфолио на React с нуля с продвинутой анимацией. Но нужно немного английского:
https://youtu.be/bmpI252DmiI
#фронтенд #react #веб
YouTube
React Project Tutorial – Build a Portfolio Website w/ Advanced Animations
In this video, you will learn how to build React portfolio website from scratch with advanced animations.
✏️ Slobodan developed this course: https://www.youtube.com/channel/UCBu5ulO4d-d47lAVybpRTkw
🔗 Code and assets: https://github.com/bobangajicsm/react…
✏️ Slobodan developed this course: https://www.youtube.com/channel/UCBu5ulO4d-d47lAVybpRTkw
🔗 Code and assets: https://github.com/bobangajicsm/react…
This media is not supported in your browser
VIEW IN TELEGRAM
Что будет, если объединить несколько фэнтезийных миров в одном проекте на React?
Получится довольно интересная веб-страница, как у автора этого репозитория. В нём он продемонстрировал некоторые возможности библиотеки React и позволил прогуляться по вымышленным мирам в роли местных героев.
Вот тут вы можете изучить код проекта и его особенности: https://github.com/sfatihk/react-world
А здесь протестировать его в деле:https://sfatihk.github.io/react-world/#
#веб #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 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 #бэкенд
Недавно Ден Абрамов написал в своём 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. Понадобиться лишь лишь небольшой опыт работы с Node.js, редактор кода VS Code и браузер. И всё, можно приступать: https://tproger.ru/articles/kak-nastroit-node-js-express-server-dlya-react/
#nodejs #react