نوشته های اشکان اهرابی

خداحافظی با ریداکس (React Context API)

اشکان اهرابی — Thu, 25 Apr 2019 06:39:28 +0430

خیلی از برنامه‌نویس‌های ری‌اکت، با ریداکس به عنوان یک state manager کار کردند یا حداقل احساس نیاز به چنین چیزی رو داشتند. قبل از این، ری‌اکت به صورت پیش‌فرض قابلیت مدیریت stateها رو نداشت و همین باعث شد که دولوپر‌های ری‌اکت به ریداکس رو بیارن. اما از وقتی که React Context API خودشو نشون داد، توجه خیلی‌ها رو تونست جلب کنه.توی این نوشته قراره بفهمیم که اصلا چه موقع به همچین چیزی نیاز پیدا می‌کنیم و در نهایت متوجه بشیم که چطور می‌تونیم ازش استفاده کنیم. پس سیستم‌هاتون رو روشن کنید :)عکس از inflearn.comاستیت منیجر به چه دردی می‌خوره؟می‌دونیم که در ری‌اکت برای فرستادن stateهای کامپوننت پدر به فرزند‌هاش، نمی‌تونیم ساختار سلسله مراتبی (hierarchy) رو نقض کنیم و باید از طریق propها تک‌تک کامپوننت‌های واسط رو رد کنیم تا به کامپوننت مقصد برسیم. بنابراین وقتی تعداد کامپوننت‌های تو در تو زیاد باشن، فرستادن stateهای بالاترین کامپوننت به پایین‌ترین کامپوننت، کار پیچیده و تقریبا غیرمعقولیه. (دیاگرام سمت چپ عکس زیر) اما برای راحتی کار، بهتره که stateهایی به صورت سراسری (Global) داشته باشیم تا داخل هر کامپوننت، فارق از اینکه اون کامپوننت کجا قرار داره بتونیم ازش استفاده کنیم. (دیاگرام سمت راست عکس زیر)این دقیقاً همون کاریه که استیت منیجر‌هایی مثل React Context برامون انجام میدن. مقایسه دسترسی کامپوننت‌ها به استیت‌ها (سمت راست توسط Context API و سمت چپ توسط propها) عکس از carlrippon.comشروع کار با React Context APIهمونطور که گفتیم، برای ساختن stateهای سراسری از React Context استفاده می‌کنیم. پس اولین کاری که قراره انجام بدیم اینه که داخل فایل App.js یک Context جدید می‌سازیم و اون رو نامگذاری می‌کنیم:export const TestContext = React.createContext( );نکته‌ای که وجود داره اینه که برای ساخت ‌Context جدید نیازی به نصب هیچ ماژولی نداریم و همونطور که می‌بینیم، از خود پکیج React برای ساختن Context استفاده می‌کنیم.یادتون نره که این متغیر رو از داخل App.js اکسپورت کنید که بتونید توی کامپوننت‌های دیگه مجدد import کنید. ایجاد یک Context Provider برای ارائه دیتا به همه کامپوننت‌هابعد از ساختن Context، نوبت به ساختن قسمتی برای ذخیره کردن داده‌ها می‌رسه. پس به یک کامپوننتی احتیاج داریم که stateهای سراسری رو داخل اون قرار بدیم که اصطلاحاً Provider Component (کامپوننت ارائه‌دهنده) نامیده می‌شه. پس Provider Component رو به شکل زیر ایجاد می‌کنیم:import React, {Component} from 'react'; //Don't forget to import your Context from App.js import {TestContext} from "PATH_TO_APP.JS";export default class DataProvider extends Component{ this.state = { data: "This is a sample data." } render( ){ return( {this.props.children} ); } }خب، شروع کنیم به بررسی این تکه کد:حتما یادتون نره که Context ساخته شده رو داخل این کامپوننت import کنید تا بتونید ازش استفاده کنید.در این جا یک Provider Component ساختیم به اسم DataProvider که داخلش یک state هم وجود داره و در متد render، به جای اینکه تگ‌های Html برگردونیم، ارائه‌دهندهٔ Context رو برمی‌گردونیم. در واقع از Context ساخته شده در App.js استفاده می‌کنیم و Provider اش رو برمی‌گردونیم: {this.props.children} اما این قسمت از کد که return شده چه معنایی میده؟اگر از ریداکس استفاده کرده باشید، همچین چیزی براتون خیلی آشنا هست. ما قراره از این Provider به عنوان یک wrapper برای کل کامپوننت‌های پروژه استفاده کنیم تا همه کامپوننت‌های درون این Provider بتونن از stateهای سراسری استفاده کنند.سوال دوم اینه که این stateهای سراسری چطور به کامپوننت‌های درونی انتقال داده شدند؟ جواب واضحه. پارامتر value که به عنوان prop در اینجا نوشته شده، stateهای سراسری رو به تمام فرزندان (یعنی همون this.props.childern که داخل تگ هست) می‌فرسته. حالا ما یک Provider Component داریم که می‌تونیم داخلش تمامی کامپوننت‌های دیگه رو قرار بدیم. پس برمی‌گردیم به App.js و این کامپوننت رو import می‌کنیم و همه کامپوننت‌های دیگه رو داخلش قرار می‌دیم:import React, {Component} from 'react'; //Don't forget to import your Provider Component import DataProvider from "PATH_TO_PROVIDER_COMPONENT"; export const TestContext = React.createContext( ); export default class App extends Component { render( ){ return( //All your other components ); } }همون‌طور که اینجا می‌بینید، از DataProvider به عنوان یک ‌wrapper استفاده کردیم و همه کامپوننت‌های دیگه رو داخل اون قرار دادیم تا بتونن به state سراسری‌ای که درون DataProvider تعریف کردیم دسترسی داشته باشن.اما فقط یک مرحله دیگه وجود داره برای اینکه به اون stateهای سراسری دسترسی داشته باشیم و اون اینه که، هر جای پروژه که نیاز داریم اون stateها رو مصرف کنیم یا به اصطلاح Consume کنیم.استفاده از Context Consumer برای گرفتن دیتاهای ذخیره شدهحالا نوبت رسیده به استفاده از دیتاهایی که به صورت سراسری ذخیره شدند. برای این‌کار باید از Consumer (مصرف‌کننده) استفاده کنیم. وارد یکی از کامپوننت‌های مورد نظر خودمون می‌شیم و هرجایی که نیاز بود از Consumer استفاده می‌کنیم.اما هم‌چنان فراموش نکنید که Context ساخته شده (TestContext) رو داخل کامپوننت مورد نظرتون import کنید تا بتونید از Consumerاش استفاده کنید:

