ری اکت رو قورت بده - ۳

این سری از نوشته هام مشابه سری نکته های طلایی ری اکت نیتیو هست و قراره که نکته های ریز و درشت از ری اکت و جاواسکریپت رو بررسی کنم . اکثر این نکات برای توسعه دهندگان ری اکت نیتیو هم کاربردی است. ری اکت رو قورت بده ۲۰ - سایت های تک صفحه ای چیست ؟‌ منظور single page application و یا به اختصار SPA ، سایت هایی نیستند که الان مد شده و به صورت یک صفحه ای همه چیز رو به کاربر نشون میده . منظور فرآیند مهم request به سرور و دریافت اطلاعات از سمت سرور به کلاینت ما هست. تو سایت های معمولی که SPA نیستند وقتی تغییری توی سایت اتفاق می افته یک request به server ارسال میشه و هر دفعه یک اطلاعاتی از سمت سرور به کلاینت ارسال میشه و توسط مرورگر خونده میشه (معمولا یک HTML جدید هست ). ولی وقتی بحث SPA هست دیگه این خبرا نیست. رسالت react ساخت صفحه های SPA هست که هر دفعه یک HTML جدید از طرف سرور نمیگیریم و فقط قسمت هایی که لازم هست تغییر کنند رو دریافت میکنیم.‌ این فرآیند باعث میشه سرعت لود سایت در حالت هایی که توسط کاربر تغییر میکنه به سرعت بالاتر بره و کاربر اصلا متوجه Refresh شدن صفحه نمیشه !۲۱ - چند کلمه از REST API سروری که REST هست یعنی از یک سری قواعد پیروی میکنه که همه جا یکسانه این قواعد. مثلا اگه این آدرس رو کسی ببینه (و بهش گفته باشیم که REST API هست) متوجه میشه که چی به چی هست . درواقع یک استانداردی برای نوشتن کد های سمت سرور هست در بخش request هست.localhost:5000/api/{resource}‌/2مثلا این resource میتونه user و یا کامنت باشه و ... و عددی که بعدش قرار گرفته مثلا کاربر شماره ۲ هست.گرفتن اطلاعات از سمت سرور getو فرستادن اطلاعات به سرور post این دستورات مشهور REST API هست. برای کار با این دستورات باید از متد fetch استفاده کنیم.برای مثال روش get به این صورت هست که:fetch('https://reqres.in/api/users') .then(res=>res.json()) .then(res=>console.log(res))همه این هارو گفتم که به این نکته اشاره کنم: متد fetch به صورت Async هست یعنی اینکه غیر همزمان کار میکنه . این لازمه fetch هست چون دسترسی به اینترنت و فرستادن درخواست و گرفتن اطلاعات ممکنه با تاخیر همراه باشه و یا اینکه وقتی پکتی داره میاد به صورت چند قسمتی باشه و همه اطالاعات در یک لحظه به دست ما نرسه . پس فلسفه وجودی fetch به صورت غیر همزمان کار کردن اون هست.۲۲- چند نکته از ‌Babelاستفاده از babel امری کاملا عادی است که به صورت پیش فرض همراه با create-react-app نصب میشه و نیاز به config دستی ما نداره اما درصورتی که از این روش استفاده نمیکنیم باید به صورت دستی خودمون این پکیج رو نصب کنیم:// install with npm npm install -g @babel/index.js @babel/cli // install with yarn yarn add @babel/index.js @babel/cliبعد از نصب babel نمیتونیم مستقیم از دستور خودش تو ترمینال استفاده کنیم ( حتی با اینکه cli هست)برای حل این موضوع از دستور npx استفاده میکنیم:npx babel oldFile.js -o dist/newFile.jsاین خط کدی که نوشتیم oldFile.js رو میگیره و در پوشه dist یک فایل newFile.js میسازه (توسط babel)در صورتی که در انتهای این کد از minified--استفاده کینم ، در هنگام ترجمه کار خلاصه سازی کد ها هم انجام میشه (حتی قسمت های اضافی مثل space هم حذف میشه)حالت Watch:همچنین اگر از پرچم w- هم استفاده کنیم فایل ما به صورت live عوض میشه (‌یعنی اگه فایلی رو عوض کنیم در جا فایل جدیدی ساخته میشه) تنظیمات babel برای اینکه درست و به دلخواه ما کار کنه یکم زیاد هست و بهتره که از گوگل استفاده کنیم. با وجود این یک توضیحات مختصری ازش ارائه میکنم:خود Babel چیزی رو عوض نمیکنه و باید پلاگینی براش نصب کنیم. یک پلاگین جامعی که حتی کدهای قدیمی رو هم بفهمه و تبدیلش کنه! به این میگن preset که خودش ورژن های مختلفی داره و به اسم preset-env هست. برای دیدن همه تنظیمات موجود میتونید به این صفحه مراجعه کنید.مثلا به این config دقت کنید:{"preset" : [ [ "@babel/preset-env", { "target" : { "chrome":"48", "IE":"8" }}]]}بهش گفتیم طوری ترجمه هارو انجام بده که مرورگرهای chrome & IE با ورژن های مشخص شده هم کد ترجمه شده رو بفهمند.درصورتی که ما از target استفاده نکنیم یک مقدار default بهش اختصاص پیدا میکنه (توی Doc خود babel هستش).نکته مهم اینکه babel وارد برنامه اصلی که Build میکنیم نمیشه پس روی سرعت و کارایی کد ما تاثیری ندراه نداره!و به عنوان آخرین نکته از این بخش:مرورگرهای موجود هیچی از type نمیفهمند و این babel هست که زحمتش رو میکشه.نکات مربوط به Babel خیلی بیشتر از این چیزهایی هست که اینجا اشاره شد و من سعی کردم فقط مقدمه از این مسائل رو عنوان کنم.۲۳- یکی از کارای خوب Webpackماژول هایی که ما import میکنیم توسط وب پک خونده میشه و سپس توی package.json دنبالش میگرده و اگه اونجا چیزی پیدا نکرد توی پوشه node_module دنبالش میگرده و دیگه نیازی نیست که خودمون همه اسکریپت هارو بنویسیم .از ویژگی های خوب وب پک تبدیل less و به Sass به css است.یه نکته دیگه اینکه خود webpack به babel نیاز داره و زمان ساختن یک پروژه با create-react-app همه این ها نصب میشه . پس از create-react-app عزیز تشکر میکنیم که اینهمه کار مارو کمتر کرد.حتی جاواسکریپت import متوجه نمیشه و این هم از کارهای webpack هست.۲۴- فرق devDependencies و Dependencies در حین کد زدن ماژول هایی هستند که تا آخر همراه پروژه هستند و در هنگام Build کردن هم با پروژه باقی میمونه این ماژول ها در قسمت Dependencies ها هستن.ماژول هایی هستند که لازم نیست همراه با پروژه برای دیگران ارسال بشه مثل babel که برای ترجمه کدهای سمت خود ماست و کاربر سمت کلاینت بهش نیازی نداره ، این ماژول ها در قسمت devDependencies نصب میشند!۲۵ - تبدیل شی Object به String و برعکسمتد JSON که از متد های پیش ساخته خود JavaScript هست (نیازی به import کردن نداره و اصطلاحا first citizen هست) میتونه این کار رو برای ما انجام بده .این روش در ورودی یک string میگیره و اون رو تبدیل به شی object میکنهJSON.parse(a_string)این متد هم در ورودی یک object میگیره و اون رو تبدیل به string میکنهJSON.stringify(an_object)۲۶- باز کردن یک Object این کار که خیلی هم مرسوم هست و بهش میگن Object destructure یکی از پر مصرف ترین کدهای کاربردی در ری اکت هست.فرض کنید یه آبجکت مثل myself داریم:myself = {name: 'Nima', age:29, location: 'Terhran'}حالا برای استخراج این متغیر ها از توی این Object میتونیم به راحتی: const name = myself.nameو یا اینکه :const {name} = myselfاین روش فقط برای Object نیست و برای Array هم کاربرد داره که بهش Array Destructure میگیم.نکته مهمی که وجود داره اینه که توی آبجکت ها این چون هر مقداری یک اسم مشخص داره پس اگه بخواهیم چندین مقدار رو از یک Object بکشیم بیرون رعایت ترتیب اصلا مهم نیست:const {age, name} = myself // age = 29 // name = 'Nima'اما وقتی داریم از این روش برای Array استفاده میکنیم رعایت ترتیب کاملا مهم است.۲۷- یک تابع جمع ساده رو با ۳ روش میخوام بنویسم :function add( a ) { return function( b ) { return a + b } } const add = a => { return b => { a + b } };const a => b => a + bبه نظر شما کدوم یکی راحت تره ؟‌به نظر من arrow function خیلی ساده تر هست (تو قسمت های قبل توضیح دادم که هنوزم خیلی ها باهاش مشکل دارن و این کاملا طبیعی هست) ولی توصیه من برای کسایی که جدیدا دارن جاواسکریپت رو یاد میگیرن اینه که حتما از ES6 و بالاتر رو یاد بگیرند چون به زودی و درآینده نزدیک همه مجبور به استفاده از arrow functions هستند.کد آخری که دیدیم رو میشه به این روش توی برنامه استفاده کرد:console.log(add(4)(5))۲۸ - وقتی که فایلی ساخته میشه (یعنی صفحه ما در مرورگر ساخته بالا اومد) اگه به قسمت source از Developer Menu سر بزنید میبینید که ۲ تا فایل app.bundle.js و vendor.bundle.js در قسمت تگ div و id=root داریم.ولی این کد ها چی هستن ؟‌فایل app.bundle.js همه کد هایی که ما نوشتیم رو شامل میشه که البته با Babel ترجمه و minify شده و اگه بازش کنید میبینید که با کدهای اصلی ما کاملا متفاوت هست.و فایل vender.bundle.js که کدهای کانفیگ خود webpcak هست.خوشحال میشم که با نظراتتون به بهتر شدن این نوشته کمک کنید.همچنین میتونید سایر نوشته های من رو ببینید:سری ری اکت رو قورت بده: قسمت۱ قسمت۲سری نکات طلایی ری اکت نیتیو:‌ قسمت۱ قسمت۲ قسمت۳سری آموزش مقدماتی زبان دارت:‌ قسمت ۱Contact With me:https://t.me/nimamohamadianhttps://www.facebook.com/nimamohamadian89https://twitter.com/Nima_Mohamadianhttps://www.linkedin.com/in/nima-mohamadian-57ba63123/