💻 #برنامه_نویسی ❓#روکسوکیو

مقایسه #انگولار و #ری_اکت مثل مقایسه سیب 🍎 با پرتقال 🍊 است!

چرا؟! چون ری اکت یک #کتابخانه ی جاوا اسکریپت و انگولار یک #فریم_ورک جاوا اسکریپت است!

🔺 اگر به دنبال یادگیری ساده تر هستید، ری اکت را انتخاب کنید.
🔺 اگر دنبال اجرای پروژه ها در مقیاس بزرگ هستید، انگولار را انتخاب کنید.

این مقایسه جذاب بین انگولار و ری اکت را اینجا بخوانید:

👉 www.roxo.ir/4989

🆔 @roxo_ir

💻 #برنامه_نویسی

مژده برای عزیزانی که منتظر دوره #ری_اکت بودند.

🌀 دوره آموزش مقدماتی تا پیشرفته ری اکت به همراه پروژه ساخت فروشگاه سفارش آنلاین غذا بر روی سایت قرار گرفت.

خرید و شرکت در دوره از طریق لینک زیر:

👉 https://www.roxo.ir/home/videos/react-redux-learning-course

🌡 کتابخانه بسیار محبوب و جاوا اسکریپتی React در چند سال اخیر سر و صدای زیادی به پا کرده است. از طرفی اکثر کسب و کارهای امروزی و جدید در حال حرکت به سمت React هستند و خود به خود این سوال را در ذهن ما ایجاد می کنند: «آیا انگولار به روزهای پایانی خود رسیده است؟»

اگر مشتاقِ شنیدنِ یک پاسخ قانع کننده به این سوال هستید، مطلب زیر را بخوانید:

👉 www.roxo.ir/go/m2bc6

💻 #برنامه_نویسی #ری_اکت #انگولار

🆔 @roxo_ir

📱برای طراحی رابط کاربری (UI)، ری اکت بهتر است یا ویو؟


💙 باید از React استفاده کنید اگر:

1- میخواهید تکنولوژی مورد استفاده شما توسط یک کمپانی بسیار بزرگ پشتیبانی شود.
2- می خواهید برنامه تان را به شکل دلخواه خود بسازید.
3- می خواهید برنامه تلفن هوشمند نیز بسازید.
4- به دنبال یک اکوسیستم مناسب هستید.
5- عاشق کار با جاوا اسکریپت هستید.

💚 باید از Vue استفاده کنید اگر:

1- به دنبال تکنولوژی بسیار کم حجم و در عین حال قدرتمند هستید.
2- از کار با قالبها لذت می‌برید.
3- به دنبال راه اندازی ساده و کدهای دوست داشتنی هستید.
4- به دنبال راحتی در یادگیری هستید.

📃 با خواندن مقاله زیر بهتر می توانید تصمیم بگیرید کدام فریم ورک را انتخاب کنید:

👉 www.roxo.ir/hntyq

💻 #برنامه_نویسی #ری_اکت #ویو_جی_اس #UI

🆔 @roxo_ir

📍 سایت‌های مهم ری‌اکتی

💻 #برنامه_نویسی #ری_اکت

🆔 @roxo_ir

💫 ۶ وب‌سایت مشهور که با #ری_اکت ساخته شده‌اند

💻 #برنامه_نویسی


🆔 @roxo_ir

⛔️ اشتباهات رایج در هنگام کار با React:

۱. تعداد کامپوننت ناکافی
۲. ویرایش مستقیم state
۳. پاس دادن اعداد به شکل رشته
۴. عدم استفاده از key در کامپوننت های لیست
۵. فراموش کردن ناهمگامی setState
۶. استفاده بیش از حد از Redux
۷. استفاده از God component ها
۸. نداشتن ساختار برای پوشه ها
۹. عدم استفاده از حروف بزرگ در نام کامپوننت
۱۰. نوشتن منطق کاری درون کامپوننت ها
۱۱. عدم استفاده از مسیرهای مطلق
۱۲. ننوشتن unit test
۱۳. عدم استفاده از react dev tool



📃 توضیحات بیشتر درباره‌ی هرکدام از این اشتباهات را در لینک زیر بخوانید:

👉 https://www.roxo.ir/top-10-mistakes-to-avoid-when-using-react



💻 #برنامه_نویسی #ری_اکت


🆔 @roxo_ir

بهترین کتابخانه‌های ری اکت

اگر در فضای وب کار کرده باشید حتما نام کتابخانه react را شنیده اید. این کتابخانه یکی از بزرگترین کتابخانه‌های توسعه front-end است و به شما اجازه می‌دهد صفحات خود را با استفاده از جاوا اسکریپت (به جای HTML) بسازید. معمولا کاربرد اصلی استفاده از react ساخت وب سایت‌های SPA یا Single Page Application است.

