آموزش React.js و کاربرد Dom مجازی
بلاگ آکادمی لرن فایلز
طرح تخفیف «به افتخار کوروش بزرگ» فعال شد با ۷۵و۸۵ درصد تخفیف-۴۸ساعته
دریافتآموزش React.js و کاربرد Dom مجازی
بلاگ آکادمی لرن فایلز
امروز می خواهیم به شما اولین بخش از سری آموزشی React همچنین نحوه کار با Dom مجازی را ارائه کنیم که به شما کمک می کند مهارت کامل را با کتابخانه ی React فیس بوک پیدا کنید. قبل از این که به همه چیز معنی ببخشیم مهم است یک سری مفاهیم را یاد بگیریم پس بیاین شروع کنیم.
React کتابخانه UI فیس بوک هست که برای تولید اجزای UI قابل استفاده و تعاملی، توسعه یافته است. برای تولید فیس بوک از آن استفاده شده و اینستاگرام هم کاملا در React نوشته شده است.
یکی از ویژگی های جذاب آن این است که نه تنها بر روی کلاینت قابل اجراست بلکه می توان در سمت سرور نیز از آن بهره برد و سرور و کلاینت می توانند براحتی با یکدیگر کار کنند.
هم چنین از مفهومی به نام DoM مجازی استفاده می کند که به شکل منتخب، Node هایی که تغییر کنند را اجرا می کند. این سرویس به شما اجازه ی دستکاری در DOM مجازی را می دهد تا بتوانید بروز بمایند.
فرض کنید که یک شئ دارید و آن را به شکل یک انسان مدل سازی کرده اید. این شئ هر خصیصه ای که یک انسان داشته باشد را دارد و شرایط کنونی یک انسان را اجرا می کند . این دقیقا کاری است که React با DOM مجازی انجام می دهد.
حالا فکر کنید که اگر شما آن شئ را گرفته و تغییراتی در آن ایجاد کنید چه می شود. برایش سبیل بذارید برایش عضله بگذارید و چشم هایی شبیه به استیو بوشمی. در سرزمین React وقتی این تغییرات را ایجاد می کنیم دو اتفاق می افتد;اولی این که React یک الگوریتم شناسایی دارد که تشخصی می دهد تغییراتی انجام شده است.مرحله ی دوم هماهنگی است که Dom را با تغییرات ایجاد شده بروز رسانی می کند.
روشی کاری Dom آن است که به جای تغییر شخص، از اول بازو ها و صورتش را تغییر می دهد. این بدان معنی است که اگر متنی در یک ورودی داشته باشید , اگر برنامه ریزی برای Node اصلی اش وجود نداشته باشد متن، بدون تغییر باقی خواهد ماند.
به خاطر این که React از یک Dom مجازی یا تقلبی استفاده می کند و نه واقعی, یک سری امکانات جالب دیگر نیز دارد. می توان Dom مجازی را بر روی سرور اجرا و نمایش داد.
بیاین شروع کنیم
برای شروع با React باید ابزار CLI React نصب کنید و فرمان زیر را برای ایجاد یک برنامه ی جدید اجرا کنید.
می توانید از JSFiddle که ارائه شده استفاده کنید:
https://jsfiddle.net/reactjs/69z2wepo/
بعد از اجرا صفحه شما باید آموزش React.js ،React-dom.js و متن کامپایلر babel را نیز به کد ها اضافه کنید. سپس کد خود را در Node با نوع text/babel بنویسید:
در React بخش های کد نویسی بر روی یک Div سوار می شوند پس ما MyDiv را به عنوان فضای اصلی در نظر میگیریم. با وجود این که این کار راحت ترین روش شروع است، وقتی که خواستیم چیزی بسازیم باید از Browserify و یا Webpack برای ایجاد کد ها در فایل های جداگانه استفاده کنیم.
به بخشهای اصلی React، کامپوننت می گوییم. بیاید یک مثال بنویسیم:
اگر تا به حال از این موارد ندیده باشید با خود خواهید گفت این چه جور جادوی جاوا اسکریپتی است که اتفاق می افتد.
نامش JSX است که جایگزینی برای زبان XML جاوا است. این به ما اجازه می دهد تا تگ های HTML را در جاوا اسکریپت بنویسید. البته HTML کمی اغراق است فقط یک سری شباهت ها وجود دارد و شما در واقع فقط بازنویسی شی XML را می نویسید.
برای تگ های معمولی html از ویژگی class به شکل className استفاده می کنیم و از for به شکل htmlFor چون که این ها کلماتی هستند که توسط جاوا اسکریپ رزرو شده اند. سایر تفاوت ها را می توانید در لینک زیر ببینید:
https://facebook.github.io/react/docs/jsx-gotchas.html
اگر به JSX نیازی نباشد کد نویسی به شکل زیر خواهد بود :
برای دیدن عنوان های بیشتر میتوانید به لینک زیر بروید:
https://facebook.github.io/react/docs/tags-and-attributes.html
در اولین نگاهمان به موضوع دیدید که /** @jsx React.DOM */ در بالای متن وجود دارد؟!این خیلی مهم است چون که به React اعلام می کند ما از JSX استفاده می کنیم و باید این انتقال انجام گیرد تا نیازی به تاکید دوباره، هنگام استفاده از JSX نباشد.
وقتی از روش render مثل شکل بالا استفاده می کنیم، اولین جمله کامپوننتی است که می خواهیم اجرا کنیم و دیگری node است که باید برنامه بر روی آن اجرا شود. می توان از روش createClass استفاده کرد تا کلاس های دلخواه ایجاد نمود. بیاین یک نمونه با هم بنویسیم:
بعد از ایجاد کلاس مورد نظر آن را در سندتان به شکل زیر اجرا کنید:
وقتی ما از کامپوننت های مشخص شده استفاده می کنیم می توان ویژگی های خاصی به آن ها داد که Props نام دارند. این ویژگی ها در کامپوننت ما به شکل this.props وجود دارند و می توان در هنگام رندر از آن ها استفاده کرد.
روش render فقط برای تولید Spec در یک کامپوننت مورد نیاز است اما روش های چرخه ای دیگری نیز می تواند برای انجام کار های مختلف مورد نظر قرار بگیرد.
در این جا چند روش در React که باید آن ها را بشناسید آورده ایم.
روش های مختلف زیادی در ای زمینه وجود دارند که در لینک زیر می توانید آن ها را بخوانید.
هر کامپوننت یک شئ state و یک شئ props دارد. اولی برای استفاده از روش SetState به کار می رود. با این فراخوانی UI بروز می شود و اگر بخواهیم مقدار اولیه را قبل از اجرا تعیین کنیم باید از GetInitialState استفاده کرد.
در ادامه این روش را ببینیم :
React هم چنین در خود یک سیستم رخداد بین مرور گر ها دارد. این ها خصیصه هایی برای کامپوننت بوده و قابل فراخوانی اند. بیایید این پیشرفت را در ادامه ببینیم:
در react داده های برنامه ها به شکل مستقل و بدون مسیر از طریق state و props در جریان اند که بر خلاف روش های کتابخانه های دیگر مثل Angular است. این بدان معنی است که در سلسله مراتبی که چند کامپوننت وجود دارند باید یک کامپوننت اصلی، وضعیت props و state را مشخص کند.
State شما باید با استفاده از SetState بروز رسانی شود تا مطمئن شوید که UI رفرش می شود. اگر لازم بود مقادیری که نتیجه می گیرید باید به کامپوننت های زیر مجموعه بروند و از طریق this.props قابل دسترسی باشند.
مثالی از این مفهوم را در زیر ببینید.
حالا که بخشی از ویژگی های اصلی react را فراگرفته اید می توانید با react API در لینک زیر آشنا شوید:
https://facebook.github.io/react/docs/top-level-api.html
با لرن فایلز همراه باشید !