React — это популярная JavaScript-библиотека, используемая для создания пользовательских интерфейсов. Она основана на компонентах и позволяет строить динамичные и эффективные веб-приложения. React также использует концепцию виртуального DOM (Document Object Model), который значительно ускоряет обновление интерфейса.
Основные концепции React:
1.Компоненты: В React все представление UI состоит из компонентов. Каждый компонент управляет своим собственным фрагментом интерфейса. Компоненты могут включать в себя HTML, CSS и JavaScript.
2.Виртуальный DOM: Виртуальный DOM — это упрощенная версия реального DOM. React сначала вносит изменения в виртуальный DOM, а затем применяет эти изменения к реальному DOM. Это позволяет значительно ускорить процесс обновления страницы.
3.Однонаправленный поток данных: В React данные передаются сверху вниз, от родительского компонента к дочерним. Это упрощает управление состоянием и делает приложение более предсказуемым.
Объяснение:
1.useState: Это хук, который используется для управления состоянием в функциональных компонентах. В примере переменная count хранит значение счётчика, а функция setCount используется для его обновления.
2.onClick: При нажатии на кнопки вызываются функции increment или decrement, которые увеличивают или уменьшают значение счётчика.
Преимущества React:
1.Быстрое и эффективное обновление: Благодаря виртуальному DOM, React обновляет только те части интерфейса, которые изменились, что повышает производительность.
2.Переиспользуемые компоненты: Компоненты в React можно использовать многократно в разных частях приложения.
3.React Hooks: Хуки React позволяют использовать состояние и другие возможности в функциональных компонентах, что делает код более компактным и удобным.
Таким образом, React — это мощный инструмент для создания современных веб-приложений с высокой производительностью и удобным управлением состоянием.
Основные концепции React:
1.Компоненты: В React все представление UI состоит из компонентов. Каждый компонент управляет своим собственным фрагментом интерфейса. Компоненты могут включать в себя HTML, CSS и JavaScript.
2.Виртуальный DOM: Виртуальный DOM — это упрощенная версия реального DOM. React сначала вносит изменения в виртуальный DOM, а затем применяет эти изменения к реальному DOM. Это позволяет значительно ускорить процесс обновления страницы.
3.Однонаправленный поток данных: В React данные передаются сверху вниз, от родительского компонента к дочерним. Это упрощает управление состоянием и делает приложение более предсказуемым.
function Counter() {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
return (
<div>
<h1>Счётчик: {count}</h1>
<button onClick={increment}>Увеличить</button>
<button onClick={decrement}>Уменьшить</button>
</div>
);
}
export default Counter;
Объяснение:
1.useState: Это хук, который используется для управления состоянием в функциональных компонентах. В примере переменная count хранит значение счётчика, а функция setCount используется для его обновления.
2.onClick: При нажатии на кнопки вызываются функции increment или decrement, которые увеличивают или уменьшают значение счётчика.
Преимущества React:
1.Быстрое и эффективное обновление: Благодаря виртуальному DOM, React обновляет только те части интерфейса, которые изменились, что повышает производительность.
2.Переиспользуемые компоненты: Компоненты в React можно использовать многократно в разных частях приложения.
3.React Hooks: Хуки React позволяют использовать состояние и другие возможности в функциональных компонентах, что делает код более компактным и удобным.
Таким образом, React — это мощный инструмент для создания современных веб-приложений с высокой производительностью и удобным управлением состоянием.
👍2❤1
Assalomu aleykum.Barodaron shumoro bo Idi fitr tabrik mekunam.Allohi mehrubon ruzahoi giriftai shumoro qabul kunad.To Ramazoni digar hamai movu shumoro sihatu salomat rasonad Omin🤲🤲🤲
❤3👎2
This media is not supported in your browser
VIEW IN TELEGRAM
Дар Telegram акнун метавонед вазифа (таск) гузоред — дар дохили чатҳо!
• Метавонед дар чатҳои шахсӣ ва гурӯҳӣ истифода баред — барои худатон ё барои аъзои гурӯҳ вазифа таъин кунед
• Ҳар як вазифа иҷрокунандаи алоҳида дорад, бо расми профилаш намоиш дода мешавад
• Метавонед режимро интихоб кунед: ё як нафар иҷро мекунад ё ҳамаи иштирокчиён — танзими чандир барои ҳама гуна ҳолатҳо
• Метавонед дар чатҳои шахсӣ ва гурӯҳӣ истифода баред — барои худатон ё барои аъзои гурӯҳ вазифа таъин кунед
• Ҳар як вазифа иҷрокунандаи алоҳида дорад, бо расми профилаш намоиш дода мешавад
• Метавонед режимро интихоб кунед: ё як нафар иҷро мекунад ё ҳамаи иштирокчиён — танзими чандир барои ҳама гуна ҳолатҳо
❤2
🚀 Elevating UX with React Native Reanimated + Gesture Handler
I’m excited to share a smooth, gesture-driven UX feature I recently built using react-native-reanimated paired with react-native-gesture-handler.
🔍 What I achieved:
🌀 Created interactive swipe, drag, and spinner effects using Reanimated’s native-thread animations.
🎯 Integrated gesture detection with Gesture Handler to deliver fluid, responsive motion—even during complex interactions.
🧩 Designed modular UI components that feel native and intuitive.
Why it matters:
Reanimated moves animations off the JS thread, avoiding frame drops and delivered buttery smoothness
Gesture Handler handles low-latency swipe, pinch, and tap gestures, solving gesture conflicts in nested views .
Together, they empower developers to craft polished interfaces, from Tinder-style cards to draggable sheets
🤝 How this benefits teams & apps:
📈 Better performance on lower-end devices
👌 Safer and more maintainable gesture code
🧰 Easily extendable—mix in Reanimated for animation, Gesture Handler for interaction, even Skia for visuals
If you're working with react-native-reanimated and react-native-gesture-handler, feel free to message me — I'm happy to help.
I’m excited to share a smooth, gesture-driven UX feature I recently built using react-native-reanimated paired with react-native-gesture-handler.
🔍 What I achieved:
🌀 Created interactive swipe, drag, and spinner effects using Reanimated’s native-thread animations.
🎯 Integrated gesture detection with Gesture Handler to deliver fluid, responsive motion—even during complex interactions.
🧩 Designed modular UI components that feel native and intuitive.
Why it matters:
Reanimated moves animations off the JS thread, avoiding frame drops and delivered buttery smoothness
Gesture Handler handles low-latency swipe, pinch, and tap gestures, solving gesture conflicts in nested views .
Together, they empower developers to craft polished interfaces, from Tinder-style cards to draggable sheets
🤝 How this benefits teams & apps:
📈 Better performance on lower-end devices
👌 Safer and more maintainable gesture code
🧰 Easily extendable—mix in Reanimated for animation, Gesture Handler for interaction, even Skia for visuals
If you're working with react-native-reanimated and react-native-gesture-handler, feel free to message me — I'm happy to help.
👍3
✍️ Друзья! Открываем запись на новый поток курсов по Фронтенд-разработке! 🧑🏻💻
💻 Если ты мечтаешь создавать современные и стильные сайты — начни путь в IT уже в августе! Тебя ждут понятные уроки, поддержка наставников и дружелюбная атмосфера.
📌 Что важно знать:
• Старт: август 2025
• Продолжительность: ~5 месяцев;
• Занятия: 3 раза в неделю
• Начало занятий: 18:00
• Длительность: 2 часа
• Место проведения занятий: Душанбе, Регус — Бустон Сити (ориентир: магазин «Гуля Голд», лицей №4)
• Стоимость 1-го месяца: 200 сомони
✅ По завершении первого месяца — экзамен. Успешно сдавшие смогут продолжить обучение на следующих этапах.
📲 Перейди по ссылке заполни заявку на обучение прямо сейчас.
🤖 Заявку также можно отправить через нашего бота @MyHamdam_bot
🚀 Не упусти шанс освоить востребованную профессию в сфере веб-технологий!
📱 975-68-86-86
Телеграм | Фейсбук | Инстаграм
💻 Если ты мечтаешь создавать современные и стильные сайты — начни путь в IT уже в августе! Тебя ждут понятные уроки, поддержка наставников и дружелюбная атмосфера.
📌 Что важно знать:
• Старт: август 2025
• Продолжительность: ~5 месяцев;
• Занятия: 3 раза в неделю
• Начало занятий: 18:00
• Длительность: 2 часа
• Место проведения занятий: Душанбе, Регус — Бустон Сити (ориентир: магазин «Гуля Голд», лицей №4)
• Стоимость 1-го месяца: 200 сомони
✅ По завершении первого месяца — экзамен. Успешно сдавшие смогут продолжить обучение на следующих этапах.
📲 Перейди по ссылке заполни заявку на обучение прямо сейчас.
🤖 Заявку также можно отправить через нашего бота @MyHamdam_bot
🚀 Не упусти шанс освоить востребованную профессию в сфере веб-технологий!
📱 975-68-86-86
Телеграм | Фейсбук | Инстаграм
Google Docs
Курси Frontend-барномасозӣ бо дастгирии Ташкилоти ҷамъиятии "Ҳамдам" | Курс по фронтенд-программированию при поддержке общественной…
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
🌐 Ташкилоти ҷамъиятии «Ҳамдам» дар самти рушди таълими босифат лоиҳаҳои гуногунро пеш мебарад. Яке аз чунин лоиҳаҳо омода кардани мутахассисони ҷавон дар соҳаи барномасозӣ…
🌐 Ташкилоти ҷамъиятии «Ҳамдам» дар самти рушди таълими босифат лоиҳаҳои гуногунро пеш мебарад. Яке аз чунин лоиҳаҳо омода кардани мутахассисони ҷавон дар соҳаи барномасозӣ…
❤1
Асоси фарқиятҳои байни localStorage, sessionStorage ва cookies чист?
✅ Ҷавоб ҳар 10 дақиқа гузошта мешавад!
✅ Ҷавоб ҳар 10 дақиқа гузошта мешавад!
👍1
Javob:
localStorage → доимӣ нигоҳ дошта мешавад, ҳатто вақте браузер баста шавад ҳам нест намешавад.
sessionStorage → танҳо то поёни сессия нигоҳ дошта мешавад.
cookies → ба сервер низ фиристода мешавад, ҳаҷми он хурдтар аст!
localStorage → доимӣ нигоҳ дошта мешавад, ҳатто вақте браузер баста шавад ҳам нест намешавад.
sessionStorage → танҳо то поёни сессия нигоҳ дошта мешавад.
cookies → ба сервер низ фиристода мешавад, ҳаҷми он хурдтар аст!
❤2
📖 Просто оставлю это здесь
https://developer.chrome.com/blog/chrome-devtools-mcp
https://github.com/ChromeDevTools/chrome-devtools-mcp/?tab=readme-ov-file#chrome-devtools-mcp
https://developer.chrome.com/blog/chrome-devtools-mcp
https://github.com/ChromeDevTools/chrome-devtools-mcp/?tab=readme-ov-file#chrome-devtools-mcp
Chrome for Developers
Chrome DevTools (MCP) for your AI agent | Blog | Chrome for Developers
Public preview for the new Chrome DevTools MCP server, bringing the power of Chrome DevTools to AI coding assistants.
👍1
⚡️Volta
Все мы знаем про инструмент управления версиями Node.js под названием NVM (Node Version Manager), но есть ещё один - Volta.
📌Какие же отличия?
📕 Документация тут
Все мы знаем про инструмент управления версиями Node.js под названием NVM (Node Version Manager), но есть ещё один - Volta.
📌Какие же отличия?
Volta не требует инициализации функций оболочки при каждом открытии терминала и выбирает версию на лету. Volta закрепляет и Node, и npm/yarn на проект через package.json, а nvm фокусируется на Node и обычно опирается на .nvmrc с ручным переключением.📕 Документация тут
❤2
🚀 Next.js ҳамчун Backend — имкониятҳои пурқувват барои developer-ҳо!
Бисёриҳо Next.js-ро танҳо барои frontend мешиносанд, вале дар ҳақиқат он метавонад backend-и пурра бошад! 😎
Бо истифода аз API Routes, шумо метавонед:
API endpoint-ҳои худатон созед
Бо базаи маълумот (PostgreSQL, MongoDB, Prisma ва ғайра) кор кунед
Authentication (JWT, OAuth, NextAuth) илова кунед
Ҳамааш дар як codebase — backend ва frontend якҷо 🔥
📦 Next.js 14 ва “App Router” ба шумо имкон медиҳад, ки SSR, ISR ва API-ро ҳамзамон истифода баред.
Ин маънои онро дорад, ки шумо метавонед як платформаи пурра (full-stack) созед — бе Express ё NestJS!
Бисёриҳо Next.js-ро танҳо барои frontend мешиносанд, вале дар ҳақиқат он метавонад backend-и пурра бошад! 😎
Бо истифода аз API Routes, шумо метавонед:
API endpoint-ҳои худатон созед
Бо базаи маълумот (PostgreSQL, MongoDB, Prisma ва ғайра) кор кунед
Authentication (JWT, OAuth, NextAuth) илова кунед
Ҳамааш дар як codebase — backend ва frontend якҷо 🔥
// app/api/users/route.ts
import { NextResponse } from 'next/server';
export async function GET() {
const users = [{ id: 1, name: 'Abdulloh' }];
return NextResponse.json(users);
}
📦 Next.js 14 ва “App Router” ба шумо имкон медиҳад, ки SSR, ISR ва API-ро ҳамзамон истифода баред.
Ин маънои онро дорад, ки шумо метавонед як платформаи пурра (full-stack) созед — бе Express ё NestJS!
👍3❤2
🔥 Хатогиҳои маъмул миёни Junior-ҳо
Дар таҷриба бисёр Junior-ҳоро дидаам, ки аз рӯи сабаби камтаҷрибагӣ чанд хатогиҳои маъмул мекунанд. Ин хатоҳо табиӣ ҳастанд, вале агар одам барвақт фаҳмад — хеле тез тараққӣ мекунад.
Маъмултарин хатогиҳо инҳоянд:
Library-ҳои навро бе зарурат истифода мебаранд.
Хоҳад React бошад, Nest ё Node — аввал кушиш кунед чизро бо код ҳал кунед. Library танҳо вақте лозим мешавад, ки воқеан вақтро сарфа кунад.
Кодро аз ҳад мураккаб менависанд.
Яъне як чизро бо 10 қатор ҳал мекунанд, ки аслан бо 2 қатор мешавад. OOP, pattern ё abstraction-ро дар ҷое истифода мебаранд, ки лозим нест.
Пеш аз Google пурсидан, мустақилона таҳқиқ намекунанд.
"Error шуд — ChatGPT пурсидам."
Вале Junior бояд аввал error-ро хонад, фаҳмад, баъд ҳал кунан ва омӯзад. Google – дӯсти аввал аст.
Codebase-ро намехонанд.
Лоиҳа ба дасташ мерасад ― лекин аввал README ё структураи лоиҳаро намебинад. Дар натиҷа 2 рӯз вақти беҳуда сар мешавад.
Аз савол додан метарсанд.
Фикр мекунанд, ки савол "аҳмақона" мебарояд. Аммо савол надодан — хатои калонтар аст. Ҳеҷ касро савол додан шарманда намекунад.
Version control-ро дуруст истифода намебаранд.
Branch-ҳои нодуруст, commit message-ҳои нофаҳмо, push-и файлҳои нолозим.
Copy-paste аз StackOverflow бе фаҳмидан.
Ин чиз баъдтар лоиҳаро вайрон мекунад. Код бояд фаҳмида шавад — на танҳо кор кунад.
❓ Шумо дар таҷриба кадом хатоҳоро бештар дидаед?
Шояд чизе ҳаст, ки ман фаромӯш кардам? Нависед, ҷолиб аст.
Дар таҷриба бисёр Junior-ҳоро дидаам, ки аз рӯи сабаби камтаҷрибагӣ чанд хатогиҳои маъмул мекунанд. Ин хатоҳо табиӣ ҳастанд, вале агар одам барвақт фаҳмад — хеле тез тараққӣ мекунад.
Маъмултарин хатогиҳо инҳоянд:
Library-ҳои навро бе зарурат истифода мебаранд.
Хоҳад React бошад, Nest ё Node — аввал кушиш кунед чизро бо код ҳал кунед. Library танҳо вақте лозим мешавад, ки воқеан вақтро сарфа кунад.
Кодро аз ҳад мураккаб менависанд.
Яъне як чизро бо 10 қатор ҳал мекунанд, ки аслан бо 2 қатор мешавад. OOP, pattern ё abstraction-ро дар ҷое истифода мебаранд, ки лозим нест.
Пеш аз Google пурсидан, мустақилона таҳқиқ намекунанд.
"Error шуд — ChatGPT пурсидам."
Вале Junior бояд аввал error-ро хонад, фаҳмад, баъд ҳал кунан ва омӯзад. Google – дӯсти аввал аст.
Codebase-ро намехонанд.
Лоиҳа ба дасташ мерасад ― лекин аввал README ё структураи лоиҳаро намебинад. Дар натиҷа 2 рӯз вақти беҳуда сар мешавад.
Аз савол додан метарсанд.
Фикр мекунанд, ки савол "аҳмақона" мебарояд. Аммо савол надодан — хатои калонтар аст. Ҳеҷ касро савол додан шарманда намекунад.
Version control-ро дуруст истифода намебаранд.
Branch-ҳои нодуруст, commit message-ҳои нофаҳмо, push-и файлҳои нолозим.
Copy-paste аз StackOverflow бе фаҳмидан.
Ин чиз баъдтар лоиҳаро вайрон мекунад. Код бояд фаҳмида шавад — на танҳо кор кунад.
❓ Шумо дар таҷриба кадом хатоҳоро бештар дидаед?
Шояд чизе ҳаст, ки ман фаромӯш кардам? Нависед, ҷолиб аст.
❤3👍1
Mr. Programmer👨💻👨💻 pinned «🔥 Хатогиҳои маъмул миёни Junior-ҳо Дар таҷриба бисёр Junior-ҳоро дидаам, ки аз рӯи сабаби камтаҷрибагӣ чанд хатогиҳои маъмул мекунанд. Ин хатоҳо табиӣ ҳастанд, вале агар одам барвақт фаҳмад — хеле тез тараққӣ мекунад. Маъмултарин хатогиҳо инҳоянд: Library…»
Forwarded from React JS
🎨 Создавайте умных агентов с Craft Agents
Craft Agents — это мощный инструмент для работы с агентами, предлагающий интуитивный интерфейс и поддержку множества API. Он позволяет управлять сессиями, интегрироваться с различными сервисами и настраивать рабочие процессы без необходимости в коде.
🚀Основные моменты:
- Многофункциональный десктопный клиент с управлением сессиями
- Интеграция с 32+ инструментами Craft и REST API
- Гибкая система разрешений и динамическое управление статусами
- Поддержка фоновых задач и визуализация инструментов
- Открытый исходный код с возможностью кастомизации
📌 GitHub: https://github.com/lukilabs/craft-agents-oss
Craft Agents — это мощный инструмент для работы с агентами, предлагающий интуитивный интерфейс и поддержку множества API. Он позволяет управлять сессиями, интегрироваться с различными сервисами и настраивать рабочие процессы без необходимости в коде.
🚀Основные моменты:
- Многофункциональный десктопный клиент с управлением сессиями
- Интеграция с 32+ инструментами Craft и REST API
- Гибкая система разрешений и динамическое управление статусами
- Поддержка фоновых задач и визуализация инструментов
- Открытый исходный код с возможностью кастомизации
📌 GitHub: https://github.com/lukilabs/craft-agents-oss
💯2