معروف‌ترین و بهترین کتابخانه‌های ری اکت عبارتند از:

1. React Query
2. Ant Design
3. Zustand
4. React Bootstrap
5. Material UI
6. React Hook Form
7. Rebass
8. React Router
9. Semantic UI React
10. Redux
11. React Responsive
12. Chakra UI
13. Grommet
14. Fluent UI
15. Evergreen UI
16. SWR
17. Styled Components
18. Enzyme
19. React Virtualized
20. React DnD
21. React Intl


📃 مقاله‌ی بررسی این کتابخانه‌ها را از دست ندهید:

👉 https://www.roxo.ir/react-top-libraries-to-use


💻 #برنامه_نویسی #ری_اکت

🆔 @roxo_ir

🟡‌ اگر به وب‌سایت Next.js بروید می‌بینید که جمله‌ی بزرگی در آن نوشته شده است:

The React Framework for Production

این جمله به معنی این است که next یک فریم‌ورک react برای مرحله بهره‌برداری (production) است. می‌توان این جمله را به صورت fullstack frarmework for react نیز نوشت، یعنی یک فریم ورک fullstack (شامل backend و frontend) برای کتابخانه react!

🟡 اگر از این جملات فنی دور شویم، می.توانیم next.js را به زبان ساده تعریف کنیم: فریم‌ورکی که از react استفاده می‌کند و تمام برنامه شما (سمت سرور و سمت کلاینت) را برایتان می‌سازد. این فریم‌ورک قابلیت‌های بسیار بیشتری را نسبت به react به شما می‌دهد و در واقع react را توسعه می‌دهد. توجه داشته باشید که در next.js هنوز هم کد react می‌نویسیم اما همانطور که گفتیم قابلیت‌های آن بسیار زیاد و قوی شده است و برای هر مسئله کوچکی نیاز به استفاده از کتابخانه‌های خارجی ندارید.


📃 در این مقاله بطور مفصل با Next.js و کاربردهای آن آشنا می‌شوید:

👉 https://www.roxo.ir/what-is-next-js


💻 #برنامه_نویسی #ری_اکت

🆔 @roxo_ir

🎑 ساخت برنامه هواشناسی با React.js و CSS ساده

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

این مقاله برای افراد مبتدی در نظر گرفته نشده است اما تا حد ممکن مباحث ساده نیز توضیح داده شده‌اند و حتی اگر مبتدی باشید می‌توانید از مطالب این جلسه استفاده کنید. در عین حال برای مطالعه این مقاله باید با مباحث ساده CSS و جاوا اسکریپت آشنا باشید.

👉 https://www.roxo.ir/how-to-build-a-weather-application-with-react-js-and-css



💻 #برنامه_نویسی #ری_اکت

🆔 @roxo_ir

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

📃 می‌خواهیم در این مقاله به صورت خلاصه این موضوع را بررسی کنیم تا شروعی برای مطالعات شما باشد:

👉 https://www.roxo.ir/determine-correct-react-types-in-typescript


💻 #برنامه_نویسی #ری_اکت #تایپ_اسکریپت


🆔 @roxo_ir

در انتهای سال ۲۰۲۰ نسخه ۱۷ از کتابخانه‌ی react منتشر شد که به غیر از موارد جزئی، ویژگی‌های جدیدی نداشت بلکه هدف اصلی آن ارتقاء و بهبود ویژگی‌های react در آن زمان و هموار کردن راه برای به‌روزرسانی‌های بعدی بود. در ماه ژوئن امسال تیم توسعه‌ی react یک پست را در وبلاگ خودشان منتشر کردند که نسخه‌ی ۱۸ از کتابخانه‌ی react را معرفی می‌کرد. در حال حاضر هنوز نسخه‌ی ۱۸ به طور رسمی منتشر نشده است اما نسخه‌ی آلفای آن در دسترس است. این به‌روزرسانی برخلاف نسخه‌ی ۱۷ شامل قابلیت‌های زیادی است.


📃 در این مقاله ویژگی‌های نسخه جدید ری‌اکت را بررسی خواهیم کرد:

👉 https://www.roxo.ir/react-18-is-out


💻 #برنامه_نویسی #ری_اکت

🆔 @roxo_ir

هوک‌های react در نسخه 16.8 معرفی شدند و قابلیت‌هایی را به ما دادند که قبل از آن فقط در کامپوننت‌های کلاس محور در دسترس بودند.

هوک‌ها به شما اجازه می‌دهند کدهای کمتری بنویسید که به نوع خود باعث می‌شود حجم نهایی کدها کمتر شده و طبیعتاً سرعت برنامه شما افزایش پیدا کند. هر هوک یک تابع ساده است که با کلمه use شروع می‌شود و یک یا چند داده یا متد را به شما می‌دهد.

