آموزش ری اکت

آنچه در این صفحه می خوانید:

• معرفی ری اکت (React)
  • تاریخچه ری اکت (React)
  • آیا ری اکت کتابخانه است یا فریمورک؟
  • آیا ری اکت بک اند است یا فرانت اند؟
  • ویژگی های ری اکت (React)
  • چرا باید از ری اکت استفاده کنیم؟
• کاربرد ری اکت (React)
• ری اکت چگونه کار می کند؟
  • ری اکت و ریداکس (Redux)
  • ری اکت و وب پک (Webpack)
• مقایسه ری اکت و انگولار
• ری اکت در وردپرس
• توسعه اپلیکیشن با ری اکت
• مثال های ری اکت (React)

معرفی ری اکت (React)

ری اکت (React) (همچنین به عنوان React.js یا ReactJS شناخته می شود) یک کتابخانه جاوااسکریپت برای ایجاد رابط کاربری است. این برنامه توسط فیس بوک و جامعه ای از توسعه دهندگان و شرکت های خاص نگهداری می شود. React را می توان به عنوان پایه ای در توسعه برنامه های تک صفحه ای یا موبایل استفاده کرد. با این وجود React فقط به ارائه داده به DOM مربوط می شود و بنابراین ایجاد برنامه های React معمولاً نیاز به استفاده از کتابخانه های اضافی برای مدیریت state، مسیریابی و تعامل با API دارد. ریداکس (Redux)، React Router و axios نمونه های مربوط به چنین کتابخانه هایی هستند.

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

تاریخچه ری اکت (React)

در سال 2013 جردن واک، فریمورک اوپن سورس و جاوااسکریپتی به نام React.js را منتشر کرد. ابتدا در سال 2011 مورد استفاده فیسبوک بود اما در سال 2012 اینستاگرام هم از آن بهره برد. امروزه سایت های زیادی مانند Netflix،Imgur، بلیچر رپورت، فیدلی، ایر بی‌ان‌بی از آن استفاده می کنند. چون این سایت ها بزرگ و دارای داده‌های متغیر Realtime هستند، React.js فریمورک مناسبی برای آنها است. همچنین، شکل برنامه‌ی کاربردی را در هر زمان نشان می دهد. هنگامی که داده‌ها عوض می شوند، ری اکت قسمت‌هایی از برنامه که نیاز به بروزرسانی دارند را شناسایی می کند، سپس تنها آن قسمت‌ها را رندر می‌کند. در سال 2019 نسخه 16.8 برای عموم منتشر شد.

آیا ری اکت کتابخانه است یا فریمورک؟

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

تعاریف مختلفی برای کتابخانه و فریمورک وجود دارد:

• فریمورک نرم افزاری است که کدهای خود را به آن وصل می کنید.
• یک کتابخانه نرم افزاری است که به کد خود وصل می کنید.

از نظر این تعریف، React یک فریمورک است. اما برخی از افراد، به ویژه در دنیای فرانت اند، می گویند که یک فریمورک باید مواردی مانند روتر و یا ویجت و غیره را در پی داشته باشد. بنابراین انگولار، امبر جی اس (Ember.js) و ExtJS فریمورک هستند، اما در مورد React اینطور نیست، زیرا این وسیله فقط به شما این امکان را می دهد تا کامپونت ها را بسازید و آنها را به DOM تبدیل کنید.

آیا ری اکت بک اند است یا فرانت اند؟

ری اکت یک فریمورک فرانت اند منبع باز است که مبتنی بر جاوا اسکریپت می باشد و توسط فیس بوک توسعه یافته است. ری اکت بیشتر به دلیل ویژگی DOM مجازی شناخته شده است. برای کار با React، ما Express را به عنوان سرویس بک اند توصیه می کنیم.

ویژگی های ری اکت (React)

اعلامی (Declarative)

React ایجاد UI های تعاملی را بی دردسر می کند. نماهای ساده ای را برای هر حالت در برنامه خود طراحی کنید. با تغییر داده ها، کامپوننت های درست را به روز کرده و ارائه دهید. نماهای اعلامی کد شما را قابل پیش بینی و برای اشکال زدایی آسان تر می کند.

مبتنی بر کامپوننت (Component-Based)

