این هفته در React شماره 147: RSCs، Next.js، Remix، Error Boundary، JSX، Raycast، Spotify، Triplex، ReMDX، Astro، TypeScript…

سلام به همه!

این هفته، ما جشن می گیریم 10 سال React! 🥳️

در این 2 هفته اخیر چندین مقاله جالب وجود داشته است، به ویژه در رابطه با پیچیدگی معرفی اجزای سرور. دن آبراموف منابع جالبی در این زمینه منتشر کرده است. Remix و Redwood قصد خود را برای پشتیبانی از RSC ها اعلام کرده اند.

در سمت React-Native، اخیراً 3 کنفرانس برگزار شده است و لیست های پخش در YouTube در دسترس هستند. من لحظات خوبی را در React-Native-Connection سپری کردکنفرانس جدید React-Native در پاریس. با تشکر از همه کسانی که آمدند و این اولین نسخه را موفق کردند.

خبرنامه خیلی جالب است برنده جایزه منبع باز React شد در کنفرانس React Summit! با تشکر از همه کسانی که به من رای دادند، با توجه به نامزدهای دیگر انتظار نداشتم برنده شوم.

💡 برای دریافت ایمیل هر هفته در خبرنامه رسمی مشترک شوید!

💸 حامی

UI را شروع کنید [web] – شروع کننده رابط کاربری برنامه وب

ما شروع کننده برنامه وب UI رایگان و منبع باز یک راه سریع و آسان برای بوت استرپ پروژه بعدی شما ارائه می دهد. آن شامل بهترین شیوه ها و ابزارهای آماده تولید به شما کمک می کند تا فوراً شروع کنید و در زمان و تلاش شما در مرحله راه اندازی اولیه صرفه جویی کنید.

همراه با داخلی امکانات مانند 🔐 احراز هویت، 📱 چیدمان پاسخگو، 🧑‍💻 مدیریت کاربر، 🇫🇷 بین المللی سازی و پشتیبانی از راست به چپ، 🌚 حالت تاریک، 🎛 اجزای پیشرفته برای توسعه آسان. می توانید برنامه نمونه را امتحان کنید.

آماده استفاده با TypeScript، NextJS، رابط کاربری چاکرا، پرس و جوی TanStack، کتاب داستان و موارد دیگر.

🚀 رابط کاربری را شروع کنید [web] در GitHub

⚛️ واکنش نشان دهید

چرا کامپوننت های مشتری SSR به HTML می گیرند؟

توضیح تصویری کوتاه دن آبراموف در مورد تفاوت بین درخت مشتری (آنچه قبلاً می دانستیم) و درخت سرور (جدید). من این نمودار را جالب دیدم، زیرا ابهام‌زدایی آسان را رفع می‌کند: کامپوننت‌های مشتری در واقع همان چیزی است که ما به آن اجزای ساده React می‌گفتیم. در طول SSR، Client Component ها بر روی سرور اجرا می شوند، دقیقا مثل قبل

نحوه عملکرد Raycast API و برنامه های افزودنی

Raycast یک راه‌انداز قابل توسعه برای MacOS است، برنامه‌ای که به دلیل کیفیتش مشهور است. این مقاله مراحلی را که آنها برای پیاده سازی سیستم پلاگین خود طی کردند را توضیح می دهد. آنها نمی‌خواستند UX و DX را به خطر بیندازند: بدون WebView و Electron، امنیت خوب و امکان استفاده از بسته‌های npm. آن‌ها در نهایت تصمیم گرفتند یک رندر سفارشی React ایجاد کنند که در یک فرآیند Node جداگانه اجرا شود و نماهای بومی را با Swift از طریق یک پل JSON هدایت کند. خیلی شبیه React-Native است.

