۸ قدم برای حرفه‌ایی شدن در React (قسمت اول)

قبل از هر چیز باید بگم، این مقاله برای افرادی که بیماری قلبی دارن مناسب نیست. چون بعد از خودن این مقاله باید کل کدتون رو از اول باز نویسی کنید. :)

قسمت دوم:

https://virgool.io/@arefinima/my-react-exprenices-part-2-r8degtlmg5pm

قسمت سوم:

https://virgool.io/JavaScript8/%DB%B8-%D9%82%D8%AF%D9%85-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AD%D8%B1%D9%81%D9%87%D8%A7%DB%8C%DB%8C-%D8%B4%D8%AF%D9%86-%D8%AF%D8%B1-react-%D9%82%D8%B3%D9%85%D8%AA-%D8%B3%D9%88%D9%85-gsssmznyjdun

قصد دارم درباره:

1. ESLint
2. WebPack
3. Babel
4. React Design Pattern
5. Code Splitting
6. Jest
7. DocGen
8. StoryBook

صحبت کنم.

تا امروز تقریبا همه ما برای ساخت پروژه React میرفتیم داخل GitHub دنبال Create React App می‌گشتیم و بدون اینکه بدونیم اون پشت (داخل create-react-app) چه خبره شروع می کردیم به کد زدن و .... .

خب مشخصه که اولین قدم اینکه بدونیم اون پشت چه خبره :)

WebPack

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

Babel

خب رسیدیم به Babel، و خوشبختانه Babel خیلی ساده و روونه :)
ساده بگم: دستگاه تبدیل کده :|

شما با syntax مورد نظر خودتون مثلا ES2015 کد میزنید و موقع خروجی گرفتن کد شما به جاوااسکریپت تبدیل میشه. داخل عکس هم مشخصه که چه اتفاقی افتاده.

این ویژگی باعث میشه شما کمتر کد بزنید.

ESLint

ابزاری برای شناسایی و گزارش الگوهای موجود در ECMAScript / JavaScript است که هدف آن ساختن کد سازگارتر و جلوگیری از اشکالات است. (با تشکر از گوگل ترنسلیت)

کلا این شکلیه که شما داخل کانفیگ مشخص می‌کنید که برای indent گذاشتن از Space یا Tab استفاده می‌کنید، یا رشته ها داخل Double Quote باشن یا Single Quote و ...
و خب اصل مطلب اینکه با IDE شما Sync میشه و نسبت به کانفیگ شما در خط مربوطه خطا یا Warning قرار میده. این باعث میشه که کد شما منظم تر بشه.

وقتی با Create React App شروع به ساخت پروژه می‌کنید، تمامی این پکیج ها کانفیگ شده و شما فقط استفاده می‌کنید، حالا بینینم اگر خودمون کانفیگ کنیم به کجا میرسیم ؟

کانفیگ ESLint

برای ساخت فایل کانفیگ eslint در ریشه پروژه یک فایل با نام .eslintrc.js ساخته و شروع به کانفیگ کردن کنید:

قبل از شروع کردن این لینک را باز کنید. (ترجیح میدم درباره eslint و syntax زیاد توضیح ندم و فقط چند تا از plugin های خفن رو معرفی کنم)

چرا نباید از setState داخل ComponentDidMount و ComponentDidUpdate استفاده کنیم ؟!
خب زمانی که Component Mount میشه یکبار متد Render صدا شده و Dom Update شده و اگر شما دوباره setState کنید این اتفاقات از اول میوفته :) به همین راحتی دچار Wasted render می‌شید.

Prevent usage of setState in componentDidMount

Prevent usage of setState in componentDidUpdate

درباره Bind کردن

خب تا دیروز همه برای bind کردن بعد از تعریف متد به صورت زیر کار رو یک سره میکردن:

() => console.log(&quotYou clicked on the item !&quot).bind(this)

بعدش که یکم گذشت دیدم میشه اینو ساده‌تر کرد داخل constructor کلاس عملیات bind رو انجام میدادیم:

ولی خب با ظهور ES7 خیلی از مشکلات حل شد (با تشکر از Babel البته)

نپرسید که چی‌شد که اینطوری شد و چرا اینا چون خودمم نمی‌دونم چرا از اول اینکارو نکردن

قضیه از این قراره که موقع transpile شدن توسط Babel متد داخل contractor تعریف میشه :)

No .bind() or Arrow Functions in JSX Props

constructorباره اینکه state اون وسط بیرون چیکار میکنه بعدا صحبت میکنم

متد Should Component Update چیست ؟

همون طوری که از اسمش مشخص هستش "آیا کامپوننت باید آپدیت بشه ؟"
مثال بالا رو در نظر بگیرید هربار که روی دکمه کلیک بشه، کامپوننت Parent یکبار از اول ReRender میشه و درنتیجه متد Hello از اول رندر میشه، حالا فکر کنید این اتفاق داخل بالایی ترین Node اتفاق بیوفته کل کامپوننت ها باید از اول render بشن و این افتضاحه !

‌‌‌حتی میشه از PureComponent استفاده کرد ولی چون shallowCompersion میشه و زمانی که شما یک آرایه به عنوان prop یا state داشته باشید و فرضا آبجکت سوم آرایه از مقدار MMD به MaMad تبدیل بشه متد Render صدا نمیشه ...

Enforce React components to have a shouldComponentUpdate method

و اینم از کانفیگ eslint خودم