اجزای کپسوله شده ای را که حالت خاص خود را مدیریت می کنند، بسازید و سپس آنها را برای ایجاد UI های پیچیده ترکیب کنید. از آنجا که منطق کامپونت ها به جای الگوها در JavaScript نوشته شده است، شما می توانید به راحتی داده های غنی را از طریق برنامه خود منتقل کنید و وضعیت را از DOM خارج کنید.

یک بار یاد بگیرید، هر کجا بنویسید.

می توانید بدون بازنویسی مجدد کد موجود، ویژگی های جدیدی در React ایجاد کنید. React همچنین می تواند با استفاده از Node و سرور برنامه های تلفن همراه را با استفاده از React Native بر روی سرور ارائه دهد.

چرا باید از ری اکت استفاده کنیم؟

منحنی یادگیری سریع

React کتابخانه بسیار ساده و سبک است که فقط با لایه نمایش سر و کار دارد. هر توسعه دهنده Javascript می تواند اصول اولیه را بفهمد و شروع به توسعه برنامه وب بسیار جذاب کند. همانطور که راهنمای React می گوید: "فکر کردن در مورد ری اکت واقعی" ممکن است کمی متفاوت از گذشته باشد، زیرا رویکرد جدیدی را در جدول به ارمغان می آورد و با کسب تجربه با آن بسیار آسان تر یادگیری خواهید کرد.

مولفه های قابل استفاده مجدد

React ساختار مبتنی بر مؤلفه را ارائه می دهد. مولفه ها الگوی شما هستند. شما با اجزای ریز مانند دکمه، کادر انتخاب، کشویی و غیره شروع می کنید و اجزای بسته بندی را از آن اجزای کوچکتر ایجاد می کنید و سپس شما اجزای بسته بندی سطح بالاتر را می نویسید و به همین ترتیب تا زمانی که این یک کامپوننت اصلی را داشته باشید و آن کامپوننت برنامه شما باشد، ادامه می یابد.

هر مؤلفه تصمیم می گیرد که چگونه باید ارائه شود. هر مؤلفه منطق درونی خود را دارد. این رویکرد نتایج حیرت انگیزی دارد. می توانید در هر کجا که بخواهید از مولفه ها استفاده کنید. در نتیجه:

1. برنامه شما از UI و یو ایکس (UX) مداوم برخوردار است.
2. استفاده مجدد از کد، حفظ و رشد پایگاه داده خود را آسانتر می کند.
3. توسعه برنامه شما راحت تر است. این ساختار مبتنی بر مؤلفه کمک می کند تا برنامه های وب با مقیاس بزرگ ایجاد شود.

برای مثال، همه قسمت های فرم به عنوان مؤلفه ها در ویرایشگر فرم مورد استفاده قرار می گیرند (جایی که فرم های خود را می سازید) و در شکل واقعی (همانطور که فرم ها را با استفاده از Javascript در سمت سرور به عنوان html ارائه می دهیم) استفاده می شود.

رندر سریع با Virtual DOM

وقتی می خواهید برنامه وب ایجاد کنید که شامل تعامل زیاد کاربر و مشاهده به روزرسانی ها است، شما باید مشکلات مربوط به عملکرد را در نظر بگیرید. اگرچه موتورهای جاوا اسکریپت امروز به اندازه کافی سریع هستند که چنین برنامه های پیچیده ای را اداره می کنند، DOM هنوز به این سرعت انجام نمی شود. به روزرسانی DOM، معمولاً در هنگام عملکرد وب، دارای تنگناهایی است. React سعی دارد با استفاده از چیزی بنام DOM مجازی، این مشکل را حل کند. DOM در حافظه نگه داشته می شود. هرگونه تغییر نمای ابتدا به DOM مجازی منعکس می شود، سپس الگوریتم diff کارآمد حالت های قبلی و فعلی DOM مجازی را مقایسه می کند و بهترین راه (حداقل مقدار به روزرسانی های مورد نیاز) را برای اعمال این تغییرات محاسبه می کند. سرانجام این به روز رسانی ها برای اطمینان از حداقل زمان خواندن و نوشتن روی DOM اعمال می شوند. این دلیل اصلی عملکرد بالای React است.

انتزاع تمیز