در مقاله زیر با انواع این هوک‌ها آشنا می‌شوید:

• useRef
• useState
• useReducer
• useEffect
• useCallback
• useMemo
• useContext

پس‌ازاینکه با این هوک‌ها آشنا شدیم نگاهی به نحوه نوشتن هوک‌های شخصی نیز می‌اندازیم.


👉 https://www.roxo.ir/react-hooks-2


💻 #برنامه_نویسی #ری_اکت

🆔 @roxo_ir

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


📃 آموزش ساخت بازی دوز با ری‌اکت (پیش‌نیازها: تسلط به جاوااسکریپت و آشنایی با هوک‌های ری‌اکت):

👉 https://www.roxo.ir/how-to-make-tic-tac-toe-game-with-react


💻 #برنامه_نویسی #ری_اکت

🆔 @roxo_ir

کاربرد ES6 در React

بسیاری از فریم‌ورک‌های جاوااسکریپت از ویژگی‌های ES6 استفاده می‌کنند. بنابراین برای کمک به شما در یادگیری این ویژگی‌ها، آن‌ها را به شما معرفی می‌کنیم و سپس به شما نشان می‌دهیم که چگونه آن‌ها را درReact.js به‌کار ببرید.

ویژگی‌های ES6 و که در این مقاله به آن‌ها خواهیم پرداخت، عبارتند از:

🔰 ماژول‌ها (Modules)
🔰 ساختارشکنی (Destructuring)
🔰 عملگر گسترش (spread)
🔰 توابع پیکانی (Arrow Functions)
🔰 حروف الگو (Template Literals)


👉 https://www.roxo.ir/how-to-use-es6-in-react



💻 #برنامه_نویسی #ری_اکت

🆔 @roxo_ir

نقشه راه یادگیری React در 2022

ری‌اکت یا React یک کتابخانه رابط کاربری مبتنی بر جاوا اسکریپت منبع باز است. امروزه در جوامع توسعه وب بسیار محبوب است. React Native در بین توسعه‌دهندگان اپلیکیشن موبایل به همان اندازه محبوب است.

در این مقاله نقشه راه کاملی برای یادگیری ReactJS خواهیم دید. اگر به فکر راه‌اندازی ReactJS هستید و به دنبال یک رویکرد گام‌به‌گام هستید، این مقاله برای شما مناسب است. هم‌چنین، اگر توسعه‌دهنده ReactJS هستید و می‌خواهید بدانید برای تکمیل دانش خود به چه موضوعات پیشرفته‌ای نیاز دارید، این مقاله را بخوانید:

👉https://www.roxo.ir/learn-reactjs-complete-roadmap



💻 #برنامه_نویسی #ری_اکت


🆔 @roxo_ir

ساخت برنامه جستجوی تصویر در React با استفاده از Unsplash API

سایت Unsplash سایتی است که می توانید تصاویر رایگان را دانلود کرده و به دلخواه از آن ها استفاده کنید. در این آموزش، ما با استفاده از Unsplash API یک برنامه جستجوی تصویر می سازیم تا به تصاویر آن دسترسی داشته باشیم و هم چنین آن ها را دانلود کنیم.

این پروژه برای مبتدیان است، اما هر کسی که می‌خواهد مهارت‌های خود را تقویت کند، می‌تواند آن را بخواند. در این آموزش موضوع های زیر را یاد خواهید گرفت:

📍نحوه دریافت API Endpoint و کلیدهای دسترسی از داشبورد برنامه‌نویسی Unsplash
📍نحوه استفاده از هوک های useState و useEffect برای واکشی داده ها
📍نحوه استفاده از تابع map برای نمایش تصاویر یا هر داده دیگری


👉 https://www.roxo.ir/how-to-make-an-image-search-app-in-react-using-the-unsplash-api


💻 #برنامه_نویسی #ری_اکت



🆔 @roxo_ir

چگونه با React ،Redux و Redux Saga یک بازی مار بسازیم؟

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

این مقاله تمام مهارت‌ها و مراحل لازم برای ایجاد بازی Snake خود را از ابتدا در اختیار شما قرار می‌دهد. ابتدا ساختار کد و منطق آن‌ها را بررسی خواهیم کرد. سپس توضیح خواهم داد که وقتی همه کدها در کنار هم قرار می‌گیرند و به‌نوعی متصل می‌شوند چگونه کار می‌کنند.


👉 https://www.roxo.ir/build-a-snake-game-with-react



💻 #برنامه_نویسی #ری_اکت


🆔 @roxo_ir