مثال کاملی از پیاده سازی یک برنامه وبی پایه بر React

A perfect React application on the cutting edge of technology

— مقدمه

افرادی که در حوزه وب فعالیت می‌کنن، به راحتی می‌تونن جستجو بزنن و خیلی از موارد مربوط به یک برنامه وبی پایه بر React رو ببینن و نمونه‌ پیاده سازی‌های اون رو داشته باشن، موارد و مفهوم‌های مثل:

  • پایش سمت سرور (Server Side Rendering)
  • استفاده از React Router
  • استفاده از CSS Modules
  • استفاده از PostCSS
  • تنظیمات Webpack
  • نوشتن Express
  • تنظیمات برای جداسازی محیط develop و محیط production
  • ابزارهای قوی برای Deploy برنامه‌های بزرگ
  • مقیاس پذیری یا همون Scale کردن برنامه‌ها
  • برنامه‌های تک صفحه‌ای (Single Page Application)
  • برنامه‌های پراگرسیو (Progressive Web Application)
  • و…

موارد زیاد هستن، و خیلی گیج کننده که گاهی همین زیادی تکنیک‌ها و تکنولوژی‌ها باعث میشه، این‌ها رو خوب کنار هم نگذاریم و چیز خوبی از آب در نیاد. یا اینکه کنار هم می‌گذاریم ولی چنگی به دل خودمون نمی‌زنه، یه چیز‌هایی رو توی سایت‌های شرکت‌های بزرگی مثل Pinterest یا Instagram یا Facebook و غیره، می‌بینیم که برامون سواله که این‌ها چطور عمل می‌کنند و چطور یک برنامه بزرگ React رو با تمام استاندارد‌ها پیکربندی می‌کنن و حجم عظیمی از برنامه نویس‌ها کنار هم بدون داشتن کوچکترین تداخلی کار می‌کنند.

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

در انتهای این مقاله شما یک ریپوی کامل دارید که می‌تونید یک برنامه React ی خوب و تمیز داشته باشید که شامل خیلی از تکنیک‌ها و تکنولوژی‌های روز و ترند هست. خروجی‌ شما خیلی خیلی شبیه کارهای خوب توی این حوزه خواهد بود و سعی کردم که همه گل‌ها رو یک جا جمع کنم. ولی این دلیلی بر این نیست که شما از اینی که هست نتونید بهترش کنید.

خز؛پن ! (خیلی زیاد؛پس نخون) : اگر فاقد حوصله هستین و دوست دارید نتیجه رو نگاه کنید ریپو رو ببینین و ازش استفاده کنید.

چیزی که من دلم می‌خواد اینه که اگر شما هم ایده یا نگرشی برای بهتر کردن این ریپو دارید، یه سر به Github بزنید، Fork کنید و کارتون رو Pull Request کنید. من و Andrew، کاملا استقبال می‌کنیم.

— می‌خوایم چی بسازیم؟

اگر یه چرخ بزنید برای دیدن مثال‌های پیاده سازی یک React App موارد زیادی پیدا می‌کنید که هر کدوم ویژگی‌هایی رو دارند، مثل SSR یا استفاده از React Helmet و خیلی چیزهای دیگه اما بیشتر اون‌ها برای اهداف develop نوشته و انتشار داده می‌شن، هیچ کدوم هر دو هدف develop و deploy صحیح رو دنبال نمی‌کنن و استانداردهای این دو محیط رو اصلا بیان نمی‌کنن.

من توی این مقاله می‌خوام هم محیط develop خوبی رو براتون شرح بدم که بدون خون ریزی و با سرعت زیاد کارتون رو انجام بدید هم محیط production رو با حداقل استانداردها داشته باشیم. باز هم تاکید می‌کنم این مقاله فوق العاده ساده هست و موارد زیادی رو من توش نیاوردم. که می‌تونید شما بیارید و در تکمیل این مقاله، مقاله بدید و کد‌ها رو هم به ریپوی اصلی Pull Request بدید و اینطوری باعث پیشرفتش بشید.

— ابزارها و تکنولوژی‌های مورد استفاده در این مقاله:

  • React
  • React router 4
  • React Helmet
  • CSS Modules
  • PostCSS
  • Webpack 3
  • Babel
  • Express
  • PM2

— نیازمندی‌ اولیه

