ترکیب ری اکت به عنوان یکی از بهترین کتابخانه های سمت کاربر و وردپرس به عنوان یکی از کارآمدترین سیستم های مدیریت محتوا، می تواند برای شما دستاورد مهمی باشد. شما می تواند از وردپرس به عنوان هسته مرکزی وب سایت و پنل ادمین خود استفاده کنید و رابط کاربری وب سایت را با استفاده از ری اکت پیاده سازی کنید.ارتباط بین وردپرس و ری اکت از طریق API وردپرس یا همان wp-json ایجاد می شود و امکان طراحی رابط های کاربری اختصاصی برای وردپرس را به شما می‌دهد.در این فیلم آموزش پروژه محور ری اکت شما با موارد زیر آشنا می شوید:<ul><li>آشنایی با وردپرس و نصب آن بر روی لوکال هاست</li><li>آشنایی با بخش های مختلف پنل وردپرس<ul><li>آشنایی با wp-json</li><li>طراحی رابط کاربری با استفاده از react</li><li>توسعه کامپوننت های اصلی وب سایت</li><li>طراحی بخش بلاگ</li><li>طراحی بخش پست‌های وب سایت</li><li>کار با تگ‌های پست</li><li>کار با API تصاویر وردپرس</li><li>توسعه بخش جستجوی وب سایت</li></ul></li><li>کار با React Hooks</li><li>کار با React Router</li></ul>اگر با وردپرس آشنایی قبلی ندارید، نگران نباشید. در بخش های ابتدایی این آموزش قسمت های اساسی وردپرس آموزش داده شده است.ضمن اینکه مفاهیم جدید ری اکت نظیر Hook ها و کار با فانکشنال کامپوننت ها آموزش داده شده است.&nbsp;<a href="https://www.youtube.com/playlist?list=PL-0L7ugB_5nY6CdDUoLeN_CR0AUVp98S1">لینک دوره آموزشی ساخت وب سایت با استفاده از ری اکت و وردپرس</a>&nbsp;ضمنا تمامی سورس کد پروژه، در <a href="https://github.com/keikaavousi/react-wp-blog">گیتهاب</a> قرار داده شده است.

react-wp

دوره پروژه محور طراحی وب سایت با ری اکت و وردپرس

پلاگین پرطرف دار owl carousel قطعا یکی از افزونه هایی است که می توان گفت کمتر کسی است که با آن آشنایی نداشته باشد. روش استفاده از owl carousel در ری اکت به خاطر استفاده از window.jQuery در آن، کمی متفاوت تر از پلاگین هایی است که تا به اینجا مطرح کرده ام و مشابه آموزش <a href="https://mr-k.ir/%d9%86%d8%ad%d9%88%d9%87-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-jquery-%d8%af%d8%b1-react/">استفاده از جی کوئری در ری اکت</a> که پیش از این مشاده کرده بودید نیست.اما نگران نباشید! در این آموزش ویدئویی رایگان React می آموزید که چگونه owl carousel را به همان شکلی که قبلا از آن استفاده می کردید، در داخل اپلیکیشن ری اکتی خود داشته باشید.&nbsp;<a href="https://www.youtube.com/embed/v4JPhz2y7ms">لینک مشاهده ویدئوی نحوه استفاده از owl carousel در ری اکت</a>

استفاده از owl carousel در ری اکت

پلاگین های متنوعی برای کار با موزیک، فیلم و فایل های چند رسانه ای در ری اکت توسعه داده شده است. اما یکی از بهترین این پلاگین ها، <a href="https://www.npmjs.com/package/react-jinke-music-player">react jinke music player</a> است. این پلاگین بسیار ساده و کاربردی می باشد و امکانات متنوعی را در اختیار شما قرار می دهد. به نحوی که می توانید با استفاده از آن یک وب اپلیکیشن حرفه ای موسیقی پیاده سازی نمایید. در این ویدئو تلاش شده است که به زبان ساده طریقه استفاده از این پلاگین موسیقی در ری اکت به صورت رایگان آموزش داده شود.&nbsp;<a href="https://www.youtube.com/embed/hK8aDSebAEA">لینک مشاهده ویدئوی استفاده از موزیک پلیر حرفه ای در ری اکت</a>

موزیک پلیر حرفه ای ری اکت

