برنامه نویسی React چیست؟

React یکی از کتابخانه های جاوا اسکریپت است که از آن برای طراحی و ساخت رابط کاربری در برنامه های موبایلی و صفحات وب استفاده می شود. در مقاله پیش رو از رادار قصد داریم کمی بیشتر در رابطه با این پلتفرم برنامه نویسی به صحبت بنشینیم.

React چیست؟

زبان برنامه نویسی ری اکت در حقیقت یکی از کتابخانه های رایگان جاوا اسکریپت است. تیم فیسبوک در سال 2011 به جهت ماژولار ساختن رابط کاربری خود اقدام به طراحی زبان React js نمود. پس از آن نیز جامعه توسعه دهندگان و شرکت های فعال در عرصه تکنولوژی آن را گسترش دادند. این زبان Open source برای ساخت اجزاء UI و رابط کاربری در وب اپلیکیشن های تک صفحه ای و نرم افزارهای موبایلی مورد استفاده قرار می گیرد.

طراحی رابط کاربری (front-end) به کمک ری اکت امکان ایجاد ماژول های مختلفی را می دهد که قابلیت استفاده در پروژه های مختلف و بخش های متعدد یک نرم افزار را فراهم می آورد. اما باید بدانید که برای کار با این کتابخانه قدرتمند باید آشنایی کافی با زبان جاوا اسکریپت را داشته باشید. جاوااسکریپت زبانی است که از آن در پویاسازی صفحات و المان های رابط کاربری استفاده می شود.

تاریخچه React

ری اکت برای اولین بار توسط فردی به نام جردن والک، یکی از مهندسین نرم افزار در شرکت فیس بوک طراحی شد، ری اکت اولین بار در سال 2011 میلادی در فیس بوک و در سال 2012 در اینستاگرام استفاده شد.سر انجام نسخه اول کتابخانه React JS در تاریخ 29 مه 2013 منتشر شد، از همان روز های اول انتشار ری اکت بسیار مورد توجه برنامه نویسان حوضه وب قرار گرفت و تا به امروز رو به رشد بوده است، در حال حاضر بیش از 94,000 وب سایت از کتابخانه React JS استفاده می کنند.

ویژگی‌های React Js چیست؟

بگذارید نگاهی دقیق تر به برخی از ویژگیهای مهم React بیندازیم.

در React ، به جای استفاده از جاوا اسکریپت معمولی، از JSX برای قالب بندی(templating) استفاده می‌شود. JSX یک فرمت جاوا اسکریپت ساده است که برای ایجاد DOMهای HTML در قالب یک کامپوننت است.

React Native

Native React یک فریمورک جاوا اسکریپتی برای توسعه اپ‌های موبایل به صورت native برای ios، اندروید، وب و حتی UWP (پلتفرمی برای ساخت برنامه‌های تحت ویندوز، ویندوز موبایل، Xbox و سایر محصولات مایکروسافت) است که در سال 2015 توسط فیس بوک معرفی شد، این فریمورک بر پایه زبان جاوا اسکریپت و کتابخانه React است. یعنی شما با تسلط بر React می توانید در یادگیریReact Native خیلی جلوتر از بقیه باشید. البته توجه داشته باشید که بین ری‌اکت وNative React تفاوت های اساسی وجود دارد.

برخلاف React که تمرکز اصلی آن روی مرورگر است، React Native برای ساخت اپ‌های موبایل استفاده می‌شود.

در واقع React Native محیطی را مهیا کرده است که برنامه نویسان وب بتوانند اپلیکیشن‌هایی بسازند که دقیقا شبیه به برنامه‌های نوشته شده به زبان Native رفتار کند.

Single-Way data flow

در React، مجموعه‌ای از value های تغییر ناپذیر بین کامپوننت‌ها به عنوان ویژگی‌هایی(properties) در برچسب‌های HTML منتقل می‌شوند. کامپوننت‌ها به طور مستقیم نمی‌توانند هیچ یک از ویژگی‌ها (properties) را تغییر دهند اما میتوان آن‌ها را به call back function انتقال دهند و به کمک آن‌ها تغییرات را انجام دهند. این فرآیند به طور کامل با “properties flow down; actions flow up” شناخته می‌شود.

