آموزش ری اکت (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 تبدیل کنید.

ویژگی های ری اکت (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>

آیا این نوشته را دوست داشتید؟
pluralsight-using-react-hooks

استفاده از React Hooks


این یک دوره مبتدی در مورد React نیست. در این دوره، با استفاده از React Hooks، هر دو روش اصلی و پیشرفته برای استفاده از React Hooks در کامپوننت های تاب...

1400/03/13 437 بازدید
packt-build-an-online-store-with-react-and-graphql-in-90-minutes

ساخت یک فروشگاه آنلاین با ری اکت و GraphQL در 90 دقیقه


به دوره ساخت یک فروشگاه آنلاین با React و GraphQL در 90 دقیقه خوش آمدید! در طول این دوره، ما یک فروشگاه آنلاین به نام BrewHaha، یک اپلیکیشن تجارت الکت...

1400/03/12 1073 بازدید
packt-learning-react

دوره ی آموزش React


آیا می خواهید مراحل ساخت کامپوننت های ماژولار و قابل استفاده ی مجدد را ساده و شهودی کنید؟ React.js با رویکرد یک بار یاد بگیرید هرکجا بنویسید پاسخ این ...

1400/03/07 1090 بازدید
packt-learn-react-js-and-web-api-by-creating-a-full-stack-web-app

یادگیری React JS و Web API با ایجاد وب اپلیکیشن Full Stack


در این دوره، شما یاد خواهید گرفت چگونه یک وب اپلیکیشن را از ابتدا بسازید. برای فرانت اند از React.js و از Microsoft SQL Server به عنوان دیتابیس استفاد...

1400/03/04 1230 بازدید
packt-introduction-to-d3-js-with-react

معرفی D3.js با React


این دوره به شما کمک می کند تا در محیط React به سرعت با D3.js کار کنید. این دوره به شما آموزش می دهد که چگونه در آخرین نسخه D3 - نسخه x.6 - برنامه ریزی...

1400/03/03 441 بازدید
packt-universal-react-with-next-js-the-ultimate-guide

آموزش React جهانی با Next.js - راهنمای نهایی


این دوره بهترین راهنما برای یادگیری فریمورک Next.js است. ما چهار پروژه کامل React / Next.js، از ابتدا تا استقرار در وب را ایجاد خواهیم کرد. آنچه که خو...

1400/02/27 1026 بازدید
mastering-react

دوره کامل تسلط بر ری اکت - Codewithmosh Mastering React - 2021-04


دوره کامل ری اکت - React راهی برای ایجاد اپلیکیشن های سریع و تعاملی وب است. این دوره همه نکات را در بر می گیرد. تمام مطالب به زبان ساده و قابل درک تو...

1400/02/25 16139 بازدید زیرنویس دارد
packt-hands-on-react-applications-with-react-hooks

آموزش اپلیکیشن های React با React Hooks


هوک یک ویژگی جدید است که به شما امکان می دهد بدون نوشتن کلاس، از state و سایر ویژگی های React استفاده کنید. هوک که React Hooks نیز نامیده می شود از نس...

1400/02/22 603 بازدید
udemy-microservices-with-node-js-and-react

آموزش میکروسرویس ها با Node JS و React


با استفاده از میکروسرویس های ساخته شده با Node ،React ،Docker و Kubernetes، یک برنامه تجارت الکترونیکی ایجاد، استقرار و مقیاس بندی کنید. با استفاده از...

1400/02/08 1383 بازدید زیرنویس دارد
modern-react-with-redux

آموزش ری اکت مدرن با ریداکس


بر روی React v16.6.3 و Redux با React Router ،Webpack و Create-React-App مسلط شوید. این دوره شامل Hooks است. شما اصول ساخت برنامه های وب پویا و لایو ر...

1400/02/05 1219 بازدید زیرنویس دارد
linkedin-creating-a-serverless-application-using-react-in-aws

ایجاد یک برنامه Serverless با استفاده از React در AWS


در این دوره، مدرس Brett McLaughlin به شما نشان می دهد که چگونه React و یک اکوسیستم کامل توسعه وب در ساخت برنامه ها با هم کار می کنند. Brett برای راه ا...

1400/02/03 647 بازدید
linkedin-building-modern-projects-with-react

آموزش ساخت پروژه های مدرن با React


مدرس دوره Shaun Wassell، نحوه ایجاد یک پروژه اصلی React را نشان می دهد و سپس نحوه افزودن Redux، ایجاد Thunks، استفاده از انتخابگرها، کار با styled-com...

1400/01/18 1678 بازدید زیرنویس دارد
linkedin-react-accessibility

آموزش React: دسترس پذیری


در این دوره، Kiara Contreras نشان می دهد که چرا دسترس پذیری مهم است و چرا هنگام ساخت اپلیکیشن های تک صفحه ای با React، یکی از محبوب ترین فریمورک های ف...

1399/12/13 803 بازدید زیرنویس دارد
linkedin-react-hooks

آموزش React Hooks


در این دوره، مدرس Eve Porcello سبک های مختلف استفاده از Hooks و روش های یکپارچه سازی آن ها در گردش کار برنامه نویسی شما را بررسی می کند. او به شما می ...

1399/12/12 1012 بازدید
udemy-react-and-typescript-build-a-portfolio-project

آموزش ری اکت و تایپ اسکریپت - ساخت پروژه نمونه کار


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

1399/12/05 2120 بازدید زیرنویس دارد
pluralsight-mock-it-til-you-make-it-codemash

ماک کنید تا وقتی که درستش کنید: CodeMash


در این کنفرانس، Gabriela Dombrowski می خواهد ساخت query resolvers ماک شده را خودکارسازی کند تا دیگر لازم نباشد باز هم به صورت دستی ماک ها را برای بارگ...

1399/12/05 467 بازدید
skillshare-full-stack-web-developer-in-2019

دوره توسعه دهنده Full Stack وب 2019


در این دوره با React، بررسی SQL statements، پایگاه داده رابطه ای مانند MongoDB، محتوای ES7/8، ایجاد اپلیکیشن ها و وبسایت های واقعی پیچیده، ایجاد اپلیک...

1399/12/03 2207 بازدید
pluralsight-optimize-performance-for-react

آموزش بهینه سازی عملکرد برای React


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

1399/09/30 1393 بازدید زیرنویس دارد
pluralsight-angular-denver-19-angular-elements-make-the-best-react-components

دوره Denver '19 انگولار: عناصر انگولار بهترین کامپوننت های React را می سازند


برای یادگیری این که چرا عناصر انگولار بهترین کامپوننت های React را می سازند، به Brad McAlister و Ryan Chenkie بپیوندید....

1399/09/26 627 بازدید
pluralsight-react-getting-started

آموزش React: شروع کار


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

1399/09/13 3677 بازدید زیرنویس دارد