React چیست؟ – ری اکت چیست؟ – طراحی رابط کاربری با React

React فیسبوک تصور ما از برنامه های وب و ساخت رابط کاربری را متحول کرده است. به خاطر طراحی اش، می توانید آن را فراتر از وب استفاده کنید. ابزاری به نام Virtual DOM این امکان را فراهم می کند.

در این فصل کمی درباره موضوعات بنیادی کتابخانه ها صحبت می کنیم تا React را بهتر بفهمید.

React چیست؟

ری اکت: یک کتابخانه ی جاوا اسکریپت برای ساختن رابط کاربری

ری اکت یک کتابخانه ی جاوا اسکریپت است که شما را وادار می کند در قالب کامپوننت فکر کنید. این شیوه ی تفکر برای ساختن رابط کاربری مناسب است. اگر تجربه ی این کار را نداشته باشید، در ابتدا کمی عجیب به نظر می رسد. مجبور می شوید با احتیاط و دقیق به به مفهوم state و اینکه مربوط به کدام قسمت است فکر کنید.

به دلیل سخت بودن مدیریت state ، انواع مختلفی از راه حل ها برای آن ارائه شده است. ما در این کتاب ابتدا درمورد مدیریت State صحبت می کنیم و سپس به پیاده سازی flux که با عنوان Alt شناخته می شود خواهیم رسید. پیاده سازی های مختلفی از جمله Redux, MobX و Cerebral نیز به عنوان جایگزین وجود دارند.

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

Virtual DOM

یکی از مشکلات در برنامه نویسی مدیریت State است. فرض کنیم که شما در حال نوشتن یک رابط کاربری هستید که می خواهید اطلاعات مشابه را در  آن نمایش بدهید. چگونه از ثابت ماندن دیتا مطمئن می شوید؟

ما معمولا مسئله ی DOM را با State اشتباه می گیریم و سعی می کنیم در آن فضا مشکل را حل کنیم. ری اکت این مشکل را با روش متفاوتی حل می کند. ری اکت مفهوم Virtual DOM را به ما معرفی می کند.

Virtual DOM روی DOM واقعی ، و گاهی روی سطح رندر، قرار دارد. این ابزار مشکل تغییر State را با روش خودش حل می کند. هرگاه تغییری مشاهده شود، بهترین راه را برای برگرداندن تغییرات به ساختار اصلی Dom پیدا می کند. می تواند تغییرات را در طول درخت مجازی مشابه شکل بالا گسترش دهد.

عملکرد DOM مجازی

این روش مدیریت تغییرات DOM منجر به افزایش کارکرد می شود. مدیریت دستی تغییرات DOM ناکارآمد و دشوار است. با سپردن این مشکل به یک ابزار مناسب، می توانید در زمان و انرژی خود صرفه جویی کنید.

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

مهم ترین مشکل DOM مجازی این است که پیاده سازی آن ری اکت را بسیار بزرگ می کند. برای برنامه ای با ری اکت باید انتظار سایز 150 تا 200 کیلوبایت را داشته باشید. Gzipp کردن می تواند به شما کمک کند اما باز هم برنامه ی بزرگی خواهید داشت.

راه حل هایی مانند preact  و react-lite به شما اجازه می دهند برنامه های کوچکتری داشته باشید اما برخی از کارکرد ها را محدود می کنند. اگر سایز برایتان اهمیت دارد این راهکار ها را در نظر داشته باشید.

کتابخانه هایی مانند  Matt-Esch/virtual-dom یا  paldepind/snabbdom به طور کلی روی DOM مجازی تمرکز می کنند. اگر به این نظریه علاقه دارید و می خواهید آن را بهتر درک کنید، این کتابخانه ها را ببینید.

رندر های ری اکت

همانطور که گفتیم رویکرد ری اکت آن را از وب متمایز می کند. می توانید برای پیاده سازی اینترفیس ها در پلت فرم های مختلف از آن استفاده کنید. در این مورد، ما از رندری به نام react-dom استفاده می کنیم. این رندر سرور و کاربر را پشتیبانی می کند.

Universal Rendering