یكی از نكات قدرتمند React این است كه انتزاع مناسبی را ارائه می دهد و این بدان معنی است که هیچ موضوع درونی پیچیده ای را در معرض کاربر قرار نمی دهد. این را با این زاویه مقایسه کنید: چرا باید روی زمین مجبور شوید فرایند داخلی مانند چرخه هضم را یاد بگیرید؟ این نوع جزئیات بهتر است به عنوان موضوعات داخلی نگه داشته شود تا انتزاعی تمیز ارائه دهد. شما فقط باید چرخه زندگی، مؤلفه ها و پیشنهادات مؤلفه را بفهمید تا بتوانید ری اکت را برای تحقق بخشیدن به همه موارد مورد نیاز خود انجام دهید. React هیچ الگویی یا معماری مانند MVC / MVVM را دیکته نمی کند، فقط در مورد لایه نمایش است و شما آزاد هستید که معماری برنامه خود را به هر شکلی که مناسب می بینید طراحی کنید.

ابزارهای توسعه دهنده عالی

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

• React Developer Tools
• Redux Developer Tools

هر دو می توانند به عنوان پسوندهای Chrome نصب شوند. ابزارهای React Developer برای بررسی اجزای ری اکت در سلسله مراتب آنها بسیار عالی است و همچنین برای مشاهده حالت ها و حالات فعلی آنها بسیار عالی است. اگر از کتابخانه Redux استفاده می کنید، مطمئناً باید به Redux Developer Tools برای Chrome نگاهی بیندازید. شما می توانید اقدامات ارسال شده، حالت های فروشگاه فعلی را مشاهده کرده و تغییرات را در فروشگاه ها مشاهده کنید. همچنین می توانید اقدامات را ارسال کنید یا فروشگاه ها را تغییر دهید و فوراً تغییرات منعکس شده در نمای خود را مشاهده کنید. از آنجا که تمام بروزرسانی ها در پسوند نگه داشته می شوند. می توانید برای اهداف اشکال زدایی به هر حالت برنامه خود برگردید.

کاربرد ری اکت (React)

React یک کتابخانه جاوا اسکریپت است که در زمینه کمک به توسعه دهندگان در ایجاد رابط های کاربری یا UI تخصص دارد. از نظر وب سایت ها و برنامه های وب، UI مجموعه ای از منوهای روی صفحه، نوارهای جستجو، دکمه ها و هر چیز دیگری است که کسی برای استفاده از یک وب سایت یا برنامه با آن تعامل دارد.

در تعریف رسمی React آمده است که این یک کتابخانه JavaScript برای ساخت رابط های کاربری است. درک دو قسمت مختلف این تعریف مهم است:

• React یک کتابخانه JavaScript است. این یک فریمورک یک سلوشن کامل نیست و ما اغلب برای ایجاد هر راه حلی باید از کتابخانه های بیشتری به همراه React استفاده کنیم.
• کاری که React واقعاً به خوبی انجام می دهد قسمت دوم تعریف است: ساخت رابط های کاربری. رابط کاربری هر چیزی است که ما در معرض دید کاربران قرار می دهیم تا با ماشین تعامل داشته باشند. رابط های کاربری در همه جا وجود دارد، از دکمه های ساده موجود در مایکروویو گرفته تا داشبورد شاتل فضایی. اگر دستگاهی که ما در حال رابط آن هستیم می تواند JavaScript را درک کند، می توانیم از React برای توصیف یک رابط کاربری برای آن استفاده کنیم.

ری اکت چگونه کار می کند؟

شاید تعجب کنید که می توانید کدهای HTML را در JavaScript بنویسید. این دقیقاً نحوه عملکرد React است. ایجاد نماینده گره DOM می تواند از طریق ایجاد عملکرد Element در React انجام شود. در اینجا نمونه ای از آن آورده شده است:

    React.createElement("div", { className: "red" }, "Children Text");
    React.createElement(MyCounter, { count: 3 + 5 });

همانطور که ممکن است متوجه شده باشید، سینتکس موجود در کد HTML فوق به کامپوننت های XML بسیار شبیه است. اما، به جای استفاده از کلاس DOM سنتی، React از className استفاده می کند. تگ های JSX دارای یک نام تگ، فرزند و خواص هستند. علائم نقل قول در صفات JSX رشته ها را نشان می دهد. این عنصر مشابه JavaScript است. علاوه بر این، ارزش ها و عبارات عددی باید درون یک براکت نوشته شوند. مثال بالا سینتکس را در React نشان می دهد زیرا این ابزار از پسوند JSX استفاده می کند. در اصل، این ترکیبی از HTML و JavaScript است.

