#reactjs #youtube

داخل این ویدیو بهتون یاد دادم که چجوری میتونید بدون استفاده از هیچگونه لایبرری خاصی داخل برنامه ری‌اکتی خودتون دیتای فرم هاتون رو‌ خیلی ساده با چند خط کد جاوااسکریپت مدیریت کنید ⚡️

مشاهده کامل ویدیو داخل‌ چنل یوتوب

مشاهده ریپازیتوری گیت هاب کد های استفاده شده داخل ویدیو

Channel | YouTube | Instagram

#reactjs #youtube

تو این ویدیو بهتون هوک یوزافکت رو با یه مثال جالب یاد دادم و لیمیت سابمیت فرم رو با یوز افکت هندل کردم برای درک بهتر این هوک که می‌تونه جالب باشه براتون 😁⚡

آموزش کامل هوک یوزافکت در ری‌اکت با مثال کاربردی و مینی پروژه فرم با ولیدشن

Channel | YouTube | Instagram

https://youtu.be/udlqlFd4U7w?si=k2yuYWlC4et0G12B

#libarary #reactjs #javascript

● معرفی لایبرری react hook form ●

توی این ویدیو به طور کامل بهتون توضیح دادم که این لایبرری دقیقا چیکار میکنه و چه مزایایی داره ⚡

https://www.instagram.com/reel/C7HCXB4sfK0/?igsh=ZHRjcHVpY2ZrbG92

Channel | YouTube | Instagram

#reactjs #youtube

سلام رفقا امیدوارم حالتون خوب باشه 🔥

توی ویدیو یک تودولیست کامل رو با هم دیگه داخل ری‌اکت با استفاده tailwind css پیاده سازی میکنیم که میتونه پروژه تمرینی خیلی خوبی باشه و همچنین برای استفاده شخصی هم ازش استفاده کنید ✅

برای ذخیره سازی تودو‌ها ام از لوکال‌استوریج استفاده میکنیم که کارمون رو خیلی ساده تر میکنه و چند تا تکنیک جالب و مهمم برای ذخیره سازی آرایه و آبجکت داخل لوکال استوریج بهتون گفتم که ممکنه توی پروژه های واقعی به کارتون بیاد ⚡

مشاهده ویدیو

لینک ریپازیتوری پروژه


Channel | YouTube | Instagram

https://youtu.be/XoOIITEyLiw

#reactjs #youtube

سلام به همگی، امیدوارم عالی باشین 🔥

یه دوره جدید رو داخل چنل یوتوب استارت زدیم و قراره داخل این دوره آموزش کامل لایبرری ری‌اکت جی‌اس رو داشته باشیم و امروز اولین قسمت دوره منتشر شد

داخل این ویدیو قراره که لایبرری محبوب ری‌اکت‌جی‌اس رو با هم دیگه بررسی بکنیم و اولین پروژه خودمون رو ایجاد بکنیم ⚡


توی این جلسه چیا قراره یاد بگیریم ؟

1️⃣ - ری‌اکت جی‌اس چیه ؟

2️⃣ - ساخت اولین پروژه با Create React App

3️⃣ - ساختار فایل‌ها و کامپوننت‌ها در ری‌اکت

5️⃣ - چگونگی و نحوه‌کار ری‌اکت

6️⃣ - بررسی ساختار کامپوننت ها و ساخت اولین کامپوننت

مشاهده ویدیو

Channel | YouTube | Instagram

https://youtu.be/q-380g_ypHc

#reactjs #youtube #reactjs_tutorial

ری‌اکت یه کتابخونه‌ی نسبتا تودرتو هستش و همه چیز داخل ری‌اکت داخل یه سری کامپوننت تو در تو چیده شده که این مسئله می‌تونه بعضی از کارها رو خیلی سخت‌تر کنه، مثلا اگر یک جایی نیاز داشته باشیم که محتوای ری‌اکت رو در جایی خارج از جریان دام داشته باشیم آیا میتونیم کاری انجام بدیم ؟ در این صورت، پورتال‌های ری‌اکت به کمک ما میان !