در ابتدا شما باید Node نصب داشته باشید، ترجیحاً آخرین نسخه پایدار، که اگر ندارید از سایت نود دانلود و نصبش کنید.

— خوب حالا چیکار کنیم؟

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

خوب مثلا اسم فولدر اصلیمون رو می‌ذاریم react-example و بعد بسته به سیستم عاملتون با محیط کامندی وارد فولدر مربوطه بشید، برای ویندوزی‌ها cmd یا powershell هست و برای مک و لینوکس هم terminal ، من فرض می‌کنم که وارد شدید، حالا دستور زیر رو تایپ کنید:

 

این دستور در هنگام اجرا شدن چندتا سوال ازتون می‌پرسه که پاسخش رو بدید، نگران نباشید این سوال و جواب‌ها برای ساختن فایل package.json هست که به راحتی می‌تونید بعدا اصلاحش کنید، پس اصلا نگران نباشید. یک سری سوالاتش رو هم که حال نکردید اصلا جواب ندید و کلید اینتر رو بزنید که سریع‌تر از این مرحله خلاص بشیم.

خوب داره جالب میشه، من خودم خیلی ذوق دارم، حالا دستور زیر رو بزنید:

در واقع شما با دستور بالا دو dependency اصلی این مقاله رو نصب کردید، فولدری کنار فایل package.json ساخته میشه به نام node_modules که این dependency ها و الباقی موارد رو اونجا نگه می‌داره که شما خیلی تحویلشون نگیرید، فعلا توی اون مراحل نیستیم که به این موارد اهمیت بدیم. اون عدد‌ها هم نسخه‌هایی هست که من دارم باهاشون کار می‌کنم و تاکید می‌کنم شما هم از همین نسخه استفاده کنید، چون این موارد خیلی زود بروز می‌شن و اگر شما خیلی دیر این مقاله رو بخونید ممکنه نسخه‌های جدید مشکلاتی ایجاد که عملا این مقاله رو بدرد نخور می‌کنه، برای همین شما با نسخه‌ای که من وارد می‌کنم نصب کنید که اجرای موفقی رو داشته باشید و بعدش اگر دلتون خواست به نسخه‌های جدیدتر بروزرسانی کنید، این کار رو خودم کردم، Andrew زمانی که این استک رو نوشت داستانش فرق داشت، خیلی چیز‌ها رو نداشت و از نسخه‌های پایین‌تری استفاده می‌کرد. من وقتی که مقاله‌اش رو خوندم حس کردم یه سری چیز‌ها می‌تونه بروزتر بشه و همین کار رو هم کردم و با ویرایش‌های دیگه بهش PR دادم و این مثال خوب رو پیشرفت دادم.

میریم مرحله بعدی، خوب دستور زیر رو بزنید:

این‌ها هم dependency های این پروژه هستند منتهی برای محیط ساختن یا همون develop برای همینه که بعد دستور install از فرمان save-dev استفاده کردم، بعدا که برید فایل package.json رو بخونید متوجه میشید چطوری دارن جدا میشن و در آینده میگم که اصلا این نوع سوا کردنشون یعنی چی.

خوب حالا نوبت این شده که Babel رو نصب کنیم، سوال اینه که این چیه؟ ساده بگم که قراره شما کد‌های خیلی خیلی آپدیتی بزنید و از ویژگی‌های جدید جاوااسکریپت استفاده کنید ولی قرار نیست وقتی خروجی می‌گیرید و برنامه رو برای deploy آماده می‌کنید مرورگرها هم مثل شما خفن باشن، ممکنه مردم از مرورگرهای زمان قلی قلی میرزا استفاده کنن پس باید هوای اون‌ها رو هم داشته باشیم. Babel به شما اجازه میده خفن باشید و خفن کد بزنید ولی در نهایت زمانی که Webpack برای شما خروجی می‌سازه، خروجی‌ای میده بیرون که هر مرورگر پیرپاتال یا جوونی بفهمه. پس حالا کد زیر رو بزنید:

این‌ها dependency های مورد نیاز بری تنظیم Babel توی این مقاله هستش، بسیاری پلاگین و dependency برای Babel هست که بعدا خودتون با نیاز‌ها و مشکلاتی که براتون پیش میاد باهاشون آشنا میشید، اینجا هم برای حداقلی این‌ها رو گذاشتم. روش استفاده‌اش هم اینه که شما باید یه فایل بسازی به نام .babelrc که متاسفانه بخاطر زبان فارسی نقطه در انتها نمایش داده شده. اصل اسم به صورت زیر هست:

