React Уроки
150 subscribers
118 photos
1 file
446 links
Обучение программированию на React.

Статьи, уроки, инструменты и все что связано с reactjs

Поддержать развитие канала https://qiwi.me/react_it

Контакты: @xstreami
Download Telegram
Morphing SVG With react-spring

Морфинг SVG с помощью react-spring

~~~~~~~~~~
🇺🇸 #tutorial #react #svg #ui #en
@react_it
7 Ways to Implement Conditional Rendering in React Applications

7 способов реализации условного рендеринга в приложениях React

[Статья]: www.digitalocean.com/community/tutorials/7-ways-to-implement-conditional-rendering-in-react-applications

~~~~~~~~~~
🇺🇸 #tutorial #react #en
@react_it
Myths about useEffect

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

[Статья]: epicreact.dev/myths-about-useeffect

~~~~~~~~~~
🇺🇸 #tutorial #react #hooks #en
@react_it
Создание зеркальных эффектов с React-Three-Fiber и Three.js.

Краткое описание того, как создать зеркальную сцену с помощью react-three-fiber.

[Статья]: tympanus.net/codrops/2020/09/30/creating-mirrors-in-react-three-fiber-and-three-js

~~~~~~~~~~
🇺🇸 #tutorial #react #fiber #three #en
@react_it
Routing in Next.js – A Complete Beginner's Guide

Маршрутизация в Next.js - полное руководство для начинающих

[Статья]: www.freecodecamp.org/news/routing-in-nextjs-beginners-guide

~~~~~~~~~~
🇺🇸 #tutorial #react #nextjs #router #en
@react_it
How to Use Chakra UI with Next.js and React

Как использовать интерфейс Chakra UI с Next.js и React

[Статья]: www.freecodecamp.org/news/how-to-use-chakra-ui-with-next-js-and-react

~~~~~~~~~~
🇺🇸 #tutorial #react #chakra #ui #next #en
@react_it
3 React concepts I wish I knew when I started

3 концепции React, которые я хотел бы знать, когда начинал.

[Статья]: medium.com/javascript-in-plain-english/some-react-concepts-i-wish-i-knew-when-i-started-6fd25c466f80

~~~~~~~~~~
🇺🇸 #tutorial #react #en
@react_it
Getting Started With Next.js

Начало работы с Next.js. Next.js - это фреймворк React, который обязательно упростит вашу жизнь как разработчику React, абстрагируя общие и избыточные задачи (например, маршрутизацию) в относительно более простые и мощные API. Таким образом, вы можете сосредоточиться на написании своих приложений вместо того, чтобы изобретать колесо.

[Статья]: www.smashingmagazine.com/2020/10/getting-started-with-next-js

~~~~~~~~~~
🇺🇸 #tutorial #nextjs #react #en
@react_it
Introducing Framer Motion

Анимация, если все сделано правильно, это мощно. Однако создать привлекательную анимацию с помощью CSS может быть непросто. На смену приходит Framer Motion. С Framer Motion вам не нужно быть экспертом по CSS, чтобы создавать красивые анимации. Framer Motion предоставляет нам готовые к производству анимации и низкоуровневый API, с которым мы можем взаимодействовать, чтобы интегрировать эти анимации в наши приложения.

[Статья]: www.smashingmagazine.com/2020/10/introduction-to-framer-motion

~~~~~~~~~~
🇺🇸 #tutorial #framer #анимация #react #en
@react_it
The React Cheatsheet for 2020 📄 (+ real-world examples)

Шпаргалка по React на 2020 (+ реальные примеры)

[Статья]: dev.to/codeartistryio/the-react-cheatsheet-for-2020-real-world-examples-4hgg

~~~~~~~~~~
🇺🇸 #cheatsheet #tutorial #react #en
@react_it
How to create React Notifications/Toasts with 0 dependencies

Как создать React Toasts без зависимостей

[Статья]: tinloof.com/blog/how-to-create-react-notifications-with-0-dependencies

~~~~~~~~~~
🇺🇸 #react #tutorial #toasts #en
@react_it
How to Build an Expandable Comment Box

Узнайте, как воссоздать поле комментариев как на Medium с нуля с помощью React Hooks.

[Статья]: letsbuildui.dev/articles/how-to-build-an-expandable-comment-box

~~~~~~~~~~
🇺🇸 #react #tutorial #comments #en
@react_it
Building a Vertical Carousel Component in React

Создаем компонент вертикальной карусели.

[Статья]: letsbuildui.dev/articles/building-a-vertical-carousel-component-in-react

~~~~~~~~~~
🇺🇸 #react #tutorial #comments #en
@react_it
How to Organize a Large React Application and Make It Scale

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

[Статья]: www.sitepoint.com/organize-large-react-application

~~~~~~~~~~
🇺🇸 #react #tutorial #масштабирование #архитектура #en
@react_it
React Cancel all axios request in componentWillUnmount

Как отменить все axios запросы в React componentWillUnmount

[Статья]: julietonyekaoha.medium.com/react-cancel-all-axios-request-in-componentwillunmount-e5b2c978c071

~~~~~~~~~~
🇺🇸 #react #tutorial #axios #en
@react_it
A Dive Into React And Three.js Using react-three-fiber

Обзор библиотеки react-three-fiber - надстройки над Three.js, позволяющей быстрее создвать 3D модели и анимации, как в веб, так и мобильных приложениях (на RN)

www.smashingmagazine.com/2020/11/threejs-react-three-fiber

~~~~~~~~~~
🇺🇸 #react #tutorial #three #fiber #en
@react_it
Create React App: Get React Projects Ready Fast

Create React App: реально быстрая подготовка проектов

https://www.sitepoint.com/create-react-app

~~~~~~~~~~
🇺🇸 #react #tutorial #cra #en
@react_it
React Native at Wix. Серия статей (пока есть только 2) о том, как Wix разрабатывали свое мобильное приложение. Очень интересно смотреть, как крупные компании решают масштабные задачи, поэтому welcome

https://medium.com/wix-engineering/react-native-at-wix-d56c3745aaff

~~~~~~~~~~
🇺🇸 #react #tutorial #native #en
@react_it
React Hooks: How to Get Started & Build Your Own

https://www.sitepoint.com/react-hooks

~~~~~~~~~~
🇺🇸 #react #tutorial #hooks #en
@react_it