در اینجا مثالی از React نوشته شده با JSX آورده شده است:

    <div className="red">Children Text</div>;
    <MyCounter count={3 + 5} />;
    var GameScores = {player1: 2,player2: 5};
    <DashboardUnit data-index="2">
    <h1>Scores</h1><Scoreboard className="results" scores={GameScores} />
    </DashboardUnit>;

برای تجزیه آن، در اینجا چندین نکته در مورد تگ HTML در بالا ذکر شده است:

• <MyCounter> نمایش یک علامت جالب به نام "count" است که بیان عددی را به عنوان مقدار آن نشان می دهد.
• GameScores ابزاری تحت اللفظی است که دارای دو جفت ارزش پیش بینی شده است.
• <DashboardUnit> بلوک XML است که در صفحه ارائه می شود.
• {GameScores}: scores ویژگی امتیازات از یک شیء امتیاز بازی که قبلاً تعریف شده است، می گیرد.

بیشتر قسمت React با استفاده از JSX و نه جاوااسکریپت استاندارد نوشته شده است. با این حال، باید توجه داشته باشید که تنها هدف از این کار ایجاد آسان تر اجزای React است. می توانید یک کامپوننت React را با JavaScript استاندارد ایجاد کنید. علاوه بر این، ایده استفاده از JSX در React این بود که فیسبوک (به عنوان توسعه دهنده اولیه) یک نوع خاص از پسوند نحوی با پیکربندی واضح و مبهم برای توسعه دهندگان ارائه دهد.

ری اکت و ریداکس (Redux)

ریداکس (Redux) یک کتابخانه اوپن سورس جاوااسکریپت برای مدیریت state برنامه است. بیشترین استفاده از کتابخانه هایی مانند ری اکت یا انگولار برای ایجاد رابط های کاربر است. شبیه به فیس بوک، توسط دن ابراموف و اندرو کلارک ایجاد شده است. Redux کتابخانه کوچک با API ساده و محدود است که به عنوان کانتینر قابل پیش بینی برای برنامه کاربردی طراحی شده است. این عمل با روشی مشابه به یک تابع کاهش دهنده، یک مفهوم برنامه نویسی کاربردی می پردازد.

در حالی که لزوماً از Reux استفاده نمی شود با React، بسیار توصیه می شود زیرا آنها خیلی خوب با یکدیگر بازی می کنند. React و Redux ایده ها و خصوصیات زیادی دارند:

• پارادایم ترکیب تابعی: React نمایشگرها (توابع خالص) را تنظیم می کند در حالی که Redux از کاهنده های خالص (همچنین توابع خالص) استفاده می کند. با توجه به همان مجموعه ورودی، خروجی قابل پیش بینی است.
• آسان برای استدلال کد: كد ما به گونه ای رفتار می كند كه از آن انتظار داریم و وقتی مشكلی پیش آمد، می توانیم به راحتی آنها را پیدا كنیم. از طریق تجربه ما، React و Redux اشکال زدایی را ساده تر می کنند. از آنجا که جریان داده به صورت یک طرفه است، ردیابی جریان داده ها (پاسخ های سرور، رویدادهای ورودی کاربر) آسان تر است و تعیین این مسئله که لایه در چه لایه ای ایجاد می شود ساده تر است.
• ساختار لایه ای: هر لایه در معماری app / Flux یک عملکرد خالص است و مسئولیت های روشنی دارد. نوشتن تست برای عملکردهای خالص نسبتاً آسان است.
• تجربه توسعه: تلاش های زیادی برای ایجاد ابزارهایی انجام شده است تا به منظور رفع اشکال و بررسی برنامه در حین توسعه، مانند Redux DevTools، به شما کمک کنند.

ری اکت و وب پک (Webpack)

وب پک (Webpack) یک بسته نرم افزاری ماژول جاوااسکریپت اوپن سورس است. این یک بسته نرم افزاری ماژول در درجه اول برای جاوااسکریپت است، اما در صورت گنجاندن لودر مربوطه، می تواند دارایی های فرانت اند مانند اچ تی ام ال، سی اس اس و تصاویر را تغییر دهد. Webpack ماژول هایی را با وابستگی به خود می گیرد و دارایی های ایستایی را ارائه می دهد که نماینده آن ماژول ها است.

