سلام. هیراد هستم. 😄
الان که این پیام میزارم 17 آذر 1400 هستش و منم یازدهمم،
از بچگیم به برنامه نویسی و اسکیت و تولید محتوا علاقه داشتم،
این کانال شخصیمه و اینجا میخوام علایق و تجربیاتم رو به اشتراک بزارم.

🆔 @Hiradsajde

❗️یک کنفرانس رسمی از سمت ری اکت که امشب ساعت 21 برگزار میشه. (به وقت ایران) برای ثبت نام از این لینک استفاده کنید
🆔 @Hiradsajde

یک ساعت دیگه کنفرانس شروع میشه. برای پیوستن 👇
https://discord.gg/reactconf
🆔 @Hiradsajde

Loading and data fetching :

Suspense component and fallback for loading
Code splitting with React.lazy
Streaming server rendering
Ssr support with streaming html in react 18 😁
Server components, you can use it with next js, is new future check website
Loading for ssr with suspense

New Api and Hooks :
useId
useSyncExternalStore

React Tools changes :
time line has been added

How to upgrade to 18 :
ReactDOM.render expired, use const server = ReactDOM.createRoot()
server.render()
npm i react ; npm i react-dom

JSX changes :
html comment syntax

❗️نکات خارج از کد،
ورژن 18 تداخلی با ورژن های قبلی ندارد
بیشتر تغییرات در سطح پایین و رندر کامپوننت هاست

وقتی چند بار ست استیت میکنیم توی کامپوننت یکبار ری رندر میشه و کل استیت ها تغییر میکنه (جمع میزنه تغییراتو یکجا اعمال میکنه)

سامانه ها :
codesandbox.io
برای نوشتن کد فرانت بدون خروج از محیط مرورگر
www.framer.com
ابزاری برای توسعه کامپوننت ها مثل فیگما و پیاده سازی انیمیشن (برای مثال انیمیشن های روتینگ)
nextra.vercel.app
داکیومنت کردن خودکار با روتینگ نکست
beta.reactjs.org
نسخه بتا داکیومنت جدید ری اکت
vitejs.dev
ابزاری برای ساخت بسته های نرم افزاری مشابه parcel و react و..

آپدیت های وابسته :‌
https://vercel.com/features/edge-functions

React is more than a library, React is paradigm for make user interfaces on every platform and devices

new react native architecture for next year

you can use ai and machine learning with react native

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

✅ امروز بعد ماه ها تلاش و گذشت چند هفته از انتشار نسخه beta نسخه 18 ری اکت به صورت استیبل در دسترس قرار میگیرد
#react #react_native
🆔 @hiradsajde

❗️تصویری که در کنفرانس از آپدیت بعدی react native نشون داد

🆔 @Hiradsajde

جمله طلایی کنفرانس . 😁
🆔 @Hiradsajde

هوش مصنوعی تشخیص اسم شی با ری اکت نیتیو
🆔 @Hiradsajde

❗️چند کامیونیتی بین المللی دیسکورد که به عنوان react developer حتما باید اونا رو داشته باشید
https://discord.gg/framer
https://discord.gg/NBAxZPArVY
https://discord.com/invite/gxvEWGU
https://discord.gg/reactconf
#exp #javanoscript
🆔 @Hiradsajde

#exercise #skate
🆔 @Hiradsajde

در next js ما چهار مدل pre-rendering داریم. در این مطلب قصد داشتم که بتونم این چهار تا رو به طور فشرده مطرح کنم

static site generation (ssg)

به طور پیشرض nextjs از این روش استفاده میکند. به این معنی است که فایل استاتیک رندر شده را ذخیره میکند و همان را برای کاربر بر میگرداند. این روش برای زمانی کاربردی است که ما نیاز به seo خوبی داریم ولی دیتا تماما استاتیک است و در حال تولید spa هستیم
برای استفاده از مقادیر داینامیک در ssg می توانیم از getStaticProps استفاده کنیم. اگر route ما داینامیک بود به getStaticPaths هم نیاز پیدا میکنیم

server side rendering (ssr)

این روش به این معنی است که با هربار درخواست nextjs یکبار سمت سرور صفحه را رندر کند و به کاربر نمایش دهد. برای زمانی که دیتا داینامیک داریم این روش کاربردی هست. برای استفاده از ssr می توانیم از getServerSideProps استفاده کنیم. پرفورمنس اپلیکیشن در این روش به طبع از ssg کمتر است

client side rendering (csr)

این روش زمانی مناسب است ما نیاز سئو خوب و محتوای داینامیک نداریم. برای مثال create-react-app بر مبنای client-side-rendering نوشته شده است، فقط میخواستم بهش اشاره کنم ولی pre rendering محسوب نمیشه

incremental static regeneration (isr)

همان ssg است فقط بازه زمانی ای را مشخص میکنیم که فایل های static را revalidate کنم و اطلاعات را بروز کند. به این شکل می توانیم به ترکیبی از ssr و ssg برسیم

من خودم به تازگی این موارد رو یاد گرفتم. خوشحال میشم اگر جایی اشتباه نوشتم یا کم نوشتم توی کامنت ها بگید. ممنون
#js #javanoscript #nextjs #tip
🆔 @Hiradsajde

🤔 مولتی پراسس چیست؟
فرض کنید میخوایم هزار صفحه رو crawl کنیم یا curl بزنیم بهشون، اگر هر crawl یک ثانیه طول بکشه، و ما بخوایم روی یک پروسه فرایند رو انجام بدیم یعنی هزار ثانیه باید صبر کنیم، اینجاست که مولتی پراسس به کمک ما میاد و میگه هر درخواست رو من در قالب یک پروسه میزنم و یکی یکی نتایج رو مجزا تحلیل میکنم، و به جای هزار ثانیه یک ثانیه صبر میکنیم. یک مثال ساده از مولتی پراسسینگ در php رو در تصویر زیر ببینید. همچنین تصاویر دیگه به درک بهتر مولتی پراسسینگ کمک میکنند
#tip #exp #php
🆔 @Hiradsajde