React JS
📌Гексагональная архитектура в React Автор рассказывает о интересной концепции и ее применении в React приложениях. Основной идеей гексагональной архитектуры или чистой архитектуры и всех других подобных парадигм является концепция отделения предметной области…
В сегодняшней статье мы шаг за шагом создадим небольшое, но многофункциональное адаптивное приложение React с нуля быстрым и удобным для разработчиков способом, используя Material UI.
▪Читать
▪Зеркало
▪Код
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14❤2👍2👎1
React и React Native помогают сблизить веб и мобильную разработку, улучшая опыт как пользователей, так и разработчиков.
Некоторые продвинутые команды уже создают полноценную кроссплатформенную систему проектирования с помощью React и React Native (видеоурок).
▪Читать
▪Код
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10❤4👍4
This media is not supported in your browser
VIEW IN TELEGRAM
🎨 React HSL Slider
Слайдер выбора цвета, реализован с помощью React. Использует цвета из библиотеки w3color.js
#слайдер #React #w3color
https://codepen.io/jh3y/pen/gOwegKr
@react_tg
Слайдер выбора цвета, реализован с помощью React. Использует цвета из библиотеки w3color.js
#слайдер #React #w3color
https://codepen.io/jh3y/pen/gOwegKr
@react_tg
🔥20👍5❤2
Framer Motion — это библиотека анимации React с открытым исходным кодом, которая предоставляет пользователям несложный API для создания анимации, управления свойствами анимации и обработки пользовательских действий.
В этой статье с кодом, вы узнаете как легко добавить его в приложение React и создать красивую анимацию за несколько шагов.
npm create-react-app framer▪ Читать
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥3❤1
Одним из наиболее часто задаваемых вопросов разработчиками при создании современных приложений на React является управление состоянием. В этом руководстве вы узнаете, как использовать MobX в качестве библиотеки управления состоянием для React-приложений. Мы будем использовать её для управления состоянием, что поможет нам понять концепцию работы MobX.
▪Читать
▪Зеркало
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥3❤1
7️⃣ правил ESLint, рекомендуемых для проектов TypeScript/React
Комбинация ESLint и Prettier не только значительно сокращает время разработки, но и позволяет вам оптимизировать приложение.
Вот 7 рекомендуемых конфигураций ESLint, которые значительно улучшат ваш проект на React.
▪Читать
@react_tg
Комбинация ESLint и Prettier не только значительно сокращает время разработки, но и позволяет вам оптимизировать приложение.
Вот 7 рекомендуемых конфигураций ESLint, которые значительно улучшат ваш проект на React.
▪Читать
@react_tg
👍15❤1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Квиз по CSS, сделанный с помощью SCSS и библиотек React.js и GSAP.js
#codepen #css #js
https://codepen.io/knyttneve/pen/abybEey
react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👍5❤1
React в приложениях Angular может понадобится в двух случаях.
- В экосистеме React есть компонент, на разработку которого, вероятно, уйдут недели, например компонент Timeline.
- Сотрудничество с компанией, использующей React, которой необходимо интегрировать его в существующее приложение.
В этой статье я расскажу, как интегрировать React в обоих сценариях. Начнем с самого простого случая, когда нужно использовать компонент React.
▪Читать
react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥3❤1
Из-за своей гибкой парадигмы React имеет несколько подходов проектирования проекта.
Решения, которые мы принимаем на этапе проектирования и архитектуры проекта, могут либо сократить временные затраты на разработку простого надежного решения, либо затруднить её из-за усложнения реализации.
▪Читать
react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥2❤1
Коллекция паттернов проектирования React, советы и рекомендации по их использованию.
📌 Статья
react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13👍4❤2🥰1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥7❤2
This media is not supported in your browser
VIEW IN TELEGRAM
https://codepen.io/supah/pen/rNKraQJ
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥6❤4
Дан следующий код:
import { useState, useEffect, useRef } from "react";
function App() {
const [inputValue, setInputValue] = useState("");
const previousInputValue = useRef("");
return (
<>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<h2>Current Value: {inputValue}</h2>
<h2>Previous Value: {previousInputValue.current}</h2>
</>
);
}
Ответ:
function App() {
const [inputValue, setInputValue] = useState("");
const [prevInputValue, setPrevInputValue] = useState("");
const prevRef = useRef();
useEffect(() => {
prevRef.current = inputValue;
}, [inputValue]);
return (
<>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(prev => {
setPrevInputValue(prev); // Предыдущее состояние
return e.target.value; // Устанавливаем текущее
})}
/>
<h2>Current Value: {inputValue}</h2>
<h2>Previous Value: {prevInputValue}</h2>
<h2>Previous Value vs Ref: {prevRef.current}</h2>
</>
);
}Можно ли обойтись без использования
useEfect? 👍 если нравится такой формат вопрос.
Пишите свое решение в комментариях👇
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍37❤5🔥4
React Hooks подобны специям на вашей кухне, они придают аромат вашему блюду и делают его еще вкуснее.
Так же, как и специи, разные крючки используются по-разному и могут значительно повысить функциональность ваших компонентов. В этой статье мы рассмотрим пять наиболее часто используемых React Hooks и исследуем их применение и преимущества на примерах кода и реальных примерах использования.
▪Читать
▪Зеркало
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥3❤1🤩1
This media is not supported in your browser
VIEW IN TELEGRAM
Scrollend позволяет отследить, когда была закончена прокрутка и совершить после этого определённые действия. Это событие может избавить вас от лишних функций timeout и сделает код понятнее и чище.
Узнать подробности можно тут:
https://developer.chrome.com/blog/scrollend-a-new-javascript-event/
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥3❤1
Для хардкорных фанатов Реакта и всем кому интересна веб-разработка. На ютубе вышел документальный фильм – React.js: Documentary
React — одна из самых популярных библиотек. Учитывая, что он был создан внутри Facebook, можно было предположить, что он всегда был обречен на успех.
Что, если мы скажем вам, что первое столкновение React с публикой было не таким гламурным? Полная история первых дней существования React и группы преданных своему делу разработчиков, которые помогли вывести его на мировую арену.
Фильм на английском, есть русские сабы:
👉 Смотреть на ютуб
@react_tg
React — одна из самых популярных библиотек. Учитывая, что он был создан внутри Facebook, можно было предположить, что он всегда был обречен на успех.
Что, если мы скажем вам, что первое столкновение React с публикой было не таким гламурным? Полная история первых дней существования React и группы преданных своему делу разработчиков, которые помогли вывести его на мировую арену.
Фильм на английском, есть русские сабы:
👉 Смотреть на ютуб
@react_tg
👍18🔥6❤2
React разработчик Винкас Стонис собрал 12 пунктов по техническому SEO:
"Многие разработчики, даже опытные, ничего не знают о поисковой оптимизации (SEO). И я тоже долго не знал. SEO в основном невидим, поэтому его легко игнорировать"
Добавляйте в закладки чтобы не потерять:
👉 Читать статью
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥5🤡3❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Стильное, анимированное переключение между вкладками, реализованное c применением SCSS.
https://codepen.io/pehaa/pen/wvBLpNK
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14❤5🔥5