🎯 با پورتال ها میتونید یک المنت رو داخل یک کامپوننت با همه قابلیت هایی که نیاز دارید استفاده کنید و خیلی ساده اون المنت رو به عنوان فرزند یک المنت دیگه داخل اپلیکیشن خودتون قرار بدید.‌

توی این ویدیو به صورت کامل پورتال هارو بهتون آموزش دادم ⚡

مشاهده کامل ویدیو

Channel | YouTube | Instagram

#reactjs #youtube #reactjs_tutorial

سلام به همگی، امیدوارم حالتون عالی باشه 🔥

یه دوره جدید داخل چنل یوتوب استارت زدیم و قراره که توی این دوره آموزش کامل لایبرری ری‌اکت جی‌اس رو به صورت کامل از سطح مقدماتی تا پیشرفته داشته باشیم تا بتونیم به صورت کامل به این لایبرری مسلط بشیم ⚡

اطلاع رسانی قسمت های جدید دوره داخل چنل تلگرام انجام میشه


مشاهده پلی لیست دوره ▶️

Channel | YouTube | Instagram

#reactjs #youtube #reactjs_tutorial

جلسه دوم دوره ReactJS - کامپوننت ها در ری‌اکت

کامپوننت ها یکی از مهم ترین بخش های هر اپلیکیشن ری‌اکتی هستند که شما باید بلد باشید به خوبی با اونها کار بکنید چون بدون استفاده از کامپوننت ها توسعه وب‌سایت های بزرگ غیر ممکن میشه، حالا یسری نکات وجود داره در مورد کامپوننت ها که اگر این نکات رو بلد باشید توانایی این رو پیدا میکنید که به شکل حرفه ای و اصولی تر به توسعه اپلیکیشن ری‌اکتی خودتون بپردازید.

توی این ویدیو، به آموزش کامل کامپوننت ها در ری‌اکت جی‌اس می‌پردازیم و همه قسمت های مختلف و نکات کلیدی رو در مورد کامپوننت ها بررسی میکنیم.


توی این جلسه چیا قراره یادبگیریم ؟

1️⃣ - مزایای استفاده از کامپوننت ها در ری‌اکت جی‌اس

2️⃣ - تاریخچه کامپوننت ها

3️⃣ - نحوه پیاده سازی کامپوننت ها در ری‌اکت جی‌اس

4️⃣ - استفاده از props در کامپوننت ها

5️⃣ - تفاوت استفاده از کامپوننت به صورت Self-Closing و Open-Close 

6️⃣ - مینی پروژه کارد محصول در ری‌اکت جی‌اس با استفاده از کامپوننت ها


مشاهده ویدیو ▶️

ریپازیتوری گیت‌هاب پروژه این جلسه 🧑‍💻

جلسه قبلی

Channel | YouTube | Instagram

سلام و درود به همگی 👋

ما تصمیم گرفتیم از این به بعد داخل چنل کولی کد نکات کاربردی، آموزش‌های کوتاه و چلنج های مختلف رو هم پوشش بدیم تا بتونیم روز به روز بیشتر و بیشتر یاد بگیریم و باهم دیگه این مسیر جذاب رو طی بکنیم 🤩⚡

برای دسترسی به مطالب هم میتونید از هشتگ های زیر استفاده کنید و هشتگ های کلی مثل :

#javascript_tutorial, #reactjs_tutorial

جهت آموزش های جامع تر و ویدیویی استفاده میشه مثل دوره ری‌اکت جی‌اس، و هشتگ هایی مانند :

#javascript #reactjs #trick #js_challenge #reactjs_challenge #fun

برای مباحث مختصر و مفید تر استفاده میشه 😉

امیدوارم که از مطالب کانال نهایت استفاده رو ببرید 🔥

این هم @MohammadTazaroie آیدی من هستش، هر موردی بود درخدمتم، منتظر پیشنهادات و چالش های برنامه نویسی و انتقاداتتون هستم ❤️‍🔥

