هر کامپوننتی در React یک چرخه زندگی دارد. زمانیکه یک کامپوننت را به روش React.createClass یا React.Component تعریف میکنیم و در ReactDOM.render نمونه‌ای از کامپوننت را برای نمایش در مرورگر می‌سازیم، چرخه حیات آن شروع میشود. ReactDOMServer کتابخانه ReactDOMServer جهت ساخت یا render کردن کامپوننت‌ها در سمت سرور استفاده میشود. توسط این کتابخانه میتوانیم کامپوننت‌ها را در سمت سرور ایجاد کنیم و نتیجه آن را که تگ‌های HTML هستند به مرو ...

تا به اینجا مثال‌هایی که زده‌ایم تاثیر کامپوننت‌های React را بر روی UI، نشان دادند. در این بخش به رویداد‌های سمت UI و ورودی‌های کاربر می‌پردازیم. رویداد‌‌های ترکیبی React React روش مدیریت رویداد‌های خودش را دارد و به آنها رویداد‌های Synthetic یا ترکیبی گفته میشود. در زیر مقایسه‌ای داریم از رویداد‌های معمول در JavaScript و رویدادهای React و تفاوت‌ها را بررسی میکنیم. <!-- HTML Buttons --> <button type="button ...

تا اینجای کار ساخت کامپوننت‌ها را با React.createClass که تفاوتی با توسعه (ارث بری) از کلاس React.Component ندارد، انجام داده‌ایم. اما ساخت کامپوننت‌ها به صورت یک تابع هم مزیت‌هایی را دارد. اول از همه باید بدانیم که ساخت کامپوننت توسط تابع، بدون وضعیت خواهد بود که به آن Stateless میگویند. به دلیل نداشتن وضعیت، کامپوننت‌های تابعی را کمی بهتر میشود برای استفاده مجدد به کار برد. در کامپوننت‌های غیر تابعی که Stateful هستند به دلیل احتمال وابس ...

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

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

همانطور که در قسمت اول گفته شد، اجزای رابط کاربری (تگ‌های HTML) در کتابخانه‌ی React به عنوان کامپوننت‌ها (مؤلفه‌های جزء) شناخته میشوند. React تگ‌ها را به عنوان اجزایی مستقل و با وضعیتی مشخص در حافظه میشناسد. دلایل ارزشمند بودن این روش در ادامه بررسی میشود. خوانایی بهتر (Readability) React میتواند تگ‌های یگانه یا مخلوطی از تگ‌های به هم مرتبط را در پس زمینه ساخته و با یک نام واحد (کامپوننت) به HTML DOM ارسال کند. یعنی اگر جایی ...

برای شروع به نصب و پیکربندی، باید بدانیم به چه چیزهایی احتیاج داریم. قطعا به کتابخانه React نیاز داریم. اما بسته به نوع کدنویسی که میخواهیم در پیش بگیریم، احتمالا به کتابخانه‌های دیگری هم احتیاج پیدا خواهیم کرد. در قسمت قبل نحوه‌ی ساخت یک تگ HTML، با React آورده شد. دوباره به آن نگاهی بیاندازیم: var ClickableImage = function (props) { return ( <a href={props.href}> <img src={props.src} /> ...

در این سری مقالات، مروری بر کتابخانه ReactJS خواهیم داشت. به طور کلی با آن آشنا می‌شویم، برای Visual Studio Code پیکربندیش میکنیم و قابلیت‌های مختلف کتابخانه را بررسی میکنیم. هر چند که مثالها در کل ساده هستند، اما پیش نیاز درک کامل آنها، آشنا بودن خواننده با HTML DOM، JavaScript و Ajax است. در قسمت اول، کتابخانه را معرفی و مثال‌هایی از امکانات اصلی آن‌را مرور میکنیم. React یک کتابخانه متن‌باز جاوااسکریپتی، برای ساخت رابط کار ...