آموزش ری اکت (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)

  • کامپوننت

کد ری اکت از موجودیت هایی به نام مؤلفه ساخته شده است. مولفه ها را می توان با استفاده از کتابخانه React DOM به عنصر خاص در DOM ارائه داد. هنگام ارائه مؤلفه، می توان مقادیری را که به "props" معروف هستند، منتقل کرد.

  • کامپوننت های تابعی

کامپوننت های تابعی با تابع اعلام می شوند و سپس مقادیر JSX را برمی گرداند.

  • جریان داده‌ای یک سویه (One-way data binding with props)

در این حالت ویژگی ها به یک کامپوننت از مولفه اصلی منتقل می شود. کامپوننت ها به عنوان مجموعه ای از مقادیر غیر قابل تغییر (شی جاوا اسکریپت) ویژگی ها را دریافت می کنند.

  • Virtual DOM

یکی دیگر از ویژگی های قابل توجه استفاده از مدل Object Document Object یا DOM مجازی است. React حافظه پنهان ساختار داده را در حافظه ایجاد می کند، اختلافات حاصل را محاسبه می کند، و سپس DOM نمایش داده شده مرورگر را به روز می کند. این به برنامه نویسان اجازه می دهد تا کدی را بنویسد که گویی کل صفحه در هر تغییر نمایش داده شده است، در حالی که کتابخانه های React فقط جزئی از مؤلفه های موجود را تغییر می دهند.

  • JSX

SX یا JavaScript XML افزونه ای است به سینتکس زبان JavaScript نزدیک است و با ظاهری مشابه HTML، روشی برای ساختار دهی به مؤلفه ها با استفاده از نحوی آشنا برای بسیاری از توسعه دهندگان فراهم می کند. کامپوننت های React معمولاً با استفاده از JSX نوشته می شوند، اگرچه لازم نیست (اجزای ساز نیز ممکن است با جاوا اسکریپت خالص نوشته شوند). JSX شبیه به نحو دیگری است که توسط Facebook برای PHP با نام XHP ایجاد شده است.

در مقدمه ReactJS عنوان کردیم که ری اکت کتابخانه جاوا اسکریپت رسمی، کارآمد و قابل انعطاف برای ایجاد رابط کاربری است. اما به جای استفاده از جاوا اسکریپت به طور منظم، کد ری اکت باید در چیزی به نام JSX نوشته شود. اجازه دهید نمونه کد JSX را ببینید:

class App extends React.Component {
  render() {
    return (
      <div>
        <p>Header</p>
        <p>Content</p>
        <p>Footer</p>
      </div>
    );
  }
}

قطعه کد بالا تا حدودی به نظر می رسد مانند HTML و همچنین از متغیر مانند جاوا اسکریپت استفاده می کند اما هیچ کدام از این ها نیستد، بلکه JSX است. JSX اساسا افزونه سینتکس جاوا اسکریپت است و برای ایجاد عناصر React استفاده می شود. سپس این عناصر به React DOM رندر می شوند.

  • معماری بالای HTML

معماری اولیه ری اکت بالای HTML در مرورگر است. برای مثال، فیس بوک دارای نمودارهای پویا است که تگ های <canvas> را ارائه می دهد، و Netflix و PayPal از بارگذاری مجدد برای بارگزاری HTML یکسان در سرور و سرویس گیرنده استفاده می کنند.

React دارای کتابخانه های نیتیو است که در سال 2015 توسط فیس بوک اعلام شد، که معماری ری اکت را برای برنامه های نیتیو مانند IOS،Android و UPD فراهم می کند. React-native فریمورک ساخت برنامه های تلفن همراه است که فقط از Javascript استفاده می کند. این برنامه از همان طراحی React استفاده می کند، به شما امکان می دهد از کتابخانه / مؤلفه های اعلامی غنی موبایل UI استفاده کنید یا از آن استفاده کنید. از همان بلوک های اساسی UI بنیادی استفاده می کند که برنامه های iOS و Android معمولی است. بهترین قسمت استفاده از ری اکت نیتیو، مجاز بودن / اتخاذ مؤلفه های نوشته شده در Objective-C،Java یا Swift است.

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

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

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

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

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

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

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

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

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

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

انتزاع تمیز

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

Flux و ریداکس (Redux)

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

کاربرد ری اکت

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