Webpack وابستگی ها را می گیرد و یک نمودار وابستگی ایجاد می کند که به توسعه دهندگان وب اجازه می دهد از یک روش مدولار برای اهداف توسعه برنامه وب خود استفاده کنند. می توان آن را از خط فرمان استفاده کرد یا با استفاده از یک فایل پیکربندی که به نام webpack.config.js تنظیم و پیکربندی کرد. این فایل برای تعریف قوانین، افزونه ها و غیره برای یک پروژه استفاده می شود. Node.js برای استفاده از Webpack لازم است. Webpack با استفاده از تقسیم کد moniker، کد در صورت تقاضا را ارائه می دهد.

هنگام شروع یک پروژه React جدید، الگوهای مختلفی برای انتخاب وجود دارد: ایجاد React App، React-boilerplate و React Start Kit، برای نامگذاری چند مورد. این قالب ها که توسط هزاران توسعه دهنده پذیرفته شده اند، قادر به پشتیبانی از توسعه برنامه ها در مقیاس بسیار بزرگ هستند. اما آنها تجربه توسعه دهنده و خروجی بسته نرم افزاری را با پیش فرض های مختلف رها می کنند، که ممکن است ایده آل نباشد.

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

مقایسه ری اکت و انگولار

انگولار جی اس (AngularJS)

انگولار جی اس یک فریمورک محبوب جاوااسکریپت می باشد که توسط گوگل توسعه پیدا کرده است. با انگولار شما قادر به ساخت برنامه های تک صفحه ای (Single Page) هستید. فریمورک انگولار به خوبی معماری MVC را در سمت کلاینت (کاربر) پیاده سازی می کند. انگولار از اچ تی ام ال، سی اس اس (Css) و جاوااسکریپت استفاده می کند و تقریبا می توان گفت که نقص های آن ها را برطرف می کند. AngularJS بخش فرانت اند از تکنولوژی MEAN-Stack است که متشکل از پایگاه داده، مانگو دی بی، اکسپرس جی اس، نود جی اس و خود انگولار جی اس می باشد.

فراگیری جهانی

• ری اکت

React فریمورکی است که در توسعه وب و موبایل کاربرد دارد. با این حال، برای توسعه تلفن همراه، باید با کوردووا ترکیب شود. علاوه بر این، برای توسعه تلفن همراه، یک فریمروک React Native وجود دارد. ری اکت را می توان برای ساختن برنامه های وب یک صفحه ای و چند صفحه ای استفاده کرد.

• انگولار

انگولار برای توسعه وب و موبایل مناسب است. با این حال، در توسعه تلفن همراه، بخش بزرگی از کار توسط آیونیک انجام می شود. علاوه بر این، مشابه React، Angular دارای فریمروک توسعه تلفن همراه است. انگولار همچنین می تواند برای هر دو برنامه وب یک صفحه ای و چند صفحه ای استفاده شود.

خود کفایی

• ری اکت

React یک فریمورکی برای توسعه UI است، بنابراین برنامه هایی که با React نوشته شده اند نیاز به کتابخانه های اضافی دارند تا مورد استفاده قرار گیرند. به عنوان مثال، Redux، React Router یا Helmet فرآیندهای مدیریت حالت، مسیریابی و تعامل با API را بهینه می کنند. کارکردهایی مانند اتصال داده، مسیریابی مبتنی بر مؤلفه، تولید پروژه، اعتبار سنجی فرم یا تزریق وابستگی به ماژول ها یا کتابخانه های اضافی احتیاج دارد.

• انگولار

Angular یک فریمروک تمام عیار برای توسعه نرم افزار است که معمولاً به کتابخانه های اضافی احتیاج ندارد. تمام توابع فوق الذکر - اتصال داده ها، مسیریابی مبتنی بر مؤلفه، تولید پروژه، اعتبار سنجی فرم و تزریق وابستگی - با استفاده از بسته Angular قابل اجرا هستند.

منحنی یادگیری

• ری اکت