{(contextValue) => (

Here's the global data: {contextValue}

)}

نکته مهم: توجه کنید که فرزند Consumer همواره یک تابع است.درون Consumer یک تابع قرار داده شده که پارامتر ورودی این تابع در واقع همون مقداری هست که به عنوان value در Context Provider وجود داشت. و خروجی این قسمت طبیعتاً به این شکل هست:Here's the global data: This is a sample data.به همین راحتی شما تونستید از React Context Api استفاده کنید و یک دیتا رو به صورت سراسری در اختیار تمام کامپوننت‌ها قرار بدید. تمام ماجرا این بود؟باید بگم که کاربرد React Context Api به همین موضوع ختم میشه بر خلاف ریداکس که قابلیت‌های دیگه‌ای هم در اختیارتون قرار میده از جمله افزونه‌های debuging که توی ریداکس زیاد هم طرفدار داره.به هر حال ریداکس سن بیشتری نسبت به React Context Api داره و طرفدارای زیادی داره و این موضوع باعث شده یکم پخته‌تر به نظر بیاد.اما اگه نیازی به ویژگی‌های دیگه ریداکس ندارید و صرفا برای مدیریت‌ stateهای سراسری می‌خواید ازش استفاده کنید، خب همین کار رو با React Context Api انجام بدید. چون همون‌طور که دیدیم نیازی به اضافه کردن هیچ کتابخونه دیگه‌ای نداره و استفاده ازش به مراتب راحت‌تر از ریداکس هست.یادتون نره در مستندات سایت ری‌اکت خیلی کامل‌تر از هر مطلب دیگه به این موضوع پرداخته شده. پس حتما اونو هم بررسی کنید.دست به کد باشید :)

