با ما باش قراره اتفاقای خوبی بیفته :)

#عمومی
♦️ یه نقشه راه بیسیک برای Front-end:

🔹 ۱. آشنایی با طرز کار وب و مرورگرها (۱ تا ۲ روز): مفاهیمی مثل HTTP/HTTPS یا DNS و Domain Names رو یاد بگیرید و آشنایی خلاصه از طرز کار اینترنت و مرورگرها داشته باشین.

🔹 ۲. راه‌اندازی فضای کار (۱ روز): ادیتورتون (معمولا VSCode) رو مشخص کنید، اکستنشن‌های پرکاربرد مثل Prettier، Live Server،Copilot و... رو نصب کنید و یه آشنایی مختصری در صورت امکان از ترمینال ادیتور داشته باشین.

🔹 ۳. آشنایی HTML + CSS (حدود ۱ ماه): این دو تا پایه اساسی هر وبسایتی هستن، HTML اسکلت سایت و CSS ویژگی‌های ظاهری اون رو مشخص می‌کنه. لازم نیست تو یک ماه همه‌چیز درباره CSS رو بدونین، همه این مراحل وقتی به مرحله‌های بعدی میرید یادگیریشون همچنان ادامه داره.

🔹 ۴. یادگیری JavaScript (۱ تا ۲ ماه): اصول تعامل کاربر با سایت وابسته به این زبانه. اگه قبلا برنامه‌نویسی کار نکردین حتما اصول پایه‌ای مثل متغیرها، فانکشن‌ها و ... رو خوب یاد بگیرید و بعدا سراغ ویژگی‌های جدیدتر(ES6+) برید. سعی کنید با پروزه عملی و تمرین در کنار آموزش یاد بگیرید.

🔹 ۵. آشنایی با Git و GitHub (۱ هفته): از گیت برای ذخیره‌سازی و ثبت تغییرات تو کدتون استفاده کنید. سعی کنید این مرحله رو حین یادگیری جاوااسکریپت و پروژه‌های تمرینیتون انجام بدین.

🔹 ۶. یادگیری کتابخونه‌ها وFramework ها (۱ تا ۲ ماه): اپشن‌های زیادی هست مثل Vue, Angular,Svelte، ولی برای شروع توصیه می‌شه اول React رو یاد بگیرید چون استانداردترین فریمورک/کتابخونه هست و یادگیریش نسبت به بقیه ساده‌تره، اما در نهایت انتخاب با خودتونه. علاوه بر این یادگیری کتابخونه‌های مثل Redux Toolkit و Framer Motion توصیه میشه.

❗️ جزئیات چیزایی که تو هر زبان یا کتابخونه باید بلد باشین تو عکسا آورده شده.


👨‍💻 @Weblify_Tutorials 🎨

#معرفی_ابزار
♦️ معرفی سایت: Calltoinspiration

🔹 حتما تا حالا شده موقع طراحی UI با کمبود ایده مواجه بشین. مثلا بخواین یه دکمه‌ یا یه فرم درست کنید ولی با خودتون بگید کاش برای طراحی ظاهریش یه ایده‌ی جدید داشتم ولی هرچی فکر می‌کنین ایده جدیدی به ذهنتون نمی‌رسه!

🔹 این وبسایت دقیقا به حل همین مشکل کمک می‌کنه، یعنی برای هرجور کامپوننت رابط کاربری که می‌خواین طراحی کنین بهتون ایده میده، و باعث میشه سریع‌تر، بهتر و خلاقانه‌تر کامپوننت‌هاتون رو طراحی کنید. برای طراحی:
▪️Form
▪️Alert
▪️Tab
▪️Dropdown
▪️Button

و... خیلی کامپوننت‌های دیگه میتونین از این سایت ایده بگیرین! مثلا دو تا عکسی که گذاشتم ایده برای فرم Log in هست.

❗️ پ.ن: برای ورود احتمالا طبق معمول باید از فیلترشکن استفاده کنید..


👨‍💻 @Weblify_Tutorials 🎨

لینک سایت:
Calltoinspiration.com


👨‍💻 @Weblify_Tutorials  🎨

#آموزشی
♦️ هوک use در ری‌اکت:

🔹 این هوک تقریبا جدیده، و تو ورژن ۱۹ ری‌اکت معرفی شده. از این هوک میتونین برای گرفتن مقادیر Context ها و Promise ها استفاده کنین.

🔹 این هوک سینتکس خیلی ساده‌ای داره:

const value = use(resource);

که بجای resource، نام Context یا Promise مد نظرتون رو مینویسین و مقدارشون به متغیر value برگردونده میشه.

🔹 خب مثلا چرا بجای useContext باید بخوایم از use استفاده کنیم؟ کاربرد این هوک برمیگرده به مهم‌ترین تفاوتش با هوک‌های دیگه داخل React: برخلاف هوک‌های عادی می‌تونیم از این هوک داخل بلوکهای if و else و شرطی هم استفاده کنیم!

🔹 دریافت Context با use:

  if (someCondition) {
    const theme = use(ThemeContext);
    return <button className={theme}>Click me</button>;
  }
  return <button>Default</button>;
}

دقت کنید که داخل بلوک if از use استفاده کردیم که با useContext قابل انجام نبود.

🔹 دریافت Promise با use: ولی مهم‌ترین کاربرد این هوک میتونه برای وقتی باشه که بخوایم عملیات ناهماهنگ انجام بدیم. مثلا برای دریافت اطلاعات از سرور:

// Server Component
export default function App() {
  const messagePromise = fetchMessage();
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <MessageComponent messagePromise={messagePromise} />
    </Suspense>
  );
}

// Client Component
function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  return <p>{message}</p>;
}

تو کد بالا کامپوننت اول رو برای فچ کردن اطلاعات از سرور ساختیم و دومی رو برای نشون دادن اطلاعات به کاربر.
تو این شرایط اسنفاده از ترکیب use و یک کامپوننت </Suspense> می‌تونه جایگزین خلاصه تری برای useEffect باشه. تا وقتی که Promise در حالت تعلیق هست، عبارت Loading... توسط کامپوننت Suspense نشون داده میشه، اما به محض انجام شدن Promise مقدار نهاییش با use دریافت و در message ذخیره میشه و میتونیم اونو به کاربر مشون بدیم.


👨‍💻 @Weblify_Tutorials  🎨