متأسفانه، Flux آماده استفاده از کتابخانه نیست اما چنین عملیاتی وجود دارد. محبوب ترین آن Redux است که نوعی تفسیر مجدد از معماری Flux است. این فروشگاه واحد را فراهم می کند که در Flux مورد نیاز نیست. به نظر من، این تصمیم عالی است که باید بخاطر داشتن منبع حقیقت واحد اتخاذ کنید. فقط شی واحد وجود دارد که تمام داده های برنامه را نگه دارید. این امر مشاهده و دستکاری را آسانتر می کند. هرگونه تغییر در فروشگاه (داده ها) باعث ارائه اجزای مرتبط می شود و نمایش همیشه در همگام سازی با داده ها نگه داشته می شود.

یکی دیگر از ویژگی های جالب Redux این است که می توانید وسط وسط را برای رهگیری اقدامات اعزام شده تعریف کنید. به طور کلی از آن برای ورود به سیستم، استفاده از استثناء و تماس های API async استفاده می شود اما می توانید برای حل انواع دیگر مشکلات، میان افزار را نیز به راحتی بنویسید. اگر شما تصمیم به استفاده از Redux می دهید، آن را با ابزار عالی dev تهیه می کنید. این امر کار را برای شما بسیار آسانتر می کند.

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

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

  • React Developer Tools
  • Redux Developer Tools

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

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

آموزش کامل ری اکت

شاید تعجب کنید که می توانید کدهای 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 (JavaScript XML) و نه JavaScript استاندارد (JS) نوشته شده است. با این حال، باید توجه داشته باشید که تنها هدف از این کار ایجاد آسان تر اجزای React است. می توانید یک کامپوننت React را با JavaScript استاندارد ایجاد کنید، اما ما تضمین می کنیم که فوق العاده کثیف خواهد بود. علاوه بر این، ایده استفاده از JSX در React این بود که فیس بوک (به عنوان توسعه دهنده اولیه) می خواست یک نوع خاص از پسوند نحوی با پیکربندی واضح و مبهم برای توسعه دهندگان ارائه دهد.

ری اکت کامپوننت

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

شما می توانید از مؤلفه ها به عنوان توابع ساده (به هر زبان برنامه نویسی) فکر کنید. ما توابع را با مقداری ورودی فراخوانی می کنیم و آنها خروجی به ما می دهند. ما می توانیم در صورت لزوم از توابع استفاده مجدد کنیم و عملکردهای بزرگتر را از کارهای کوچکتر ترسیم کنیم.

کامپوننت های واکنش دقیقاً یکسان هستند. ورودی آنها مجموعه ای از "props" است و خروجی آنها شرح UI است. ما می توانیم از یک کامپوننت واحد در UI های مختلف استفاده مجدد کنیم و مؤلفه ها می توانند حاوی مؤلفه های دیگری باشند. شکل اصلی یک مؤلفه React در واقع یک تابع ساده JavaScript است.

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

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

قلاب های (Hooks) ری اکت

import React, { useState } from 'react';

function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }

این تابع newState با عملکرد جدید اولین "هوک" است.

قلاب ها توابعی هستند که به توسعه دهندگان اجازه می دهند وضعیت اجزاء چرخه را از اجزای عملکرد تغییر دهند. آنها کدها را قابل خواندن و به راحتی قابل درک می سازند. قلاب ها در کلاس ها کار نمی کنند - به شما اجازه می دهند بدون کلاس از React استفاده کنید.

React چند قلاب داخلی مانند useState، useContext، useReducer و useEffect را برای نامگذاری چند مورد فراهم می کند. همه آنها در مرجع API قلاب ها اظهار شده است. useState و useEffect که بیشترین کاربرد را دارند برای کنترل حالت ها و ساید افکت به ترتیب در React Component هستند.

قوانین قلاب

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

  • قلاب ها را فقط باید در سطح بالا فراخوانی کنید (نه در داخل حلقه ها یا اگر جمله).
  • قلاب ها را فقط باید از اجزای عملکرد 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>

آیا این نوشته را دوست داشتید؟
packtpub-react-for-professionals-the-app-building-guide

ری اکت برای حرفه ای ها: راهنمای ساخت اپلیکیشن


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

1399/04/13 717 بازدید
skillshare-react-for-beginners-build-an-application-in-a-few-hours

آموزش ری اکت برای مبتدیان : ایجاد یک اپلیکیشن در چند ساعت


در این دوره طراحی وب سایت های پویا با ری اکت را فرا می گیرید. صدها نفر از توسعه دهندگان برای ایجاد رابط های کاربری پویا و ارائه اپلیکیشن های cutting-e...

1399/03/20 1559 بازدید
linkedin-react-creating-and-hosting-a-full-stack-site

آموزش React: ایجاد و میزبانی یک سایت Full-Stack


در این دوره مبتنی بر پروژه، Shaun Wassell نحوه ترکیب React ،Node.js و سرویس های وب آمازون (AWS) را در یک وب سایت فول استک و کامل شامل فرم های کاربرپسن...