ایمِت، موتورِ توربویِ فرانت‌اند (قسمت ۲)

اشکان اهرابی — Sun, 07 Oct 2018 18:09:34 +0330

خب دیگه وقتش رسیده که نقش هیجان‌انگیز ایمِت رو توی CSS هم ببینیم. بعد از اینکه قسمت اول رو خوندید و از ایمت در HTML استفاده کردید، احتمالاً نیاز داشتید که توی استایل‌ها هم ازش کمک بگیرید.خب توی این قسمت قراره همین کار رو انجام بدیم و بریم به سراغ استایل‌دهی به کمک ایمِت، اما هم‌چنان یادتون نره که از سرچ کردن غافل نشید.با طولانی نوشتن در CSS خداحافظی کنیداکثر ما موقع نوشتن یک Property طولانی مثل "background-color" از auto complete ویرایشگر استفاده می‌کنیم که به کارمون سرعت بیشتری بده. اما خب این موضوع آن‌چنان دردی رو از ما دوا نمی‌کنه چون مجبور می‌شیم کاراکتر‌های زیادی رو برای رسیدن به Property مورد نظر تایپ کنیم.ایمت اینجا به داد ما می‌رسه و کارمون رو راحت‌تر می‌کنه. طوری که در نهایت با تایپ کردن ۴ یا ۵ کاراکتر، به Property مورد نظر می‌رسیم:bgc => background-color: #fff; trf => transform: bdblrs => border-bottom-left-radius: pos => position: relative; pos:f => position: fixed;همون‌طور که می‌بینید، تنها با نوشتن ۳ کاراکتر (bgc) و زدن دکمه TAB تونستیم Property مورد نظر خودمون یعنی "background-color" رو به راحتی بنویسیم. حتما براتون سوال شده که رنگ سفید (fff#) از کجا اومده؟ایمت برای بعضی از Property ها، مقدار پیش‌فرض در نظر می‌گیره ولی برای بعضی‌ها نه! مثلاً برای "transform" مقداری در نظر نگرفته اما برای "position" و "background-color" به ترتیب "relative" و "fff#" رو داریم. این که کدوم Property ها چه پیش‌فرضی دارند رو با تمرین کردن یا مطالعه مستندات سایت ایمت می‌تونید یاد بگیرید.اما نکته جالب درباره خط چهارم مثال بالاست که حتماً توجه‌تون رو هم جلب کرده. شما می‌تونید با قرار دادن دو نقطه ( : ) بعد از عبارت مورد نظر، مقداردهی رو هم انجام بدید و مقدار پیش‌فرض رو با مقدار دلخواه‌تون جایگزین کنید.نکته: اگر مقدار مورد نظرتون عدد بود، می‌تونید دو نقطه ( : ) رو قرار ندید:ta:c => text-align: center; m5 => margin: 5px; p0 => padding: 0;ایمت و Prefix هایکی از جالب‌ترین ویژگی‌های ایمت در CSS، کمک به نوشتن prefix ها در استایل‌دهی هست. نوشتن این‌گونه prefix ها برای ما برنامه‌نویس‌ها وقت‌گیر و حوصله‌ سر بره. اینجاست که ایمت دوباره در لباس سوپرمن ظاهر میشه و براتون prefix ها رو قرار میده. اونم تنها با تایپ کردن کاراکتر دَش ( - ) قبل از عبارت مورد نظر:-trf:t => -webkit-transform: translate(x, y); -moz-transform: translate(x, y); -ms-transform: translate(x, y); -o-transform: translate(x, y); transform: translate(x, y);ویژگی جالب‌تر اینجاست که بعد نوشتن عبارتِ ایمت و زدن دکمه TAB، مقدار x انتخاب شده و دیگه لازم نیست که نشان‌گر ماوس رو تا اونجا ببرید و مقدار‌دهی کنید. چی ازین بهتر؟ ایمت‌باز باشیدتا اینجا سعی کردم جذاب‌ترین ویژگی‌های ایمت رو براتون بگم، اما در نظر بگیرید که ایمت در همین دو مطلب خلاصه نمی‌شه و در واقع برای حرفه‌ای کار کردن باهاش باید حتما به سایت ایمت سر بزنید و دست به کد بشید تا بتونید سریع‌تر کد بزنید.امیدوارم که انگیزه کافی برای استفاده از ایمت رو براتون ایجاد کرده باشم. منتظر نظرات‌تون برای بهبود نوشته‌هام هستم.دست به کد باشید.