چنل یوتبمون رو هم حتما داشته باشید چون مصالب مهم و آموزش های مفیدی رو براتون میزاریم که مطمئنم به کارتون میاد :

https://youtube.com/@coolycode

#reactjs #youtube #reactjs_tutorial

جلسه سوم دوره ReactJS - استیت ها در React، به همراه مینی پروژه افزودن به سبد خرید

استیت یکی از مهم ترین مفاهیم در ری اکت هست و بدون وجود اون تقریبا توسعه اپلکیشین های تعاملی با ری اکت امکان پذیر نیست.

توی این ویدیو، به آموزش کامل استفاده از استیت ها در ری اکت جی اس می‌پردازیم و استیت هارو به صورت کامل مورد بررسی قرار میدیم‌ و تمام نکات کلیدی استیت ها رو به همراه یک مینی پروژه کاربردی یاد میگیریم ⚡


توی این جلسه چیا قراره یادبگیریم ؟

1️⃣ - استیت ها چی هستند داخل ReactJS و چه ویژگی هایی دارند ؟

2️⃣ - نحوه استفاده از استیت ها ReactJS

3️⃣ - مینی پروژه دکمه افزودن به سبد خرید با استفاده از استیت ها

مشاهده ویدیو ▶️

ریپازیتوری گیت‌هاب پروژه این جلسه 🧑‍💻

جلسه قبلی

Channel | YouTube | Instagram

#WhatsThat #reactjs

ویر‌چوال دام چیست ؟ 🚀

اگر با ReactJS کار کرده باشید، احتمالا اسم ویرچوال دام ( VirtualDOM ) رو زیاد شنیده باشید

توی این ویدیو به صورت کامل بهتون توضیح دادم که ویرچوال دام چیه و چه کاری برای ما انجام میده ؟

📷 مشاهده در اینستاگرام

Channel | YouTube | Instagram

#reactjs #NEWPost

سه تا فکت جالب در مورد React Js 😉🔥


برای حمایت بیشتر میتونید از پیج اینستا مشاهده کنید :
https://www.instagram.com/reel/C9plLPrM5fE/?igsh=dnFicnZja2V5Y2Qz

Channel | YouTube | Instagram

#libarary #reactjs #react_helmet

● معرفی لایبرری React Helmet ●

لایبرری React Helmet یک کتابخانه برای مدیریت head در سند HTML در اپلیکیشن‌های React است. با استفاده از React Helmet، می‌تونید به سادگی عنوان صفحه، متا تگ‌ها، و سایر عناصر موجود در head سایت را بر اساس وضعیت فعلی اپلیکیشن تنظیم کنید.
این ابزار برای بهبود SEO، مدیریت اطلاعات متا تگ ها، و به‌روزرسانی داینامیک تگ‌های HTML در اپلیکیشن‌های تک‌صفحه‌ای (SPA) بسیار مفید است. همچنین، React Helmet به شما اجازه می‌دهد که این تغییرات را در هر کامپوننتی از اپلیکیشن خود اعمال کنید، بدون نیاز به دسترسی مستقیم به HTML.

مثال 🚀

import React from 'react';
import { Helmet } from 'react-helmet';

function MyComponent() {
  return (
    <div>
      <Helmet>
        <title>My Page Title</title>
        <meta name="description" content="This is a description of my page" />
      </Helmet>
      <h1>Hello, World!</h1>
      <p>Welcome to my React app with dynamic title and meta tags!</p>
    </div>
  );
}

✅ میتونید برای کسب اطلاعات بیشتر به داکیومنت React Helmet در Npm یا GitHub مراجعه کنید.

Channel | Group | YouTube | Instagram

#reactjs #react_icons

●● چرا React Icons یه انتخاب مناسبه ؟ ●●

چون یک لایبرری فوق‌العاده برای React و NextJs هستش که به شما این امکان رو می‌ده تا به سادگی از مجموعه گسترده ای از آیکون‌ها با قابلیت سفارشی‌سازی بالا استفاده کنید.