1399/03/18 868 بازدید
linkedin-aws-and-react-creating-full-stack-apps

آموزش AWS و React - ایجاد اپلیکیشن های Full-Stack


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

1399/02/25 1071 بازدید زیرنویس دارد
pluralsight-building-applications-with-react-and-redux

آموزش ساخت اپلیکیشن با React و Redux


شما در این دوره یاد خواهید گرفت که چگونه از Redux ،React Router و ES6 برای ساختن اپلیکیشن های قدرتمند و سریع React از پایه و از Webpack ،Babel ،ESLint...

1399/02/17 1718 بازدید
udemy-react-django-full-stack-web-app-backend-api-mobile-apps

دوره فول استک جنگو و ری اکت: اپلیکیشن وب، API و برنامه موبایل


برنامه وب تک صفحه ای، Django 2 REST API با Python 3، برنامه های کراس پلتفرم تلفن همراه ری اکت نیتیو را برای Android و iOS ایجاد کنید. این دوره عمدتا م...

1399/02/02 7061 بازدید زیرنویس دارد
linkedin-building-react-and-asp-net-mvc-5-applications

آموزش ساخت اپلیکیشن های ری اکت و ASP.NET MVC 5


React.js یک فریم ورک محبوب است که به خصوص برای ساخت اپلیکیشن های وب با ASP.NET MVC 5 مناسب است، اما ادغام این دو چارچوب می تواند چالش برانگیز باشد. در...

1399/01/23 951 بازدید
linkedin-building-react-and-asp-net-core-applications

ساخت اپلیکیشن های ری اکت و ASP.NET Core


ری اکت یک فریموورک محبوب است که برای ساخت برنامه های تک صفحه ای (SPA) به همراه هسته ASP.NET بسیار مناسب است. در این دوره، مدرس دوره، Ervis Trupja با ت...

1399/01/08 2564 بازدید
linkedin-building-react-and-django-apps

ساخت اپلیکیشن های React و Django


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

1398/12/14 7132 بازدید زیرنویس دارد
codewithmosh-mastering-react

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


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

1398/11/29 7226 بازدید
linkedin-react-state-management

آموزش React: مدیریت State


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

1398/11/26 1216 بازدید زیرنویس دارد
linkedin-react-building-progressive-web-apps-pwas

آموزش React: ساخت وب اپلیکیشن های پیش رونده (PWAs)


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

1398/11/26 2082 بازدید
teamtreehouse-react-by-example

آموزش ری اکت با مثال


در این دوره با ساختن برنامه ای برای پیگیری RSVP، الگوهای برنامه نویسی React را بیاموزید! در ابتدا، با استفاده از ایجاد برنامه ری اکت برای اولیه سازی پ...

1398/11/03 2695 بازدید
teamtreehouse-react-router-4-basics

آموزش مبانی React Router 4


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

1398/11/02 982 بازدید
laracasts-do-you-react

آیا با ری اکت کار می کنید؟


در حالی که آموزش های Laracasts بیشتر به PHP و Laravel اختصاص داده شده است، واقعیت این است که بیشتر ما نیاز روزانه به نوشتن کد JavaScript داریم. در این...

1398/11/01 872 بازدید
teamtreehouse-building-applications-with-react-and-redux

آموزش ساخت اپلیکیشن با React و Redux


Redux یک فریمورک مدیریت state است که یک زیرساخت قوی را ارائه می دهد که برنامه های React را تکمیل می کند. این دوره بر اساس اپلیکیشن Scoreboard ساخته می...

1398/10/17 1986 بازدید
teamtreehouse-react-components

آموزش کامپوننت های React


کامپوننت ها بلوک های اصلی ساختاری یک اپلیکیشن React هستند. این دوره با ارائه درک بهتر از کامپوننت های کلاس در مقابل کامپوننت های تابعی، متدهای چرخه عم...

1398/10/16 1128 بازدید
linkedin-more-css-selectors-for-react-developers

انتخابگر های CSS بیشتر برای توسعه دهندگان React


در این دوره مخصوص توسعه دهندگان React با انتخابگر های پیشرفته‌تر CSS از جمله Combinators انتخابگر، انتخابگر های pseudo-element، انتخابگر های سفارشی و ...

1398/10/12 957 بازدید زیرنویس دارد
teamtreehouse-react-basics

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


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

1398/10/08 2243 بازدید
linkedin-essentials-of-css-for-react-developers

آموزش اصولی CSS برای توسعه دهندگان React


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

1398/09/27 1365 بازدید