Virtual Document Object Model

ری‌اکت یک ساختار کش in-memory ایجاد می‌کند. در این ساختار اگر تغییری رخ داده باشد DOM را بروزرسانی می کند. برنامه نویس با این ویژگی فوق العاده میتواند درحالی که در یک wtpi تغییرات ایجاد میشود تنها کامپوننتی rerender شود که تغییر پیدا کرده است. Virtual DOM مانند DOM یک درخت از گره‌هایی هست که شامل element ها و attributes هایشان و محتوا به عنوان objects است. متد render() یک درخت از کامپوننت های ری اکت ایجاد می‌کند و تغییر در هر کامپوننت باعث می شود این گره بروزرسانی شود.

نحوه عملکرد React چگونه است؟

برای این که بتوانیم کتابخانه ری اکت را در برنامه فراخوانی نموده و از قابلیت های آن استفاده کنیم، لازم است در قدم اول یک Div در Html ایجاد نماییم. سپس در این Div به کمک نام دهی، اقدام به فراخواندن اسکریپت ها خواهیم نمود. به این ترتیب می توان از قدرت React در طراحی فرانت اند برنامه استفاده کرد.

React از سینتکس JSX استفاده می کنه، یعنی چی؟

خب همون طور که اطلاع دارین کتابخونه ری اکت از سینتکسی به اسم JSX استفاده می کنه. Jsx مخفف Java Script XML هست. واسه این که نحوه نوشتن این سینتکس رو یاد بگیرین باید با مفهوم XML آشنا باشین.اگه بخوام خیلی خیلی ساده و خلاصه توضیح بدم، XML رو همون HTML در نظر بگیرین اما با این تفاوت که تو Html تگ های از پیش تعیین شده وجود دارن که فقط مجاز به استفاده از این تگ ها هستیم و نمی تونیم از تگ هایی با اسم دلخواه استفاده کنیم. به عنوان مثال نمی تونیم از تگی به اسم <Amin> استفاده کنیم.اما شما تو XML می تونین تگ هایی با اسامی دلخواه رو ایجاد کرده و ازشون استفاده کنین. داخل ری اکت هم شما می تونین قسمت های مختلف وب سایتتون رو با اسم های دلخواه ایجاد کرده و استفاده کنین.حالا Jsx یعنی این که ما بیایم داخل صفحات جاوا اسکریپت کد هایی در قالب Html و Xml بنویسیم. به همین دلیل تو پروژه هایی که با ری اکت توسعه داده میشن هیچ خبری از فایل Html نیست و تمام کد های Html توسط فایل های جاوا اسکریپت Render میشن.

چرا یادگیری React برای برنامه نویسان لازم است؟

اغلب فریم ورک های برنامه نویسی عمر کوتاهی دارند و در مدت محدودیتی کنار گذاشته می شوند. به همین دلیل برنامه نویسان فرصت کافی برای یادگیری تمام فریمورک ها و استفاده از آن ها را ندارند. در این راستا افراد عقیده دارند با وجود کتابخانه و فریمورک های Open source موجود همانند انگولار، چه نیازی به یادگیری ری اکت خواهند داشت؟

در پاسخ به این افراد باید بگوییم ری اکت یک کتابخانه راحت است که یادگیری آن زمان کمی از شما خواهد گرفت. برنامه های نوشته شده با این کتابخانه قابلیت تست پذیری سریع دارند و به راحتی می توان آن ها را مورد ارزیابی قرار داد. نوشتن اپلیکیشن برای سیستم عامل های اندروید و iOS توسط React Native با کامپوننت های یکسان امکان پذیر است. این امر موجب سرعت بخشیدن به توسعه برنامه های موبایلی خواهد شد. از این رو اگر به دنبال یادگیری روشی راحت در برنامه نویسی هستید که به روز بوده و ارزش ریسک کردن را داشته باشد، پیشنهاد ما ری اکت جی اس می باشد.

مزیت های React js چیست؟

