کداکسپلور | CodeExplore
7.87K subscribers
1.91K photos
278 videos
103 files
1.62K links
با کد اکسپلور یاد بگیر، لذت ببر و بروز باش ⚡️😉

سایت کد‌اکسپلور:
CodeExplore.ir
👨🏻‍💻 ارتباط با ما :
@CodeExploreSup
گروه :
@CodeExplore_Gap
تبلیغات در کد اکسپلور :
@CodeExploreAds
Download Telegram
30-days-of-react-ebook-fullstackio_[@programming_tips].pdf
12.2 MB
[معرفی کتاب] 📚
🔷 30 Days of
React
ری اکت در 30 روز


طبق ادعای این کتاب 304 صفحه‌ای، شما میتونید ری اکت رو توی 30 روز یاد بگیرین! حالا اگر نتونید یاد بگیرین هم قطعا میتونید تا حد زیادی با مفاهیمش آشنا بشین! پس اگر فرانت اند کار میکنید و دوست دارین ری اکت یاد بگیرین، این کتاب برای شروع خیلی مناسبه ❤️

#book #javascript #react

☕️ @CodeExplore
5👏2👎1
ReactJSNotesForProfessionals - @CodeExplore.pdf
1 MB
✏️ Stack Overflow Documentation

📝 110 page

#book #react
☕️ @CodeExplore
🔥62👎2
4 کتابخانه برای ساختن اپلیکیشن‌های قابل سفارشی سازی در React 🌀

1. Radix UI
2. React Aria
3. Base UI
4. Headless UI

توضیحات تکمیلی را در این لینک بخوانید.

#react #developer
〰️〰️〰️〰️〰️〰️〰️
☕️ @CodeExplore
8👎2
💡چرا باید از ری‌اکت استفاده کنیم؟!

🔹ری‌اکت (که به صورت React.js یا ReactJS نیز خوانده می‌شود)، یک کتابخانه متن‌باز جاوااسکریپت برای ساخت رابط‌های کاربری و اجزای(Component) صفحات وب است.

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

در مقاله زیر میخوانیم که چرا باید از React js استفاده کنیم...👇
+|برای مطالعه مقاله کلیک کنید|+

#react #js
☕️ @CodeExplore
❤‍🔥9👍2😁2
💢 هوک useMemo یکی از hook های مهم React هست که به بهبود عملکرد اپلیکیشن‌های React کمک می‌کنه. موقعی که قصد داریم یک مقدار رو بهینه سازی کنیم تا فقط زمانی محاسبه بشه که لازم باشه، useMemo عمل می‌کنه.

مثلاً وقتی یک مقدار به صورت محاسباتی تولید میشه و از اون به عنوان ورودی یک کامپوننت استفاده می‌شه. به جای اینکه هر بار که کامپوننت رندر می‌شه مجدداً این محاسبات انجام بشه، می‌تونیم از useMemo استفاده کنیم تا این مقدار رو یکبار محاسبه کنیم و سپس نتیجه رو ذخیره کنیم تا در زمان‌های بعدی استفاده بشه 😉

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

import React, { useMemo } from 'react';