توی این فایل باید تنظیمات Babel رو انجام بدید:

هر کدوم از این‌ها یک معنایی داره مثلا es2015 برای اینه که کد‌هایی که ES6 ی زده میشه مثل class یا constructor تبدیل میشه به ES5 و این باعث میشه اون مرورگر‌های قدیمی هم بفهمنش، یا مثلا react باعث میشه که کد‌های JSX تبدیل به توابع جاوااسکریپتی React بشن مثل createElement . من بیشتر از توضیح نمی‌دم، می‌تونید در مورد الباقی جستجو و تحقیق کنید که چه به درد می‌خورن یا چه تنظیماتی دارند و چه چیز‌های دیگه‌ای میشه گذاشت، اگر سوال داشتید در همین مقاله در کامنت سوالاتتون رو بپرسید.

— تنظیمات Webpack

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

همونطور که در بالا گفته بودم ما دوتا محیط داریم، یکی برای ساختن یا develop و یکی هم برای محیط عملیاتی یا production ، پس برای این منظور یک پوشه به نام webpack بسازید و داخلش یک فایلی بسازید به نام webpack.development.config.js و محتوای اون رو اینطوری بنویسید:

در این فایل می‌بینید که قسمت client و server رو جدا کردم و برای هر قسمت تنظیماتی گذاشتم که بعضی‌هاش مشابه هست و بعضی‌هاش فرق داره که اینجا خیلی توضیح نمی‌دونم، چون همینطوری این مقاله طولانی هست و توضیحات هر بخش اون یک مقاله جدا می‌خواد، اگر مایل بودید در کامنت یا توئیت به من امر کنید حتما توضیح می‌دم یا در صورت نیاز مقاله‌ای جدا می‌نویسم.

— تنظیمات PostCSS

خوب، لازمه بگم که ماجرای این پیش پردازشگر CSS یکم از الباقی دوستانش جداست، شما نه تنها باید خودش رو نصب کنید، بلکه باید پلاگین‌هاش رو هم نصب کنید و اینطوری هی اون رو قوی و قوی‌تر می‌کنید، هرجا احساس کردید کاری رو انجام نمیده جستجو کنید، حتما پلاگین جالبی براش هست، من برای سادگی نصب خودش و حداقل پلاگین‌هاش رو در زیر قرار می‌گذارم:

داخل روت پروژه فولدری به نام postcss بسازید و داخلش فایلی بسازید به نام postcss.config.js و تنظیمات این CSS Preprocessor محبوب رو در اون قرار بدید، شاید بگید چرا از SCSS استفاده نکردم. اگر در مورد PostCSS یکم مطالعه کنید متوجه می‌شید چه فوایدی نصبت به الباقی هم خانواده‌هاش داره، یکی از فواید خوبش داشتن پلاگینی به نام autoprefixer هست که عملا نیاز شما رو به mixin ها از بین می‌بره و با یک تنظیم ساده در کد زیر می‌تونید سطح پوشش پشتیبانی از نظر CSS رو روی مرورگرها تغییر بدید:

— حالا خود برنامه

خیلی واضحه که برنامه ما ممکنه چندین صفحه داشته باشه و باید چیزی وجود داشته باشه که مسیر این صفحات رو هندل کنه و اینجاست که من دوست عزیزم react-router رو وارد بازی می‌کنم. فقط توجه داشته باشید من می‌خوام از نسخه آخر یا همون ۴ استفاده کنم برای همین با دستور زیر آخرین نسخهء ۴ رو نصب می‌کنم:

بعد از این کار یک فولدری بسازید به نام src و در اون فایلی به نام client.jsx بسازید و محتویات زیر رو در اون قرار بدید:

بعد کنار همین فایلی که ساختید فایلی بسازید به نام server.jsx و کد‌های زیر رو در اون قرار بدید:

حالا کنار این‌ها دو پوشه بسازید، توی یکیش فایل‌های اصلی React یا همون برنامه خودمون رو می‌نویسیم و توی یکی دیگه قراره فایل‌های PostCSS یا همون استایل‌های CSS رو قرار بدیم، اولی رو app و دومی رو styles نامگذاری کنید.

— — فایل‌های برنامه