می توانیم برای پیاده سازی رندر یونیورسال از react-dom استفاده کنیم. ایده ی کلی این است که رندرهای سرور اطلاعات را آماده  و برای کاربر (مشتری) ارسال می کند. این کار با جلوگیری از ایجاد چرخه های غیر ضروری عملکرد را بهبود می بخشد و برای اهداف SEO  نیز مفید است.

اگر چه این تکنیک ساده به نظر می رسد، پیاده سازی آن برای برنامه ی بزرگ تر دشوار است. اما باز هم ارزش دانستن را دارد.

گاهی اوقات استفاده از بخش سرور react-dom کافی است. مثلا می توانید از آن برای تولید صورت حساب و فاکتور استفاده کنید. این یک روش به کار گیری ری اکت است. به هرحال تهیه گزارش نیز یک نیاز همگانی است.

رندرهای موجود ری اکت

اگر چه React-dom پر کاربرد ترین رندر است، مواردی دیگری نیز وجود دارد که بهتر است با آن ها آشنا شوید:

• React Native: React Native یک فریم ورک و رندر برای پلت فرم های موبایل از جمله IOS و اندروید است. React Native را روی وب نیز می توانید اجرا کنید.
• react-blessed: react-blessed  به شما اجازه ی ساختن برنامه های ترمینال را با استفاده از ری اکت می دهد. حتی می توانید آن ها را متحرک کنید.
  • gl-react: gl-react اتصالات WebGL را برای ری اکت فراهم می کند. برای مثال می توانید با این روش shader بنویسید.
• react-canvas : react-canvas برای اجزای canvas، اتصالات ری اکت ایجاد می کند.

React.createElement و JSX

اگر با DOM مجازی کار کنیم، سطح بالایی از API برای مدیریت آن وجود دارد. یک برنامه ی ری اکت نوشته شده با جاوا اسکریپت API می تواند به صورت زیر باشد:

const Names = () => {

const names = ['John', 'Jill', 'Jack'];

return React.createElement(

'div',

null,

React.createElement('h2', null, 'Names'),

React.createElement(

'ul',

{ className: 'names' },

names.map(name => {

return React.createElement(

'li',

{ className: 'name' },

name

);

})

)

);

};

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

const Names = () => {

const names = ['John', 'Jill', 'Jack'];

return (

<div>

<h2>Names</h2>

{/* This is a list of names */}

<ul className="names">{

names.map(name =>

<li className="name">{name}</li>

)

}</ul>

</div>

);

};

می بینیم که کامپوننت لیستی از اسامی را در HTML رندر می کند. اگرچه شاید پرکاربرد ترین کامپوننت ممکن نباشد، قادر است ایده ی اساسی JSX را نشان دهد. ساختاری را برای ما فراهم می آورد که HTML را بازنمایی می کند. همچنین راهی برای نوشتن جاوا اسکریپت را با استفاده از براکت فراهم می کند.

در مقایسه با وانیلا HTML، ما داریم از Classname  به جای  Class استفاده می کنیم. ابن به دلیل این است که API از روی نام گذاری DOM مدل سازی شده است. ممکن است کمی طول بکشد تا به آن عادت کنید و شاید شوک JSX را نیز تجربه کنید و سپس بتوانید قدر آن را بدانید و ببینید که اعتبار سطح بالاتری به ما می دهد.

HyperScript یک جایگزین جالب برای JSX است که API مبنتی بر JavaScript  را برای ما مهیا می کند. می توانید از سینتکس های ری اکت در hyperscript-helpers استفاده کنید.

یک تفاوت زبانی میانی کامپوننت های ری اکت و اجزای ری اکت وجود دارد. در این مثال هرکدام از گره های JSX به یک جزء تبدیل می شوند. به عبارتی ، کامپوننت ها می توانند State داشته باشند در حالی که المنت ها به طور کلی ساده تر هستند. آن ها فقط آبجکت (شی) هستند. دن ابراموف در وبلاگ خود بیشتر درمورد این موضوع توضیح می دهد.

نتیجه گیری

حالا که درکی کلی از چیستی ری اکت داریم، می توانیم سراغ موضوع تکنیکی تری برویم. وقت انجام دادن پروژه های کوچک و اجراست.

https://survivejs.com/react/getting-started/introduction-to-react/