const PostList = ({ posts }) => {
const sortedPosts = useMemo(() => {
return posts.sort((a, b) => a.date - b.date);
}, [posts]);

return (
<ul>
{sortedPosts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
};

export default PostList;
در این مثال، ما از useMemo برای مرتب سازی لیست پست ها بر اساس تاریخ استفاده کردیم. useMemo به ما کمک می‌کنه تا هر بار که posts تغییر می‌کنه، مقدار sortedPosts رو دوباره محاسبه کنیم.

با استفاده از useMemo می‌تونیم از بهینه سازی عملکرد کامپوننت‌های React خودمون بهره مند بشیم و استفاده نادرست از حافظه رو کاهش بدیم.

#پست_پیشنهادی
#javascript #react #usememo
☕️ @CodeExplore
❤‍🔥151🔥1
💢 هوک useCallback یکی از hook های مهم React هست که برای بهبود عملکرد و بهینه سازی مصرف حافظه استفاده می‌شه. وقتی یک کامپوننت در React رندر می‌شه، توابع دیگه همیشه مجدداً ایجاد می‌شن. اگه این توابع به عنوان props به کامپوننت های دیگه منتقل بشن، هر بار که کامپوننت والد رندر می‌شه، توابع ایجاد می‌شن. این ممکنه به تکثیر روندهای غیرضروری و هدر رفت حافظه منجر بشه.

اما اینجا useCallback به کمک میاد! وقتی از useCallback استفاده می‌کنیم، یک نمونه از یک تابع ایجاد می‌کنیم و این نمونه تابع تنها زمانی تغییر می‌کنه که ورودی‌هایش تغییر کنن. این به ما این امکان رو می‌ده که از ایجاد مجدد توابع بی‌مورد در هر بار رندر جلوگیری کنیم 😃

حالا یک مثال کاربردی ببینیم. فرض کنید یک کامپوننت داریم که یک دکمه رو ارائه می‌دهد و وقتی کاربر روی اون دکمه کلیک می‌کنه، یک پیام نمایش داده می‌شه. ما می‌توانیم از useCallback برای جلوگیری از ایجاد مجدد تابع handleClick هر بار که کامپوننت رندر می‌شود، استفاده کنیم.

import React, { useCallback, useState } from 'react';

const MessageComponent = () => {
const [message, setMessage] = useState('');

const handleClick = useCallback(() => {
setMessage('Hello, World!');
}, []);

return (
<div>
<button onClick={handleClick}>Show Message</button>
<p>{message}</p>
</div>
);
};

export default MessageComponent;
در اینجا، ما از useCallback استفاده کردیم تا تضمین کنیم که handleClick تنها زمانی تغییر می‌کنه که ورودی‌هاش تغییر کنند، یعنی در این حالت ورودی‌هی ندارد و همیشه همان تابع می‌ماند.

با استفاده از useCallback می‌توانیم بهبود عملکرد کامپوننت‌های React را ببینیم و مصرف حافظه را بهینه کنیم.

#پست_پیشنهادی
#javascript #react #usecallback
☕️ @CodeExplore
11🔥6❤‍🔥3
React Interview Book-@CodeExplore.pdf
8.5 MB
💙دوستان تو PDF شما می تونید سوالات مصاحبه ری‌اکت رو مشاهده کنید و خودتون رو واسه مصاحبه کنید(🔥)

#react
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
18🔥4❤‍🔥2
آیا وسط گذاشتن یک div براتون یک چالشه؟😅

آیا ابزاری ساختین که کل دنیا دارن ازش استفاده میکنند ، ولی توضیح دادن کاربرد اون سخته ؟

🔔 دوستان تو این ویدیو می‌خوام خودتون  مصاحبه فنی Dan Abramov رو ببینین تا یکم به خودتون امیدوار بشین🙂

👍 این دوستمون آقای Dan Abramov یکی از اعضای اصلی تیم ریکت (React) و سازنده ریداکس(Redux) هست.
توی این ویدئو، با یک فرد عادی مثل خودمون که برنامه نویس هست مصاحبه می‌کنه ، حالا ما اینجا هستیم که از چالش‌هایی که حرف میزنه که همه ی ما برنامه نویسان باهاش مواجه هستیم.

حتماً ویدیو زیر رو ببینید تا متوجه این موضوع بشید :

🖥 https://www.youtube.com/watch?v=XEt09iK8IXs

#react
☕️ @CodeExplore || </Sara>
Please open Telegram to view this post
VIEW IN TELEGRAM
12❤‍🔥2🔥2
دوستان شما با استفاده از لیست زیر می تونین به سوالات مصاحبه جاوااسکریپت و فریم ورک هاش می تونین دسترسی داشته باشید

JavaScript 👉
🌐 https://github.com/sudheerj/javascript-interview-questions

Vue 👉
🌐 https://github.com/sudheerj/vuejs-interview-questions

React 👉
🌐 https://github.com/sudheerj/reactjs-interview-questions

Angular 👉
🌐 https://github.com/sudheerj/angular-interview-questions

🔥🔥🔥🔥🔥🔥🔥🔥

البته دوستان می دونیم که ریکت فریم ورک نیست و کتابخونه هست ، ولی کلیت رو در نظر گرفتم و گفتم فریم ورک :)

#javascript #react #angular #vue #library #framework
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
11🔥4❤‍🔥1
کداکسپلور | CodeExplore
تو گیت هاب زیر می تونین یک لیست از کلی ابزار و اکستنشن و فریم‌ورک و...برای زبان جاوااسکریپت پیدا کنید و به نظرم خیلی می تونه براتون مفید باشه❤️ 🌐 https://github.com/sorrycc/awesome-javascript #javascript ☕️ @CodeExplore
😎 تو این قسمت می تونین به یک لیست از ابزار وفریم‌ ورک ، اکستنشن و ... برای ریکت پیدا کنید.

🌐 https://github.com/enaqx/awesome-react

🔥🔥🔥🔥🔥🔥🔥🔥

به نظرم باید همچین لیستی برای همه ی زبان های برنامه نویسی و فریم ورک هاش باشه ، سعی میکنم همچین سایتی یا آدرس گیت هابی رو اگه پیدا کردم حتما در اختیارتون قرار بدم 🔥

👍با کد اکسپلور یاد بگیر، لذت ببر و بروز باش👍

#react
☕️ @CodeExplore || </yasna>
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥92🔥1
😎 یک Cheat-sheet خفن برای برنامه نویس ریکت کار

🌐 https://dev.to/ericchapman/react-cheat-sheet-updated-may-2021-1mcd


پست مشابه به این موضوع رو می تونین مشاهده کنید :

💭 https://t.me/CodeExplore/445

#react #site
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
8🔥2❤‍🔥1
بینندگان عزیز، هم اکنون React 19 💪

بالاخره تیم توسعه React، نسخه 19 این Framework محشر و دارن اراِئه میدن ، اما بیاین باهم بررسی کنیم که چه مواردی به این Framework اضافه شده🔥




1⃣ کامپایلر React: بهینه‌سازی هسته

به گفته تیم توسعه React js ، "دیگه React Compiler یک پروژه تحقیقاتی نیست: و از قدرت این کامپایلر در حال حاضر در وب‌سایت instagram.com استفاده میشه و ما در حال کار بر روی استفاده این کامپایلر به سایر سطوح در Meta و آماده‌سازی اولین نسخه منبع باز هستیم"


🔢 کامپوننت های سمت سرور: آزاد کردن قدرت Server-Side Rendering

مشکلات بارگذاری اولیه کُند و مشکلات بهینه‌سازی برای موتورهای جستجو به لطف Server Component ها قابل حل هستن که یکی دیگه از برگه برنده های React محسوب میشود. تصور کنین یک صفحه اصلی خبری با مقالاتی که به طور مکرر به‌روزرسانی می‌شن. Render کردن این Component ها مستقیماً روی Server با استفاده از Server Component، اولین تاثیرات فوق‌العاده سریع را ارائه می‌ده و رتبه‌بندی موتورهای جستجو را افزایش میده.



🔢 اقدامات ( Actions ): Streamlining Data Flow and Optimistic Updates

پردازش ارسال فرم‌ها و دیگر تعاملات داده‌ای بین client و server ممکنه که یه کار پیچیده‌ای باشه. Action ها به عنوان یک API جدید که در React 19 معرفی شدند، این فرآیند را ساده‌تر می‌کند و با ارائه روشی یکپارچه و شناختی (intuitive) حالا منظور از شناختی چیه (یعنی که رفتار و عملکرد اون پیش‌بینی‌پذیر و سازگار هست و کاربران به راحتی می‌تونن از اون استفاده کنن بدون نیاز به دانش فنی عمیق).



🔢 هوک ها:

تعجب نکنین توی React 19 خبری از Hook جدیدی نیست، اما نگران نباشین یکسری از Hook های اصلی تغییر اساسی میکنن.

هوک های useMemo و useCallback: قابلیت‌های بهبود یافته برای Memoization دقیق‌تر، که ممکنه تعداد بیشتری از Renderهای غیرضروری را کاهش بده. تصور کنید یک Component list بزرگ که تنها موارد خاصی باید بر اساس تعامل کاربر مجدداً Render بشن.

هوک useEffect: کنترل بیشتری بر روی زمان اجرای effect ها، که اجازه میده مدیریت Side effect ها تمیزتر و کارآمدتری داشته باشیم. تصور کنید یک effect که داده‌ها را تنها زمانی که یک کامپوننت خاص mount می‌شه، دریافت می‌کنه.

هوک useImperativeHandle: استفاده بهینه‌تر برای ایجاد object های شبیه به ref در functional component ها. تصور کنید یک Carousel Component سفارشی که متدهایی را برای کنترل رفتار اون ارائه میده.


در آخر میشه گفت React 19 یک ارتقاء نیست، بلکه دروازه‌ای به تجربه توسعه‌ی Performance پویا و جذابه. از کامپایلر نوآورانه React تا یکپارچگی با اجزای وب، هر ویژگی به شما این امکان رو میده تا رابط‌های کاربری‌ رو ایجاد کنید که فوق العاده باشه.

#frontend #react
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
14🔥4❤‍🔥2
تو این پست یک مقایسه کامل از زبان‌های قالبی استفاده شده توسط React، Vue، Angular و Svelte رو داریم🤩

+ این تجزیه و تحلیل جالب قطعاً شما رو شگفت زده می‌کنه. (این پست رو از دست ندید)😎

🔵 🟠 🌲 🏤  Comparing JavaScript Frameworks: Templates

#react #angular #vue #svelte
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
12🔥5❤‍🔥3
🔵 ایجاد Navbar در React
تو سایت زیر نحوه ساخت نوبار در React رو از 0 تا 100 آموزش داده و نحوه ی پیاده سازیش رو کاملاً گفته.
👉 https://www.sitepoint.com/creating-a-navbar-in-react/

#react #navbar
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
7❤‍🔥3🔥3
برای شروع ریکت چه چیزهایی باید از جاوااسکریپت بلد باشم ؟🧐

1️⃣توابع جاوااسکریپت
2️⃣کلاس ها
3️⃣شرط‌های کوتاه با عملگرهای Ternary و && و ||
4️⃣متدهای کاربردی آرایه‌ها
5️⃣اعضای Rest و عملگر Speard
6️⃣ماژول‌های اکمااسکریپت
7️⃣پرامیس‌ها و Async/Await
8️⃣ترفندهای ابجکت
9️⃣Template Literals
1️⃣0️⃣Destructuring

#پست_پیشنهادی
#javascript #react
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
16🔥5💔3❤‍🔥2😁1
🔵 ارتقاء قدرت R با React: خلق ویجت‌های پویا و ورودی‌های پیشرفته Shiny با پکیج reactR

پکیج reactR امکان استفاده از کامپوننت‌های React در زبان برنامه نویسی R را فراهم می‌کند و به توسعه‌دهندگان اجازه می‌دهد تا ویجت‌های تعاملی و ورودی های پکیج Shiny بسازند. در این مقاله نحوه استفاده از این پکیج برای ارتقاء اپلیکیشن‌های Shiny و وب را از نصب تا پیاده‌سازی توضیح خواهیم داد.

🌐 برای مشاهده کامل مقاله کلیک کنید

#react #r #reactR #shinyapps
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥27🔥83
برنامه نویس فرانتی و انیمیشن نداری؟👀

🔸️ ببین چی آوردیم برات، مرجع انیمیشن‌های Lottie (فرمت JSON) برای استفاده توی وب، اپ‌های موبایل و React Native.

خروجی سبک و قابل اجرا با کتابخونه‌هایی مثل lottie-web، lottie-ios و lottie-android
پلاگین برای فیگما و افترافکت
ابزار ویرایش و تست آنلاین

👌 اگه دنبال انیمیشن‌های تمیز و بهینه برای فرانت‌اند یا موبایل می‌گردی، این سایت به کارت میاد:
🔗 https://lottiefiles.com/

#frontend #ui #json #react
☕️ Telegram | Website | Discord
6🔥5
💡اگر دنبال راهی ساده اما حرفه ای برای پیاده سازی انیمیشن های جذاب با React هستین کتابخونه Framer Motion یه ابزار OpenSource و به دلیل استفاده از Transform باعث اجرای روون و سریع انیمیشن ها میشه و با امکاناتی مثل درگ اند دراپ، gesture و animation sequences و hybrid engine یکی از بهترین انتخاب ها برای شماست.

🔗 لینک داکیومنت

#react #library #framer #motion
☕️Telegram | Website | Discord
5🔥3
با استفاده از سایت ReactBits میتونید به کامپوننت های انیمیشنی مختلف دسترسی داشته باشید. متن، کارت ها، بک گراند ها و کلی کامپوننت و دیزاین فوق العاده انیمیشنی رو میتونید بهش دسترسی داشته باشید و کد های هرکدوم رو هم بخواین در دسترستون هست همراه با پیش نمایش کامل🔥

توی پروژه هاتون ازشون استفاده و طرح های خفن بزنید بفرستید اینجا ببینیم😉

🔗 https://reactbits.dev/

ری اکشن و اشتراک گذاری فراموش نشه🧡

#animation #components #react
☕️Telegram | Website | Discord
❤‍🔥122🔥2