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
Несмотря на то, что использование useMemo и useCallback совершенно оправдано во многих случаях, и это отличные инструменты, они могут оказаться проблемными при неправильной эксплуатации.
Поэтому я собираюсь перечислить несколько аспектов, о которых следует помнить, когда ваше приложение работает неэффективно.
▪Читать
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥12👍6❤2
💡Совет React JS / JavaScript:
Нам не нужно использовать хуки при работе с формами в React. Мы можем обрабатывать изменения и отправлять их непосредственно в данные формы.
Посмотрите этот пример. Кроме того, мы получаем гораздо лучшую производительность (без повторного рендеринга).
#junior
@react_tg
Нам не нужно использовать хуки при работе с формами в React. Мы можем обрабатывать изменения и отправлять их непосредственно в данные формы.
Посмотрите этот пример. Кроме того, мы получаем гораздо лучшую производительность (без повторного рендеринга).
#junior
@react_tg
👍27❤4🔥4
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15👍5👎2🥰1
This media is not supported in your browser
VIEW IN TELEGRAM
🐵🙈 Форма входа с анимодзи в стиле неоморфизм, написанная на HTML, CSS и ReactJs.
Пользователь гитхаба поделился репозиторием:
Ссылка
@react_tg
Пользователь гитхаба поделился репозиторием:
Ссылка
@react_tg
👍32❤9🔥4🤡2