برای carousel تصویر در ری اکت پلاگین های متعدد و متنوعی توسعه داده شده است و شاید گاهی نیازی نباشد برای کارهای عمومی چنین پلاگین هایی را از صفر تا صد نوشت. به همین منظور در این پست و ویدئوی آموزشی ری اکت، قصد معرفی یک پلاگین carousel ریپسانسیو دارم که به سادگی و به دور از پیچیدگی امکان ایجاد یک اسلایدر تصویر متحرک را در اپلیکیشن React شما می دهد.<a href="https://www.aparat.com/video/video/embed/videohash/wc3rm/vt/frame">لینک مشاهده ویدئوی ساخت گالری تصاویر متحرک در ری اکت (آپارات)</a><a href="https://www.youtube.com/embed/CC1pDNKQCBs">لینک مشاهده ویدئوی ساخت گالری تصاویر متحرک در ری اکت (یوتیوب)</a>

گالری تصاویر متحرک در ری اکت

جی کوئری و ری اکت دو کتابخانه پر طرفدار جاواسکریپت اما متفاوت با یکدیگر هستند. جی‌کوئری به صورت Real DOM عمل می کند ولی ری اکت به صورت Virtual DOM المان های صفحه را ایجاد و تغییر می‌دهد. از این رو گاهی استفاده هم زمان این دو در کنار هم موجب conflict در ری اکت می شود و عملا توصیه نمی‌شود.اما اگر واقعا نیاز به جی‌کوئری در یک پروژه ری اکتی دارید، این کار غیر ممکن نیست. با استفاده از این آموزش ویدئویی می توانید به سادگی jQuery را به پروژه React خود اضافه کنید&nbsp;<a href="https://www.aparat.com/video/video/embed/videohash/HkszW/vt/frame">لینک مشاهده ویدئو نحوه استفاده از جی کوئری در ری اکت (آپارات)</a><a href="https://www.youtube.com/embed/CK8aoyTOD8A">لینک مشاهده ویدئو نحوه استفاده از جی کوئری در ری اکت (یوتیوب)</a>

نحوه استفاده از jquery در react

نحوه استفاده از jQuery در React

بوت استرپ به عنوان یکی از اجزای جدایی ناپذیر در وب، در ری اکت نیز همانند صفحات استاتیک html قابل استفاده است. برای استفاده از bootstrap در react ، نیازمند نصب از طریق npm و افزودن style به صفحه و البته <a href="https://mr-k.ir/%d9%86%d8%ad%d9%88%d9%87-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-%d8%ac%db%8c%e2%80%8c%da%a9%d9%88%d8%a6%d8%b1%db%8c-%d8%af%d8%b1-%d8%b1%db%8c-%d8%a7%da%a9%d8%aa/">افزودن jquery به پروژه ری اکت</a> و همچنین popper.js و فایل js بوت استرپ است.با استفاده از فیلم آموزشی رایگان زیر اضافه کردن بوت استرپ به پروژه react را به سادگی فرا بگیرید.&nbsp;<a href="https://www.aparat.com/video/video/embed/videohash/1DGRt/vt/frame">مشاهده ویدئو نحوه استفاده از بوت استپ۴ در ری اکت(آپارات)</a><a href="https://www.youtube.com/embed/tehR4xCJm50">مشاهده ویدئو نحوه استفاده از بوت استپ۴ در ری اکت(یوتیوب)</a>

نحوه استفاده از بوت استرپ در ری اکت

نحوه استفاده از بوت استرپ۴ در ری اکت