داخل فولدر app در ابتدا فایل به نام template.jsx بسازید و تمپلیت اصلی html ی که قراره همه چیز در اون تزریق بشه رو بسازید:

${markup}

بعد یک فایلی بسازید به نام App.jsx که این فایلی هست که برنامه‌ اصلی رو داخلش می‌نویسید، من فعلا چیز ساده‌ای می‌نویسم، اما شما به دلخواه خودتون می‌تونید پوشه بندی کنید و یک مدل بزرگ‌تری رو خلق کنید:

 

Hello World!

 

); } }

یکم جلوتر دوباره سراغ این فایل میام و یکم بهش چیز میز اضافه می‌کنم اما فعلا بذاریم ساده باشه که یه چیز ساده بتونیم توی مرورگر تماشا کنیم که خیالمون راحت باشه همه چیز داره درست کار می‌کنه.

فقط یه چیز خیلی ساده اضافه کنم، react-helmet، این یکی انقدر ساده هستش که نگو، و فوق العاده بدرد بخور، ازوناست که کلی فواید SEOی داره برامون. درواقع قسمت head هر صفحه رو برامون dynamic میسازه و کلی آپشن داره که میشه ازش به راحتی استفاده کرد، برای نصب این از دستور زیر استفاده کنید:

فعلا فقط این رو نصب کنید، زمانی که دوباره به فایل App.jsx برگشتیم، خودتون متوجه می‌شید که چه کارهای ساده ولی به درد بوخوری میشه باهاش کرد.

— — فایل‌های استایل

داخل فولدر styles یک فایل اصلی بسازید به نام styles.pcss و کنارش یک فولدر بسازید به نام partials و داخلش فایلی اضافه کنید به نام _partial.pcss و محتویات زیر رو در اون کپی کنید:

و

— تنظیمات سرور develop

سرور محیط develop ما express.js خواهد بود، در واقع به این صورت هست که ما یک سری middleware استفاده می‌کنیم که زمانی که تغییراتی در فایل‌های PostCSS یا فایل‌های برنامه ایجاد می‌کنیم، به عبارتی داریم develop می‌کنیم، خودش خود به خود فایل‌های نهایی رو بسازه و ما نتیجه آخرین تغییراتمون رو داخل مرورگر ببینیم.

ابتدا باید پکیج‌های dependency رو نصب کنیم:

بعد در روت پروژه یا همون فولدر react-example پوشه‌ای می‌سازیم به نام express و تنظیمات محیط develop رو برای express درش قرار می‌دیم، برای این کار فایلی بسازید به نام development.js و داخلش اینطوری بنویسید:

— ببینیم چی شد تا الآن

حالا وقتشه یه تست ریز بریم ببینم تا الآن چیکار کردیم، برای اینکه ببینیم همه چیز رو تا الآن درست به کار گرفتیم یا نه دستور زیر رو در محیط کامندیمون اجرا می‌کنیم:

اگر ویندوز دارید و خطای NODE_ENV رو دیدید اصلا نگران نشید به این آدرس یه سر بزنید، اونجا نوشتم که چیکار باید بکنید، اگر خطا نداد که باید توی محیط کامندیتون جمله زیر رو ببینید:

اگر آره که نصف راه رو به سلامت رسیدید و می‌تونید مرورگرتون رو با آدرس http://localhost:3000 باز کنید و از شاهکاری که کاشتید لذت ببرید.


— تنظیمات React Router

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

ولی، این react-router رو فقط نصب کردیم و توی برنامه هنوز نیاوردیمش، اونجا که در مورد فایل App.jsx گفتم که بر میگردم، آهان، الآن وقتشه که برگردیم با هم و اون رو به شکلی یکم کامل‌تر بنویسیم. فایل App.jsx رو با کد‌های زیر دوباره ویرایشش کنید:

 

    • Homepage

 

    • About

 

    • Contact

 

 

); } } class Homepage extends Component { render() { return (

 

Homepage

 

); } } class About extends Component { render() { return (

 

About

 

); } } class Contact extends Component { render() { return (

 

Contact

 

); } } export default class App extends Component { render() { return (

); } }

خوب یه توضیح ریز بدم، ببینید الآن توی این فایل App.jsx جدیدمون سه تا کامپوننت جدید آوردیم به اسم‌های Homepage و About و Contact که در واقع نقش سه صفحه ما رو بازی می‌کنن.