ایمِت، موتورِ توربویِ فرانت‌اند (قسمت ۱)

اشکان اهرابی — Thu, 06 Sep 2018 14:01:26 +0430

احتمالاً خیلی از برنامه‌نویس‌های وب، مخصوصاً فرانت‌اند دوِلُپرها، اسم ایمِت (Emmet) رو شنیده باشن. ایمت ابزاری کاربردی برای سریع‌تر نوشتن زبان‌های نشانه‌گذاریه. هرچند از ایمت بیشتر در HTML و CSS استفاده می‌شه، اما خب در XML و XSL هم کاربرد داره.شاید سوال کنید چطوری با ایمت می‌شه سریع‌تر نوشت؟ توی قسمت اولِ این مطلبِ چند دقیقه‌ای، سعی می‌کنم از خوبی‌ها و ویژگی‌های ایمت در HTML براتون بگم. در قسمت دوم هم ایمت رو توی CSS بررسی می‌کنیم. اما از سرچ کردن توی گوگل و هم‌چنین مستند‌های خودِ سایت ایمت هم غافل نشید.از همون اولِ کدنویسی ازش استفاده کنیدهمه ما وقتی می‌خوایم یه پروژه فرانت‌اند رو شروع کنیم می‌گیم: «اووف، دوباره تگ‌های html و head و body و ... خدایا بسه دیگه، خسته شدیم.»یکی از خوبی‌هایی که ایمت داره اینه که دیگه لازم نیست اون تگ‌های اصلی HTML رو هربار توی هر پروژه از اول بنویسید. کافیه توی محیطی که درحال کدنویسی هستیم یه علامت تعجب ( ! ) تایپ کنیم و دکمه تب رو بزنیم. بوم... بعد از نوشتن ( ! ) کلید تب رو می‌زنیمخوبه دیگه؟ ساده‌ترین دستورِ ایمت به نظرم همینه. این نکته رو هم در نظر داشته باشید که بعد از هر دستورِ ایمت باید TAB بزنید.ایمت در HTML حالا یکم مفصل‌تر کاراییِ ایمت در HTML رو بررسی می‌کنیم. داستان از این قراره که وقتی می‌خواید به کمک ایمت سریع‌تر کد بزنید، باید با selector های CSS آشنا باشید. دقیقاً همون‌طور که توی CSS برای استایل دادن به یک تگِ خاص با selector های مختلف به اون تگ می‌رسید. مثلاً برای این که یه تگ p رو داخل یه div قرار بدید کافیه از child selector استفاده کنید. یا برای این که دو تا تگ رو کنار هم قرار بدیم طبیعتاً باید از sibling selector استفاده کنیم. از نقطه ( . ) و شارپ ( # ) هم که بهتر از من می‌دونید، به ترتیب برای نوشتن ‌class و id استفاده می‌شه. به کد زیر توجه کنید:

توجه کنید که وقتی از نقطه و شارپ استفاده می‌کنید، ایمت به صورت پیش‌فرض کلاس و آیدی مورد نظر رو به یک تگ div نسبت می‌ده. برای این که به تگ دیگه‌ای بتونید کلاس یا آیدی بدید باید قبل از نقطه اسم اون تگ رو بنویسید. برای تکرار کردن تگ‌ها از علامت * استفاده می‌شود و برای نوشتن متن در داخل یک تگ، کافیه متن مورد نظر رو بعد از اسم تگ، در داخل { } قرار بدیم.استفاده از پرانتز‌ها رو هم فراموش نکنید. برای اینکه اولویت‌بندی تگ‌ها رو بتونید رعایت کنید از پرانتز‌ها کمک بگیرید.

sample text

همون‌طور که در بالا می‌بینید، بعد از لیست آیتم‌ها در داخل کروشه علامت $ قرار گرفته ( {$}li ) که برای نوشتن و تکرار عدد از اون استفاده میشه و به تعدادی که از تگ li تکرار شده، داخلش عدد قرار گرفته. برای این که بهتر متوجه بشید به کد زیر دقت کنید:

item1

item2

item3

در مثال بالا، به جای علامت $، عدد قرار گرفته و به تعداد دفعاتی که تگ div تکرار شده به این عدد اضافه شده.نوشتن Attribute های تگ‌ها به کمک ایمتخب حتما تا اینجا که رسیدیم با خودتون می‌گید چقدر بده که نمیشه attribute های html رو با ایمت نوشت! اما میشه. به کمک ایمت حتی می‌تونید attribute ها رو هم بنویسید. برای نوشتن attribute های هر تگ، کافیه اون ویژگی رو داخل [ ] قرار بدید. به این نکته توجه کنید: وقتی از ایمت برای نوشتن description های مربوط به یک attribute استفاده می‌کنید، لازم نیست که اون description رو داخل " " یا همون دابل کوتیشن قرار بدید، چون ایمت خودش این کار رو براتون انجام می‌ده.برای نوشتن چندین attribute هم کافیه اون‌ها رو به ترتیب و جدا جدا داخل [ ] قرار دهید. اما نکته جالب اینه که ایمت برای نوشتن یک سری از attribute ها کار شما رو راحت کرده. به بخش بعد توجه کنید تا سورپرایز شید :)ایمت و تگ پرکاربردِ inputهمه‌ ما فرانت‌اند‌ها تقریبا توی هر پروژه‌ای از فرم‌ها و تگ‌های input زیاد استفاده می‌کنیم و همیشه باید برای input های مختلف، type یا همون نوع مختلفی در نظر بگیریم. خب همونطور که بالاتر گفتیم، می‌تونید attribute ها رو به کمک ایمت بنویسید. اما به نظرتون این کار برای input ها یکم وقت‌گیر نیست؟ ایمت برای این هم راه حل در نظر گرفته. برای اینکه نوع (type) یک ‌input رو تعیین کنید کافیه که بنویسید input و نوع مورد نظر خودتون رو بعد از دو نقطه ( : ) بنویسید. خب می‌بینید که خود ایمت براتون attribute های name و id رو هم قرار میده. دیگه چی بهتر از این؟ اگر هم بعد از نوشتن input هیچ چیزی قرار ندید، ایمت به صورت پیش‌فرض براتون نوع اون رو text قرار می‌ده.از ایمت در CSS غافل نشیدتوی این قسمت سعی کردم برخی قابلیت‌های ایمت توی html رو بهتون معرفی کنم و امیدوارم که تا اینجای کار از ایمت لذت برده باشید. اما یادتون نره که این‌ها همه ویژگی‌های ایمت نیست و کلی قابلیت دیگه بهتون میده توی html که می‌تونید با خوندن مستند‌های سایت رسمی ایمت، ازشون استفاده کنید.در قسمت دوم این مطلب هم قراره براتون از ایمت توی CSS بگم که خیلی خیلی جذاب‌تر از ایمت در html هست و حسابی توی تندنویسی بهتون کمک می‌کنه. نظرات و پیشنهادات‌تون رو هم دریغ نکنید.دست به کد باشید.