همان طور که می‌دانید <a href="https://sass-lang.com/">sass</a> یک پیش پردازنده css برای بهینه سازی استایل های نوشته شده و مدیریت ساده تر کدهای css است. با استفاده از sass شما می توانید قدرت بیشتری به css بدهید و استایل های متنوع تری را به صورت ساده تر بنویسید. sass توسط کمپانی ها و استارتاپ های بزرگی استفاده می شود و یکی از رایج ترین و بهترین پیش پردازنده های css موجود می باشد. در داخل کشور هم بسیاری از استارتاپ ها و پروژه های بزرگ با این پیش پردازنده نوشته شده اند و در بسیاری از مصاحبه های استخدامی، دانستن آن شرط مهمی برای پذیرش شما به حساب می آید.با استفاده از sass شما می توانید از ویژگی هایی نظیر متغیرها، توابع، محاسبات و ... در داخل استایل های خود استفاده کنید که بسیاری از این موارد در یک css عادی قابل استفاده نیست.نکته مهم دیگر اینکه مرورگر css نهایی را اجرا می کند و در واقع فایل نهایی که مرورگر رندر می کند فایل css خواهد بود و هر آنچه در sass نوشته می شود در نهایت به css تبدیل می شود.در این سری ویدئوهای آموزشی، آموزش رایگان sass به زبان ساده به همراه انجام پروژه ساخت گرید ریسپانسیو آموزش داده شده است. تمام تلاشم در این آموزش بر این بوده که مفاهیم بنیادین و پرکابرد sass بررسی و تمرین شود.منتظر نظرات و پیشنهادات شما در خصوص این سری ویدئوها هستم.علاوه بر مشاهده فیلم های آموزشی طراحی وب در وب سایت می توانید <a href="https://aparat.com/keikaavousi">کانال آپارات محمدرضا کیکاوسی</a> را دنبال کنید که در جریان جدیدترین ویدئوهای آپلود شده قرار بگیرید&nbsp;<a href="https://www.aparat.com/v/n8JmT">لینک مشاهده قسمت اول آموزش کاربردی sass</a><a href="https://www.aparat.com/v/z2PBV">لینک مشاهده قسمت دوم آموزش کاربردی sass</a><a href="https://www.aparat.com/v/S4MDP">لینک مشاهده قسمت سوم آموزش کاربردی sass</a><a href="https://www.aparat.com/v/vcmqx">لینک مشاهده قسمت چهارم آموزش کاربردی sass</a><a href="https://www.aparat.com/v/SWxbj">لینک مشاهده قسمت پنجم آموزش کاربردی sass</a><a href="https://www.aparat.com/v/7OTAn">لینک مشاهده قسمت ششم آموزش کاربردی sass</a><a href="https://www.aparat.com/v/LTdFS">لینک مشاهده قسمت هفتم آموزش کاربردی sass</a><a href="https://www.aparat.com/v/clfE0">لینک مشاهده قسمت هشتم آموزش کاربردی sass</a><a href="https://www.aparat.com/v/5tZfv">لینک مشاهده قسمت نهم آموزش کاربردی sass</a><a href="https://www.aparat.com/v/MwGZX">لینک مشاهده قسمت دهم آموزش کاربردی sass</a><a href="https://www.aparat.com/v/joDar">لینک مشاهده قسمت یازدهم آموزش کاربردی sass</a>

آموزش رایگان sass

فیلم آموزش sass

لیست انجام کار یا ToDo List در واقع فهرستی از کارهای روزانه فرد است که برای عدم فراموشی نوشته می شوند. ساخت یک ToDo List تحت هر زبان برنامه نویسی و با هر تکنولوژی این دید را به شما می دهد که بتوانید عملکردهای پایه آن بخش از زبان را پیاده سازی کنید. دلیل اصلی آن کار کردن با چهار عملیات اصلی برنامه نویسی یعنی CRUD است (create,read,update,delete). این چهار عملگر به ترتیب عملیات ذخیره سازی، نمایش داده ها، ویرایش و حذف داده هستند که در یک تودولیست وجود دارند. به همین خاطر سعی کنید بعد از یادگیری هر زبان در وهله اول چنین برنامه ای را پیاده سازی کنید.در این ویدئو آموزشی با ساخت یک وب اپلیکیشن ساده todolist با استفاده از آرایه های جاواسکریپت آشنا می شوید. هدف از این ویدئوی مقدماتی آشنایی با نحوه کار با آرایه هاست. سعی کنید به شیوه های مختلف آن را پیاده سازی نمایید.&nbsp;<a href="https://www.aparat.com/video/video/embed/videohash/kGVNe/vt/frame">لینک دانلود فیلم آموزش ساخت todolist با استفاده از جاواسکریپت</a>

آموزش جاواسکریپت

فیلم آموزش ساخت ToDo List با استفاده از جاواسکریپت

در این ویديو با استفاده از تکنیک ساده css می خواهیم رنگ نوشته را از حالت ساده تک رنگ به صورت تصویر texture و یا گرادیان رنگی در بیاوریم&nbsp;<a href="https://www.aparat.com/video/video/embed/videohash/lcIqT/vt/frame">لینک مشاهده ویدئو ساخت افکت texture با استفاده از css</a>&nbsp;