بعدش یه کامپوننتی ساختیم به اسم Menu که اولی همین فایل App.jsx قرارش دادیم و اون رو هم توی هر سه کامپوننت ایمپورت کردیم تا در هر سه صفحه مجزایی که داریم منو هم دیده بشه.

نکته‌ای که وجود داره اینه که دیگه مثل گذشته قرار نیست که کلاس‌های تگ‌ها رو اضافه کنیم. ما دیگه با کلاس شدیم و قراره که با CSS-Modules کار کنیم. در طی روند این مقاله من خیلی ریز تنظیماتش رو وارد کردم و شما فقط نیازه بدونی که توی هر کامپوننتی که مجزاش می‌کنی باید با کد:

استایل‌ها رو مثل یک آبجکت اضافه کنید و توی هر تگ که خواستید کلاس بهش بدید از کد زیر استفاده کنید:

فکر کنم خیلی واضحه دیگه، توی فایل‌های PostCSS با هر اسمی که خواستید کلاس‌هاتون رو بسازید و اینجا به جای اینکه مستقیم اسمش رو صدا بزید اون رو به صورت فرزندی از آبجکت styles صدا بزنید، این کار در نسخه‌ای که برای deploy آماده می‌کنید یا همون نسخه production اسم کلاس‌ها رو در DOM به هش تبدیل می‌کنه و می‌تونید تا حداقل ۵ حرف ببریدش، اینطوری فایل CSS آخری که می‌سازید فوق العاده فشرده شده خواهد بود. حالا بعدا، زمانی که دارم در مورد تنظیمات Webpack در محیط production صحبت می‌کنم بیشتر باهاش آشنا می‌شید.

نکتهء دیگه‌ای که خیلی عاشقشم دوست خوبم Helmet هست که به وضوح توی کد‌ها دیده میشه، در هر کامپوننت به صورت مجزا وجود داره، در کامپوننت root یا اصلی یا همون App کامپوننت هم دیده میشه که تنظیمات کلی‌ای رو داره اجرا می‌کنه. انقدر این تنظیمات ساده و خوانا هست که من اینجا از توضیحش صرف نظر می‌کنم.

حالا برای اینکه دوباره ببینم چیکاره هستیم یکبار دیگه دستور اجرا رو برای develop اجرا می‌کنیم:

به نظر معجزه میاد، آره، شما تونستید یه اسکلت عالی از یک برنامه پایه بر React بسازید که همه چیز‌های عالی رو داره. هر صفحه رو که با فشار منو صدا می‌زنید از سمت سرور داره پویش یا همون render میشه و کاملا هم سمت مرورگر شما dynamic هست. ولی به نظر شما کار ما تمام شده؟

هم آره هم نه، آره: چون ما محیط develop عالی‌ای رو درست کردیم و نه: چون هنوز نمی‌دونیم چطور باید اون رو برای deploy روی سرور آماده کنیم.

— آماده سازی برای اعزام به محیط عملیاتی

تا الآن هر کار کردیم، برای این بوده که محیط develop خوبی رو داشته باشیم، ولی از الآن به بعد دیگه قراره که تنظیمات متفاوتی برای production قرار بدیم که سه هدف اصلی رو حتما باید در نظر بگیریم:

  1. باندل کردن کل فایل‌های برنامه و فشرده سازی و از بین بردن debuggerها و console.logها و تبدیل به نسخه ES5.1
  2. استخراج فایل styles.css در یک فایل جدا و فشرده سازی و پاک کردن همه کامنت‌ها
  3. ساختن فایل stats.json که درواقع عواملی Webpackی که برای محیط عملیاتی در سرور برای express نیاز هست رو توش نگه می‌داریم و اون‌هایی که برای محیط develop بوده رو دیگه نمی‌خواهیم.

پیش به سوی تنظیمات برای محیط عملیاتی، کد‌های زیر را اجرا می‌کنیم:

خوب حالا باید توی فولدر webpack یک فایل دیگه به نام webpack.production.config.js بسازید و داخلش رو با کد‌های زیر پر کنید:

و همینطور در فولدر ‌express یک فایل به نام production.js برای محیط production بسازید و کد‌های زیر رو داخلش کپی کنید:

الآن دیگه باید بتونید با دستور زیر فایل‌هایی رو بسازید که قراره برای محیط عملیاتی به سرور اعزام بشه:

مشاهده می‌کنید که فایل‌هایی در فولدر dist ساخته شده و اگر دستور زیر رو در محیط کامندیتون اجرا کنید، شما درواقع محیط عملیاتی رو شبیه سازی کردید. یجورایی چیز نهایی که مردم می‌بینند در واقع همینه:

اگر الآن روی مرورگر Google Chrome دو افزونه React Developer Tools و Wappalyzer رو داشته باشید می‌بینید که علامت React روش ظاهر شده و مخصوصا افزونه React Developer Tools آبی شده و دیگه قرمز نیست. چون قرمز برای محیط دولوپ هست و آبی یعنی شما نسخه مخصوص production رو بردی روی سرور.

جدا تبریک می‌گم. شما فوق العاده‌ای، چون روند این مقاله در عین اینکه ساده‌ترین شکل رو داشته ولی جزو طولانی‌ترین‌ها و پیچیده‌ترین‌ها بوده. وقتی تا اینجا اومدی جلو یعنی شما بهترینی، مدتی هم میگذره تا شما با معجزه‌ای که کردی بیشتر آشنا بشی و اون رو custom خودتون کنید. مثلا eslint بیارید، از Redux استفاده کنید، از Redux-Saga استفاده کنید، تست، مثل Jest رو اضافه کنید و خیلی چیز‌های باحال دیگه.

— اجرا روی سرور واقعی

زمانی که همه کارهای بالا رو انجام دادید باید به نفر DevOps تون بگید که روی سرور به pm2 نیاز دارید. چون برنامه‌های خفن Reactی که کاربرهای زیادی داره رو با دستور بالا روی سرور اصلی اجرا نمی‌کنن، برای این کار باید روی سرور اصلی‌تون دستور زیر رو اجرا کنید:

و برای اجرا:

البته بگما، این کار رو روی کامپیوتری که تا الآن هم استفاده کردید می‌تونید استفاده کنید، هیچ اشکالی نداره، ببینین که چه شکلیه! ولی این خروجی و نمایشتون روی مرورگر اصلا با

فرقی نداره، تفاوت‌هاش رو نفر DevOps میدونه که قراره مدیریت کش و لودبالانس و اینا اضافه کنه. اگر دوست داشتید می‌تونید که داک pm2 رو بخونید.

— اختتام

برای راحتی کار دولوپ، من دستوراتی رو در قسمت scripts در فایل package.json گذاشتم که می‌تونید از آدرس گیت‌هاب که در بالای صفحه گذاشتم استفاده کنید یا همین زیر هم براتون می‌نویسم:

یه توصیه آخر هم از من داشته باشید، درسته که تا الآن داشتیم با npm کار می‌کردیم و الآن با تنظیم بالا مثلا برای شروع develop از دستور npm run dev استفاده می‌کنید ولی سرعت npm خیلی کم هست و زمانی که شما در فایل‌هاتون تغییرات ایجاد می‌کنید تقریبا ۲۷ الی ۳۰ ثانیه طول می‌کشه که براتون سازه جدید رو بسازه و با Hard Reload تغییرات رو ببینید. برای همین من توصیه می‌کنم که yarn رو نصب کنید و با دستور yarn dev شروع به develop کنید، باورتون نمیشه سازه رو در زیر ۵۰۰ میلی ثانیه میسازه.

امیدوارم که تونسته باشم کمکتون کنم، همیشه موفق و شاد باشید.

نوشته مثال کاملی از پیاده سازی یک برنامه وبی پایه بر React اولین بار در ویرگول پدیدار شد.

گردآوری توسط ایده طلایی

فیلتر ها در جاوا اسکریپت

سلام، تو اولین نوشته ی خودم در ویرگول میرم سراغ فیلترها در جاوا اسکریپت
تو این مقاله با استفاده از مثال نحوه عملکرد سیستم آموزشی دانشگاه با فیلترها به خوبی آشنا میشیم.
متد ()filter در مقایسه با متد های ()map و reduce خیلی ساده تر و با مسمی تره :))

شما یک ارایه رو به عنوان ورود به این متد میدین و خروجی رو با یک فانکشن و شرطتون مشخص میکنید و در یک آرایه جدید تحویل میگیرین 🙂

این بنظر خیلی ساده میرسه، اما من عادت دارم ساختار به طور کامل بفهمم تا بتونم راحتر با قضیه کنار بیام پس بیاین باهم بیشتر بریم تو فیلتر!!!

