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

این سری از نوشته هام مشابه سری نکته های طلایی ری اکت نیتیو هست و قراره که نکته های ریز و درشت از ری اکت و جاواسکریپت رو بررسی کنم . اکثر این نکات برای توسعه دهندگان ری اکت نیتیو هم کاربردی است.

۲۰ - سایت های تک صفحه ای چیست ؟‌
منظور 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/nimamohamadian
https://www.facebook.com/nimamohamadian89
https://twitter.com/Nima_Mohamadian
https://www.linkedin.com/in/nima-mohamadian-57ba63123/