برنامه نویسی - طراحی وب

امروز می خواهیم به شما اولین بخش از سری آموزشی React همچنین نحوه کار با Dom مجازی را ارائه کنیم که به شما کمک می کند مهارت کامل را با کتابخانه ی Reactفیس بوک پیدا کنید. قبل از این که به همه چیز  معنی ببخشیم مهم است یک سری مفاهیم را یاد بگیریم پس بیاین شروع کنیم.

React چیست؟

React کتابخانه UI فیس بوک هست که برای تولید اجزای UI قابل استفاده و تعاملی، توسعه یافته است. برای تولید فیس بوک از آن استفاده شده و اینستاگرام هم کاملا در React نوشته شده است.

یکی از ویژگی های جذاب آن این است که نه تنها بر روی کلاینت قابل اجراست بلکه می توان در سمت سرور نیز از آن بهره برد و سرور و کلاینت می توانند براحتی با یکدیگر کار کنند.

هم چنین از مفهومی به نام DoM مجازی استفاده می کند که به شکل منتخب، Node هایی که تغییر کنند را اجرا می کند. این سرویس به شما اجازه ی دستکاری در DOM مجازی را می دهد تا بتوانید بروز بمایند.

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

نامش 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 وجود دارند و می توان در هنگام رندر از آن ها استفاده کرد.

Spها, چرخه ها و وضعیت

روش render فقط برای تولید Spec در یک کامپوننت مورد نیاز است اما روش های چرخه ای دیگری نیز می تواند برای انجام کار های مختلف مورد نظر قرار بگیرد.

روش های چرخه ای

در این جا چند روش در React  که باید آن ها را بشناسید آورده ایم.

• ComponentWillMount: یک بار فراخوانی می شود هم در سرور و هم در کلاینت قبل از اجرا.
• ComponentDidMount: یک بار فراخوانی می شود هم در سرور و هم در کلاینت بعد از اجرا.
• ShouldComponentUpdate: مقدار برگشتی معلوم می کند که باید بروز رسانی شود یا نه .
• ComponentWillUnmount: قبل از رها سازی کامپوننت مورد استفاده قرار می گیرد.

SPEC ها

• GetInitialState: مقدار برگشتی اولین مقدار برای شروع است.
• GetDefaultProps: مقدار تعیین شده ای برای خصیصه ها تعیین می کند.
• Mixins: مجموعه ای از شی ها که برای کاربرد کامپوننت مورد استفاده قرار می گیرند.

روش های مختلف زیادی در ای زمینه وجود دارند که در لینک زیر می توانید آن ها را بخوانید.

وضعیت State

هر کامپوننت یک شئ state و یک شئ props دارد. اولی برای استفاده از روش SetState به کار می رود. با این فراخوانی UI بروز می شود و اگر بخواهیم مقدار اولیه را قبل از اجرا تعیین کنیم باید از GetInitialState استفاده کرد.

در ادامه این روش را ببینیم :

Event (رخداد ها):

React هم چنین در خود یک سیستم رخداد بین مرور گر ها دارد. این ها خصیصه هایی برای کامپوننت بوده و قابل فراخوانی اند. بیایید این پیشرفت را در ادامه ببینیم:

جریان داده بدون مسیر

در react داده های برنامه ها به شکل مستقل و بدون مسیر از طریق state و props در جریان اند که بر خلاف روش های کتابخانه های دیگر مثل Angular است. این بدان معنی است که در سلسله مراتبی که چند کامپوننت وجود دارند باید یک کامپوننت اصلی، وضعیت props  و state را مشخص کند.

State شما باید با استفاده از SetState بروز رسانی شود تا مطمئن شوید که UI رفرش می شود. اگر لازم بود مقادیری که نتیجه می گیرید باید به کامپوننت های زیر مجموعه بروند و از طریق this.props قابل دسترسی باشند.

مثالی از این مفهوم را در زیر ببینید.