ری اکت دارای حداقل منحنی یادگیری است: تزریق وابستگی، فرمت های کلاسیک و ویژگی های بسیار پیچیده. با این حال، یاد می گیرد که چگونه می توان یک پروژه را راه اندازی کرد، زیرا ساختار از پیش تعریف شده پروژه وجود ندارد. شما همچنین باید کتابخانه Redux را یاد بگیرید که در بیش از نیمی از برنامه های React برای مدیریت State استفاده می شود. به روزرسانی های فریمورک ثابت همچنین نیاز به تلاش اضافی توسط توسعه دهنده دارد.

• انگولار

Angular خود یک کتابخانه عظیم است و یادگیری کلیه مفاهیم مرتبط با آن بسیار بیشتر از React طول می کشد. انگولار برای درک پیچیده تر است، سینتکس های غیر ضروری زیادی وجود دارد، و مدیریت کامپوننت پیچیده است. برخی از ویژگی های پیچیده در هسته فریمروک تعبیه شده است، به این معنی که توسعه دهنده نمی تواند از یادگیری و استفاده از آنها خودداری کند. علاوه بر این، روش های زیادی برای حل یک مسئله وجود دارد.

اگرچه TypeScript از نظر نحوی شبیه به JavaScript است، اما برای یادگیری آن مدتی طول می کشد. از آنجا که این فریمروک به طور مداوم به روز می شود، توسعه دهنده باید تلاش بیشتری برای یادگیری کند.

جامعه پشتیبان

• ری اکت

فریمروک React یکی از محبوب ترین فریمروک های JS در سراسر جهان است، و جامعه پشتیبانی و توسعه آن بسیار زیاد است. با کار با React، شما باید یادگیرنده مداوم باشید زیرا فریمروک اغلب به روز می شود. در حالی که جامعه سعی می کند با آخرین اسناد و مدارک هر چه سریعتر جلو برود، رعایت همه تغییرات آسان نیست. ممکن است گاهی اوقات کمبود اسناد وجود داشته باشد، اما این مسئله اغلب با حمایت جامعه در انجمن های موضوعی حل می شود. React بطور فعال توسط شرکت هایی مانند Facebook، Twitter، Netflix، Airbnb، PayPal، New York Times، Yahoo، Walmart، Uber و Microsoft استفاده می شود.

• انگولار

انگولار نسبت به React کمتر تحسین می شود. توسعه دهندگان قبلاً فریمروک را به عنوان یك فریمروک بیش از حد پیچیده رد كردند، زیرا به یادگیری زیادی نیاز داشت. با این حال، این فریمروک توسط Google ساخته شده است، که باعث بالا رفتن اعتبار Angular می شود. گوگل پشتیبانی بلند مدت از این فریمروک را ارائه می دهد و مرتباً آن را بهبود می بخشد. با این حال، به روزرسانی ها آنقدر سریع هستند که اسناد و مدارک غالباً عقب می ماند. Angular توسط شرکت هایی مانند مک دونالد، AT&T، HBO، اپل، فوربس، ادوبی، نایک و مایکروسافت نیز استفاده می شود.

کارایی

• ری اکت

عملکرد React با معرفی DOM مجازی بسیار بهبود یافته است. از آنجا که کلیه DOMTree مجازی سبک هستند و بر روی سرور ساخته شده اند، بار مرورگر کاهش می یابد. علاوه بر این، از آنجایی که فرایند اتصال داده به صورت یک طرفه است، هیچ بار اضافی ایجاد نمی شود.

• انگولار

عملکرد انگولار پایین تر است، به خصوص در مورد برنامه های وب پیچیده و پویا. عملکرد برنامه های Angular توسط اتصال داده های دو طرفه تأثیر منفی دارد. برای پیگیری تغییرات، به هر اتصال دهنده یك ناظر اختصاص داده می شود و هر حلقه تا زمانی كه تمام تماشاگران و مقادیر مرتبط بررسی شوند، ادامه می یابد. به همین دلیل، هرچه اتصال شما بیشتر باشد، ناظران بیشتری ایجاد می شوند و روند کار سخت تر می شود.

با این حال، جدیدترین بروزرسانی Angular عملکرد آن را تا حد زیادی بهبود بخشیده است و دیگر React را از دست نمی دهد. علاوه بر این، اندازه یک برنامه انگولار کمی کوچکتر از اندازه یک برنامه React است.

زبان

• ری اکت

