آموزش ری اکت (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 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 نگاهی بیندازید. شما می توانید اقدامات ارسال شده، حالت های فروشگاه فعلی را مشاهده کرده و تغییرات را در فروشگاه ها مشاهده کنید. همچنین می توانید اقدامات را ارسال کنید یا فروشگاه ها را تغییر دهید و فوراً تغییرات منعکس شده در نمای خود را مشاهده کنید. از آنجا که تمام به روزرسانی ها در پسوند نگه داشته می شوند، سفر در زمان حتی ممکن است. می توانید برای اهداف اشکال زدایی به هر حالت برنامه خود ضبط کرده و برگردید.

ری اکت در وردپرس

وردپرس محبوب ترین و کامل ترین CMS است که به شما این امکان را می دهد تا از سایت تک صفحه ای گرفته تا پلتفرم تجارت الکترونیکی تمام عیار، یا هر چیزی بسازید. وردپرس از پی اچ پی برای تمام زیرساخت های بک اند خود مانند به روزرسانی، API،auth، لایه DB و بیشتر قسمت های ابتدایی استفاده می کند. با این حال، مانند سایر فریمورک های محبوب، وردپرس نیز در اواخر مجبور به تحول شده است. با توجه به افزایش پتانسیل و قدرت برنامه های جاوا اسکریپت برای وب و همچنین برنامه های کاربردی موبایل و دسکتاپ نیتیو، WP REST API تلاش می کند تا شکاف بین هسته PHP وردپرس و ظهور جاوا اسکریپت را ایجاد کند. این یک قدم بزرگ برای وردپرس به دو دلیل است:

  • وب سایت های WP موجود می توانند از React / Vue یا کتابخانه فرانت اند دیگر استفاده کنند تا تجربه UI بهتری ایجاد کنند.
  • برعکس، توسعه دهندگان وب از CMS استانداردی بدون هدف استفاده می کنند که می تواند به راحتی با پشته مورد نظر خود ادغام شود.

وردپرس REST API

توسعه WP REST API از چند سال پیش آغاز شد و در ابتدا به عنوان افزونه ویژگی مستقل طراحی شد. WP API به شما امکان می دهد تا از WordPress به عنوان CMS استفاده کنید و کاربرد آن آسان و پایدار و دوستانه با JSON باشد. استفاده از React با WordPress دقیقاً مشابه استفاده از React با هر بک اند API دیگر است. با وردپرس، پیدا کردن داده آسان تر است و می دانید دقیقاً به کجا نگاه کنید.

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

ما در دنیا دستگاه های مختلف تلفن همراه داریم که عمدتاً بر دو سیستم عامل آی او اس و اندورید کنترل می شوند. این مسابقه دو اسب است و همه ما می توانیم درباره آن توافق کنیم. اما ساخت برنامه موبایل کار ساده ای نیست. برای 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>

آیا این نوشته را دوست داشتید؟
codewithmosh-mastering-react

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

1398/10/08 1223 بازدید