مهم ترین ویژگیش اینه که مجموعه بزرگی از آیکون های معروف مثل FontAwesome، Material Design و ... رو داخل خودش جمع آوری کرده و جواب هر نیازی رو میده 🚀

🌐 مشاهده داکیومنت React-Icons

Channel | Group | YouTube

#libarary | #reactjs

💎 معرف لایبرری Styled Components 💎

با استفاده از Styled Components میتونی داخل ReactJS به صورت CSS-in-JS کدهای CSSای بنویسی و از ویژگی‌هایی مثل تم‌ها، استایل‌دهی پویا با props و پشتیبانی کامل از CSS مدرن استفاده کنی.

با Styled Components میتونید مدیریت بهتر و ساده‌تری رو استایل ها داشته باشید و از تداخل استایل‌ها جلوگیری کنید. ⚡

نمونه استفاده از Styled Components ✅

const Button = styled.button`
  color: ${props => props.primary ? 'red' : 'blue'};
  font-size: 1.5em;
  padding: 0.25em 1em;
`;

function App() {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
}

🌐 مشاهده داکیومنت Styled Components

اگر دوست داشتی ری‌اکشن و شیر یادت نره 😉⚡

🚀 @coolycode

بررسی لایبرری React Hook Form 🚀

مدیریت فرم‌ها همیشه چالش‌های خاص خودش رو داشته، مخصوصاً وقتی بخوایم اعتبارسنجی انجام بدیم یا مقدار فیلدها رو کنترل کنیم.

لایبرری React Hook Form یه کتابخونه خیلی کم‌حجم و سریع برای مدیریت فرم‌ها در React هست که نیاز به کنترل دستی مقدار فیلدها رو از بین می‌بره و کار با فرم‌ها رو خیلی ساده‌تر می‌کنه.

ویژگی‌های کلیدی ✅

➊ بهینه و سریع

این لایبرری از Uncontrolled Components استفاده می‌کنه، یعنی مستقیماً به DOM متصل می‌شه و رندرهای غیرضروری رو کاهش می‌ده. این باعث می‌شه سرعت اپلیکیشن بیشتر بشه، مخصوصاً وقتی تعداد فیلدهای فرم زیاد باشه.

➋ اعتبارسنجی داخلی و انعطاف‌پذیر

از Validation داخلی پشتیبانی می‌کنه و می‌تونی با register فیلدها رو اعتبارسنجی کنی و همچنین از کتابخونه‌های Yup و Zod برای اعتبارسنجی پیشرفته پشتیبانی می‌کنه که واقعا خفن و حرفه ایه 👌

➌ مدیریت خیلی ساده خطاها

به سادگی می‌تونید از formState.errors برای گرفتن خطاهای فیلدها استفاده کنی و پیام خطا رو هر جوری که میخوای نمایش بدی.

➍ پشتیبانی خیلی خوب از فیلدهای سفارشی

اگر از Componentهای شخصی‌سازی‌شده مثل React Select استفاده کنی، Controller بهت کمک می‌کنه که راحت با اون‌ها به صورت ماژولار کار بکنی و هر نوع دیتایی که میخوای رو به صورت کاستوم هندل کنی.

این قابلیت به شدت خفن و جالبه و رسما شما میتونید دیتاهای پیچیده تر رو به سادگی به شکلی که میخواید هندل بکنید.

➎ سازگاری با Typescript

از TypeScript پشتیبانی خیلی خوبی داره و می‌تونید نوع داده‌های ورودی و خروجی فرم رو مشخص کنید و البته خیلی حرفه از از جنریک تایپ ها استفاده کنید.

📌 نتیجه‌گیری

در کل React Hook Form یه کتابخونه سبک، سریع و قدرتمند برای مدیریت فرم‌ها توی React هستش و اگه دنبال یه راهکار ساده و بهینه برای هندل کردن فرم‌ها هستی که هم سرعت بالایی داشته باشه و هم قابلیت اعتبارسنجی و کنترل فرم‌ها رو ساده کنه، این کتابخونه یکی از بهترین گزینه‌هاست!

#libarary #reactjs

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