– React js امکان طراحی برنامه های ماژولار را فراهم می آورد. به این ترتیب می توان از کامپوننت های طراحی شده چندین بار استفاده نمود.

2- ابزارهای در دسترس ری اکت بسیار گسترده بوده و می توان از ابزارها و کتابخانه های منبع باز آن به طور وسیع بهره گرفت.

3- ساختار درختی برنامه های React موجب انعطاف پذیری بالای نرم افزارها شده و نگهداری و به روز رسانی آن ها بسیار راحت است. این مزیت موجب صرفه جویی در زمان و هزینه های ساخت برنامه خواهد شد.

4- سرعت و عملکرد بالای برنامه های نوشته شده با ری اکت موجب بهبود SEO آن ها برای موتورهای جستجو خواهد شد.

5- یادگیری این کتابخانه تنها با دانش کافی با JS در کوتاهترین زمان انجام می شود.

6- فریمورک React Native امکان توسعه اپلیکیشن های موبایل چند پلتفرمی برای Android و iOS را فراهم آورده است.

چرا React Js ؟

سوال اصلی که پیش میاد این است که چرا باید از ReactJs استفاده کنیم؟ تعداد زیادی کتابخونه و فریمورک open-source برای ساختن فرانت اند وب اپلیکیشن‌ها مانند انگولار وجود دارد که خیلی ساده تر از React هستند. خیلی سخت است که زمانی را به یاد گرفتن فریمورک های جدید اختصاص بدهیم به خصوص که عمر خیلی از این فریمورک ها بسیار کوتاه است و فرصت ریسک کردن را نداریم. بنابراین اگر شما به دنبال یک تکنولوژی هستید که جز بهترین‌های حوزه خودش باشد و ارزش ریسک را داشته باشد، پیشنهاد میکنیم حتما ری اکت را امتحان کنید.

سادگی

درک کردن مفاهیم React بسیار ساده است. رویکرد مبتنی بر کامپوننت،lifecycle هایی که به بهترین نحو تعریف شده که کاملا مشخص و واضح هستند و استفاده از جاوا اسکریپت React را برای یادگیری و ساخت وب اپلیکیشن‌های حرفه‌ای آسان می کند. React از یک syntax ویژه با نام JSX استفاده می‌کند که اجازه می‌دهد HTML و جاوا اسکریپت را ترکیب کنید. لازم نیست که حتما از JSX برای templating استفاده کنید و برنامه نویس هنوز هم میتواند از جاوا اسکریپت برای این کار استفاده کند ولی اگر با JSX این کار را انجام دهید، دیگر به هیچ عنوان از جاوا اسکریپت برای templating استفاده نخواهید کرد.

یادگیری راحت

هر کسی با داشتن پیش زمینه ای از برنامه نویسی به راحتی می تواند React را یاد بگیرد در حالی که Angular و Ember از یک “Domain specific Language” استفاده می‌کنند که یادگیری آن بسیار سخت است. برای یادگیری React شما باید یک دانش مختصر در مورد HTML , CSS و جاوا اسکریپت داشته باشید.

رویکرد Native

همانطور که در ابتدای مقاله گفتیم React Native بر پایه جاوا اسکریپت و React است. پس تمام ویژگی‌هایی که برای React بیان کردیم در React Native هم صدق می‌کند. به علاوه کد‌های بین دو پلتفرم Android و IOS مشترک است و کامپوننت‌هایی که می نویسید میتونید در چندین پروژه از آنها استفاده کنید.

عملکرد

هیچ container از پیش ساخته شده برای dependency ندارد. و می توانید از ماژول‌های Browserify, Require JS, EcmaScript 6 با استفاده از Babel استفاده کنید که به طور خودکار به dependencies اضافه می شود.

تست پذیری

برنامه های ReactJS فوق العاده آسان میتوان آنها را تست کرد. بنابراین می‌توانیم توابع و کامپوننت های خودمون رو با پاس دادن پارامترها و state ها و خروجی‌ها رو چک کنیم.

امیدوارم که از این مقاله لذت برده باشید و تونسته باشیم به شما برای انتخاب ری اکت کمک کرده باشیم.