• 🥳️ جشن 10 سال React: ورسل با انتشار یک میزگرد ویدئویی درباره آخرین نوآوری‌های React، با اندرو، سباستین و دلبا، یک دهه React را جشن می‌گیرد.
• 👀 واکنش نشان دهید <Catch> API؟: پشتیبانی آتی برای Error Boundaries بدون جزء کلاس؟
• 👀 ریمیکس + RSC POC: ریمیکس در نهایت قصد دارد کامپوننت های سرور را پیاده سازی کند و یکی از دلایل آن را بیان می کند اینجا.
• 💬 React WG – RSC از ابتدا. بخش 1: اجزای سرور: دن آبراموف یک بررسی عمیق کامل در پیاده سازی اجزای سرور از ابتدا ارائه می دهد. قسمت 1 (از 3) در دسترس است و نحوه پیاده سازی سمت اجزای سرور را شرح می دهد.
• 📖 Next.js Docs Update – صفحه سازمان پروژه
• 📜 آیا React دارای لحظه Angular.js است؟: آیا ورود کامپوننت های سرور نشان دهنده یک تغییر پارادایم مشابه Angular.js در مقابل Angular 2 است؟ خیر، زیرا کامپوننت های سرور یک ویژگی جدید اختیاری هستند و بقیه React مانند قبل به کار خود ادامه می دهند. با این حال، این مقاله هشدار می دهد که ممکن است برای توصیه و پذیرش RSC ها کمی زود باشد و اکوسیستم کاملاً آماده نیست.
• 📜 یادداشت های نظرات در مورد اجزای React Server: مجموعه ای از یادداشت ها و بازتاب ها در RSC ها. منبعی جامع و مستند، با بسیاری از مراجع خارجی مرتبط.
• 📜 توسعه ایزومورفیک: افکار جالب در مورد پیچیدگی اجزای سرور. این خود اجزای سرور نیست که پیچیده است، بلکه ماهیت ترکیبی جدید پایگاه کد ما و مرزهای کمتر تعریف شده آن است.
• 📜 تکامل React APIها و استفاده مجدد از کد: الگوهای مختلف مورد استفاده در طول زمان و معاوضه‌های آنها (میکس‌ها، HOCs، رندر props، hooks، RSCs) را بررسی می‌کند.
• 📜 چرا پشتیبانی از Next Js را کنار می‌گذاریم: پلتفرم استقرار Stormkit از Next.js پشتیبانی نمی‌کند، که برای تیم کوچک آن‌ها بسیار پیچیده بود. در عوض، آنها پیشنهاد می کنند از یک الگوی React + Vite استفاده کنید که از SSR پشتیبانی می کند.
• 📜 یک مسیر یادگیری بهتر برای React با اجزای سرور: اگر RSCها واقعا یادگیری React را آسان‌تر می‌کردند چه می‌شد؟ من فکر می کنم منطقی است اگر دیدگاه جدیدی اتخاذ کنید.
• 📜 دوره بعدی RedwoodJS: All In on React Server Components: Tom Preston-Werner (خالق GitHub) اعلام کرد که چارچوب Redwood قصد دارد کامپوننت های React Server را پیاده سازی کند. تا به حال، Redwood یک SPA بدون SSR (محدود برای SEO) ایجاد می‌کرد و استفاده اجباری از GraphQL همیشه بهترین انتخاب نبود.
• 📜 حل خطاهای هیدراتاسیون در Remix: توصیه خوب در مورد اشکال زدایی خطاهای هیدراتاسیون React. این را می توان در چارچوب های دیگر نیز اعمال کرد.
• 📜 JSX.IntrinsicElements چیست؟: TypeScript از IntrinsicElements استفاده می کند تا بفهمد کدام عناصر JSX به صورت بومی پشتیبانی می شوند. این امکان وجود دارد که عناصر بومی خود را اعلام کنید، کاری که چارچوب هایی مانند React انجام می دهند.
• 📜 استقرار Next.js در لبه با SST: بازخورد مثبت در مورد استفاده از OpenNext و SST برای استقرار برنامه Next.js در AWS.
• 📜 Spotify – چند لایه انتزاع در سیستم‌های طراحی: Spotify توضیح می‌دهد که چگونه سیستم طراحی React آن‌ها 3 سطح انتزاع (پیکربندی، اسلات، سفارشی) را نشان می‌دهد.
• 📦 TypeScript 5.1: این نسخه TypeScript جدید برای React مهم است زیرا امکان تایپ بهتر JSX را برای React فراهم می کند و به یک کامپوننت اجازه می دهد تا یک Promise (مؤلفه سرور غیرهمگام)، رشته، آرایه، بولین … React typedef های جدید را قبلاً بازگرداند. بوده منتشر شده!
• 📦 Triplex – ویرایشگر بصری React Three Fiber
• 📦 useHooks.com v2.0 – مجموعه قلاب های ایمن SSR
• 📦 ReMDX – ارائه های زیبای مینیمالیست React & MDX
• 📦 Next-Typesafe-Url – مسیریابی کاملاً typesafe و zod معتبر برای Next.JS
• 📦 Redux Toolkit نسخه 2.0.0-beta.0
• 📦 Pastel v2.0 – چارچوبی شبیه به Next.js برای CLIهای ساخته شده با جوهر
• 📦 React Aria + React Spectrum – انتشار در 24 می 2023
• 📦 Astro v2.6 – میان افزار، ترکیبی SSR، دستورالعمل های مشتری سفارشی…
• 🔗 راهنما React
• 🎥 آیا اجزای سرور React واقعا کندتر هستند؟: معیاری که نشان می دهد مسیریاب صفحات از Next.js سریعتر از App Router است، اما تجربه کاربر با دومی به لطف پخش جریانی می تواند بهتر باشد.
• 🎥 چگونه اجزای سرور React خود را مسموم نکنیم: استفاده از server-only بسته برای جلوگیری از وارد کردن کد سرور به اجزای مشتری شما.
• 🎥 Remix Conf – React Core Panel Q&A