React بر اساس JavaScript ES6 همراه با اسکریپت JSX است. JSX یک افزونه برای سینتکس است، که باعث می شود کد JavaScript شبیه به HTML باشد که در HTML نوشته شده است. این باعث می شود کد ساده تر درک شود، و علائم آنها راحت تر قابل مشاهده باشند. برای تهیه کد JSX در یک مرورگر، React با Babel استفاده می شود.

• انگولار

Angular می تواند از JavaScript یا TypeScript استفاده کند، که مجموعه ای از JS است که به طور خاص برای پروژه های بزرگتر تهیه شده است. TypeScript نسبت به جاوا اسکریپت فشرده تر است، کد آن آسان تر می شود و علائم به راحتی مشاهده می شوند. روند اصلاح کد نیز ساده تر و سریعتر می شود.

کامپوننت های UI

• ری اکت

ابزارهای UI برای React توسط جامعه توسعه یافته است. بسیاری از کامپوننت های UI رایگان و هزینه ای در پرتال React وجود دارد. برای استفاده از کامپوننت های طراحی متریال در React، شما باید کتابخانه Material-UI را نصب کنید.

• انگولار

Angular یک ابزار داخلی و انواع مختلفی از طراحی متریال از پیش ساخته را ارائه می دهد. دکمه های مختلف، چیدمان ها، نشانگرها، پنجره های بازشو و کنترل های مختلف وجود دارد. به همین دلیل، پیکربندی UI ساده و سریعتر می شود.

دیتا بایندیگ

• ری اکت

اتصال داده مخفف فرآیند همگام سازی داده ها بین Model و View است. React باید با Redux افزوده شود، که به شما امکان می دهد با داده های غیرقابل تغییر کار کنید و جریان داده ها را یک طرفه می کند. اتصال یک طرفه قابل پیش بینی است، که روند اشکال زدایی را تسهیل می کند.

• انگولار

انگولار با داده های اتصال دو طرفه و متغیر قابل انجام است. اتصال داده های دو طرفه بر عملکرد تأثیر منفی می گذارد زیرا Angular به طور خودکار یک مشاهده کننده را برای هر اتصال ایجاد می کند.

توسعه اپلیکیشن با ری اکت

ما در دنیا دستگاه های مختلف تلفن همراه داریم که عمدتاً بر دو سیستم عامل آی او اس و اندورید کنترل می شوند. ساخت برنامه موبایل کار ساده ای نیست. برای IOS، شما با استفاده از آبجکتیو سی (Objective-C) یا سوئیفت (Swift) و برای Android کدی را می نویسید، با استفاده از جاوا پیدا خواهید شد. جدا از زبان های برنامه نویسی مختلفی که برای برنامه نویسی موبایل استفاده می شود و می تواند روی هر دو سیستم عامل اجرا شود، ابزارها نیز برای هر دو سیستم عامل تلفن همراه کاملاً متفاوت هستند.

بسیاری از توسعه دهندگان امروزی از مجموعه خاصی از فناوری استفاده می کنند که برای ساخت برنامه های وب استفاده می شود: اچ تی ام ال،سی اس اس و جاوااسکریپت. فریمورک های مختلفی وجود دارد که تحت آن دسته بندی قرار می گیرند که معمولاً به عنوان برنامه های ترکیبی شناخته می شوند. می توانید تقریباً از مجموعه کد منبع برای توسعه برنامه برای سیستم عامل های iOS و سیستم عامل های Android استفاده کنید.

در سال های اخیر، فریمورک های ترکیبی از منظر وب برای استفاده از API های نیتیو تکامل یافته اند. این رویکرد متقاطع برای توسعه برنامه موبایل همراه با جوانب مثبت و منفی است. جوانب مثبت مانند کم هزینه تر بودن و مقرون به صرفه بودن و موارد منفی شامل مسائل مربوط به عملکرد است. یکی از گزینه های عالی که زیر چتر توسعه کراس پلتفرم قرار دارد ری اکت نیتیو است. React Native مبتنی بر کتابخانه وب ReactJS است.

مثال های ری اکت (React)

نمایش Hello React!

<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
  <h1>Hello React!</h1>,
  document.getElementById('id01'));
</script>

کامپوننت های ری اکت، توابع جاوا اسکریپت هستند. این مثال مولفه React به نام "Welcome" ایجاد می کند.

<div id="root"></div>
<script type="text/babel">
function Welcome() {
  return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
</script>