اضافه کردن React به وبسایت

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

ریکت برای شروع پذیر تدریجی (gradual adoption) طراحی شده است، و شما میتونید از ریکت به هراندازه ای که نیاز دارید که کم و چه زیاد استفاده کنید.

شاید شما بخواین مقداری “sprinkles of interactivity” به صفحه موجود اضافه کنید. کامپوننت های ریکت یک راه عالی برای انجام اینکار هستند. اکثریت وبسایت ها نه اپلیکیشن تک صفحه ای هستند و نه به آن نیاز دارند. ریکت رو در قسمت های کوچکی از وبسایت با چند خط کد و بدون ساخت ابزار امتحان کنید. سپس شما میتونید به تدریج حضوری ریکت رو در وبسایت گسترش بدید، یا اون رو با چند Widget پویا (dynamic) نگه دارید.

اضافه کنید ریکت رو در یک دقیقه

اختیاری: ریکت رو بدون JSX امتحان کنید ( هیچ bundler ایی لازم نیست! )

اضافه کنید ریکت رو در یک دقیقه

در این بخش، ما به شما نشون میدیم که چطوری یک کامپوننتِ ریکت رو به یک صفحه HTML که دارید اضافه کنید. شما با وبسایت خودتون با ما همراه بشید، یا اینکه یک صفحه HTML خالی برای تمرین بسازید.

هیچ ابزار پیچیده یا پیش نیازی برای نصب وجود نخواهد داشت – برای تکمیل این بخش، شما فقط به یک اتصال اینترنت و چند دقیقه از زمان تون نیاز نیاز دارید.

اختیاری: دانلود کامل مثال (حجم: 2کیلوبایت بصورت فشرده)

قدم اول: اضافه کنید یک DOM Container به HTML

در ابتدا، صفحه HTML رو به قصد ویرایش باز میکنیم. و یک تگ <div> خالی برای نقطه ای از صفحه که با ریکت میخوایم نشون بدیم، اضافه میکنیم.

مثال:

<!-- ... existing HTML ... -->

<div id="like_button_container"></div>

<!-- ... existing HTML ... -->

ما به <div> یک شناسه (id) منحصر به فرد میدیم. اینکار به ما این اجازه رو میدیم که جلوتر بتونیم به وسیله کد های جاوا اسکریپت پیداش کنیم و کامپوننت ریکت رو رو داخل اون نمایش بدیم.

نکته

شما میتونید “container” که به تگ <div> دادیم رو هرجایی از تگ <body> قرار بدین. شما ممکنه تعداد DOM container های مستقل در صفحه نیاز داشته باشید که اونها معمولا خالی هستند. – ریکت هر محتوایی که وجود داشته باشه رو داخل DOM Container ها قرار میده.

قدم دوم: تگ های اسکریپت (Script) رو اضافه کنید.

حالا ما سه تا تگ <script> رو به صفحه html اضافه میکنیم قبل از اینکه تگ </body> بسته بشه:

 <!-- ... other HTML ... -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

  <!-- Load our React component. -->
  <script src="like_button.js"></script>

</body>

دوتا اسکریپت اول، ریکت رو لود میکنه و اسکریپت سومی کد های کامپوننت شما رو لود میکنه.

قدم سوم: یک کامپوننت ریکت بسازید.

یک فایل با نام like_button.js در صفحه html تون بسازید.

این کد شروع رو باز کنید و کد های اون رو داخل فایلی که ساختین جایگذاری (paste) کنین.

نکته

این کد یک کامپوننت ریکت که بهش LikeButton میگیم رو تعریف میکنه. اگه چیزی از کد رو متوجه نمیشی نگران نباش – ما بلوک های ساخته شده ریکت رو بعدا در آموزش های hands-on-tutorial و main concepts guide پوشش میدیم. الان فقط اجازه بدین که این کد ها روی صفحه نمایش، نمایش داده بشه.

خب بعد از اینکه کد اولیه رو جایگذاری کردیم، دو خط در پایین like_button.js اضافه میکنیم:

// ... the starter code you pasted ...

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

این دو خط کد تگ <div> رو که ما در صفحه html اون اول صفحه اضافه کردیم بودیم رو پیدا میکنن و میان کامپوننت ریکت ما رو که یک دکمه “لایک” هست داخل اون نمایش میدن.

ها خودِشه!

قدم چهارمی وجود نداره :). شما اولین کامپوننت ریکت رو به وبسایتت اضافه کردی.

بخش های بعدی رو برای نکات بیشتری راجب ریکت بررسی کنید.

بریم سورس کد کامل این مثالو ببنیم

دانلود کامل این مثال

نکته: استفاده مجدد از یک کامپوننت

معمولا شما میخواین کامپوننت های ریکت رو در چندین قسمت از صفحه html نمایش بدین. این مثال دکمه “لایک” رو در سه قسمت برنامه استفاده کرده و داده هایی رو بهش پاس داده:

بریم سورس کدش رو ببینیم.

کامل این مثالو دانلود کنیم. (فقط 2 کیلو بایت فشرده!)