💸 حامی

گپ OpenAI + Nylas در هوش مصنوعی مولد: اکنون تماشا کنید!

آیا می خواهید نگاهی درونی به آینده هوش مصنوعی مولد داشته باشید؟ ایوان موریکاوا، مدیر مهندسی کاربردی در OpenAI، و کریستین اسپانگ، مدیر ارشد فناوری و یکی از بنیانگذاران نایلاس، به آینده‌ای برای هوش مصنوعی مولد می‌پردازند.

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

آیا می خواهید با تماس های ChatGPT + Email API در React شروع به ساختن کنید؟ در اینجا یک راهنمای برای شروع شما وجود دارد.

📱 React-Native

🧑‍💻 مشاغل

🧑‍💼 Passionfroot – مهندس ارشد تمام پشته (ریمیکس) – 160 هزار یورو +، برلین/ریموت

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

🧑‍💼 Callstack – Senior React Native Developer – کاملاً از راه دور، PLN 21-32k خالص در B2B، ماهانه

آیا می خواهید روی پرکاربردترین اپلیکیشن های دنیا کار کنید؟ آیا می خواهید فناوری React Native را به طور مشترک ایجاد کنید؟ به تیم Callstack از رهبران React & React Native بپیوندید. برای جزئیات بیشتر وب سایت ما را بررسی کنید. ما مشتاقانه منتظر دیدن درخواست شما هستیم – آنچه را که دارید به ما نشان دهید!

🧑‍💼 G2i – 100% Remote React Native Jobs

ما چندین نقش برای توسعه دهندگانی داریم که بر روی React Native متمرکز شده اند! پرداخت ~ 160 هزار به علاوه 10٪ پاداش است. شما باید تجربه تولید با RN داشته باشید و در ایالات متحده مستقر باشید. DM @gabe_g2i برای کسب اطلاعات بیشتر و ذکر این هفته در React را فراموش نکنید.

💡 چگونه پیشنهاد را منتشر کنیم؟

🔀 دیگر

🤭 سرگرمی

می بینمت! 👋