متد ()Filter به صورت true و false بررسی میکنه و خروجی در قالب یک آرایه جدید هست.

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

نحوه ورود دانش آموزان به دانشکده و عملکرد متد فیلتر

استفاده از For Loop برای فیلتر کردن فانکشن

بسیار خب، ما الان میخوایم یه ارایه از ۴ دانش آموز رو درست کنیم با اسم و نمره شون. در یکی از دانشکده ها دانش آموز هایی که نمره شون ۳٫۲ و بالاتر باشه رو پذیرش میکنن پس باید همچین چیزی داشته باشیم:

تو کد بالا میبینید که بعد از تعریف ارایه دانش آموزان من با استفاده از حلقه ()for با استفاده شرطی که گذاشتم دانش آموز هارو فیلتر کردم. اما این یه راهیه که خودمونو اذیت کردیم با اینکه جواب داد و خروجی درسته اما تو ادامه به جای حلقه از متد فیلتر استفاده میکنیم و مزایاشو هم باهم چک میکنیم.

استفاده از متد ()Filter

بیاین باهم همون هدفی که بالا داشتیم رو با استفاده از متد فیلتر پیاده کنیم.

۱- فیلتر یک متد آرایه ای هست، خب ماهم با آرایه ای از دانش آموز ها شروع میکنیم
۲- از یک فانکشن بازگشتی (callback function) استفاده میکنه برای اجرای هر المنت در آرایه.
۳- در نهایت هم خروجی که کدوم المنت ها در خروجی هستند رو به صورت آرایه برگشت میده.

اما کد:

همونطور که میبینین ورود ها و خروجی های ما یکسان هستند، اما تفاوت ها تو اینجا چی هست؟

۱- ما احتیاج نداریم که از قبل آرایه ی با اسم admitted رو تعریف کنیم و بعدا اون رو مقدار دهی کنیم. ما همونجا تعریفش کردم و مستقیم مشخص کردیم که با چه دیتایی قراره پرشه.
۲- ما از یک شرطی استفاده کردیم و در نهایت وضعیت رو برگشت دادیم ( به قول فرنگیا return statement)
۳- الان دیگه ما میتونیم از student برای هر المنتی استفاده کنیم، اگه یادتون باشه قبلا students[i] رو تو for loop استفاده میکردیم.

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

مثال ۲ – استفاده از دو شرط داخل متد فیلتر

تا حالا، ما فقط از یک شرط تو متد فیلترمون استفاده میکردیم. اما همیشه که زندگی اینقد راحت نیست و ممکنه برای چک کردن شروط دیگه هم لازم باشه +۱۰ تا فاکتور رو چک کنیم.

اما در حال حاضر شما به دوتا فاکتور رضایت بدین علاوه بر نمره کل مثلا نمره مهارت های فنی هم با چک کنیم. دانش آموز باید نمره بالای ۳٫۲ و مهارت بالای امتیاز ۱۹۰۰ داشته باشه. همون دستورات بالا رو به شکل زیر اصلاح میکنیم:

خیلی آشنا بنظر میاد نه؟ الان ما دوتا شرط داریم که خروجی هارو مشخص میکنه. اما بیاین یکم بیشتر روش کار کنیم، اگه قسمت فیلتر بالا رو به شکل زیر بنویسم چه اتفاقی میفته؟ به کد زیر دقت کنید:

 

اگه از کد بالا خروجی بگیرین متوجه یه تفاوت دیگه میشین که خیلی مهمه !! که تفات این متد با حلقه for رو مشخص میکنه. اگه شما متغییر goodStudent رو چک کنید متوجه میشد که خروجی true و false هست و نوع بازگشتی boolean هست.

پس در واقع اون true و false تصمیم میگیرند که تو آرایه ای که بازگشت داده میشه کدوم مقادیر قرار بگیرند.

در نهایت امیدوارم که این مطلب براتون مفید واقع شده باشه، شما تجربه استفاده از این متد رو داشتین؟ خوشحال میشم نظراتتون رو زیر این پست ببینم و باهم بیشتر صحبت و تبادل نظر کنیم 🙂

نوشته فیلتر ها در جاوا اسکریپت اولین بار در ویرگول پدیدار شد.

گردآوری توسط ایده طلایی