توجه

این یک استراتژیه مفیده زمانی که قسمت های react-powered صفحه، از یکدیگر جدا شدند. (isolated). داخل کد های ریکت، استفاده از کامپوننت های ساخته شده خیلی آسونه.

نکته: کم کردن [حجم] جاوا اسکرپیت برای تولید (production)

قبل از اینکه وبسایت تون رو برای production منتشر کنید، توجه داشته باشید که کم نشدن حجم جاوا اسکریپت به طور قابل ملاحظه ای میتونه سرعت سایت شما رو برای کاربران پایین بیاره.

اگه شما قبلا اسکریپت برنامه رو فشرده (Minify)، وبسایت شما آماده production هست. اگر شما مطمئن هستید برای انتشار html، نسخه های ریکت رو در پایان pduction.mi.js لود کنید:

<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

اگر شما اسکریپت هاتون رو فشرده نکردید، اینجا یک راه هست برای تنظیم کردنش.

اختیاری: ریکت رو بدون jsx امتحان کنید.

در مثال بالا، ما فقط به قابلیت های native پشتیبانی شده از مرورگرها تکیه کرده بودیم. به همین دلیل ما از function call جاوا اسکرپیت برای صدا زدن ریکت جهت نمایش استفاده کردیم:

const e = React.createElement;

// Display a "Like" <button>
return e(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);

با اینحال، ریکت استفاده از قابلیت JSX رو بجای روش بالا پیشنهاد میده:

// Display a "Like" <button>
return (
  <button onClick={() => this.setState({ liked: true })}>
    Like
  </button>
);

این دو قطعه کد باهم برابری میکنن. با اینحال jsx یک قابلیت کاملا اختیاری هست، اکثر مردم کد زدن ui (رابط کاربری) رو با jsx مفید میدونن – با ریکت و با کتابخانه های دیگر

شما میتونید کار کنید با jsx با استفاده از این تبدیل کننده آنلاین

jsx رو به سرعت امتحان کنید.

سریع ترین راه برای استفاده jsx در پروژه هاتون اینه که تگ <script> زیر رو به صفحه تون اضافه کنید:

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

حالا شما متونید از jsx در هر تگ <script> با اضافه کردن خصوصیت type=”text/babel” استفاده کنید. در این مثال یک فایل html با jsx هست که شما میتونید اون رو دانلود و اجرا کنید.

این رویکرد برای یادگیری و ساخت نمونه های ساده خوبه. با اینحال، اینکار باعث کاهش سرعت و نامناسب بودن وبسایت برای production میشه. وقتی که شما آماده جلو رفتن بودین، تگ جدید اسکریپت رو با خصوصیت type=”text/babel” که قبلا اضافه کرده بودین پاک کنید. در عوضش، ما در بخش بخش یک پردازنده JSX رو برای تبدیل خودکار تگ های اسکریپت تون، راه اندازی میکنیم.

jsx رو به یک پروژه اضافه کنید.

اضافه کردن jsx به پروژه به ابزار های پیچیده ای مثل bundler یا سرور توسعه نیاز نداره. اساسا، اضافه کردن jsx خیلی شبیه به اضافه کردن پیش پردازنده css هست. تنها پیش نیاز برای اینکار، نصب Node.js بر روی کامپیوترتون هست.

از طریق ترمینال وارد پوشه پروژتون بشید و دو خط فرمان زیر رو جایگذاری کنید:

  1. قدم اول: npm init -y رو اجرا کنید. (اگه نشد، راه حلش اینجاست)
  2. قدم دوم: npm install bable-cli@6 babel-preset-react-app@3 رو اجرا کنید.

نکته

ما در اینجا از npm برای نصب کردن پیش پردازنده jsx استفاده میکنیم، شما برای چیز های دیگه بهش احتیاجی ندارید. ریکت و کد های برنامه بدون هیچ تغییری در تگ های اسکریپت باقی میمونن.

تبریک! شما یک production-ready jsx بر روی پروژه راه اندازی کردین.

پیش پردازنده jsx را اجرا کنید.

پوشه ای بنام src بسازید و کد زیر را در ترمینال خود اجرا کنید:

npx babel --watch src --out-dir . --presets react-app/prod 

توجه

npx اشتباه نیست! این یک اجرا کننده پکیج هست که از نسخه 5.2 npm اومده

اگر شما خطایی دیدین که میگفت ” You have mistakenly installed the babel package “، شما احتمال در تنظیمات قبلی اشتباهی داشتین. اینکارو در همون پوشه انجام بدین و دوباره امتحان کنین.

منتظر نمونید تا به پایان برسه – این دستور بطور خودکار jsx رو بررسی میکنه.

حالا اگر شما یک فایل با نام src/like_button.js ساختین، به همراه کد شروع jsx،

watcher یک پیش پردازنده برای like_button.js میسازه که باعث میشه زمانی که شما فایل اون رو ویرایش میکنید این تغییر به صورت خودکار اعمال میشه.

درحال ترجمه……

دیدگاه خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *