Reactاز ابتدا برای اضافه کردن تدریجی طراحی شده است، می توانید به همان میزان کم یا به اندازه نیاز از React استفاده کنید.شاید شما بخواهید برخی از قسمت های تعاملی ( sprinkles of interactivity) را به صفحه اضافه کنید. کامپونت های ری اکت یک روش عالی برای این کار هستند.
اکثر وب سای ها یک برنامه تک صفحه ای (single-page apps) نیستند و لازم نیست که باشند. با چند خط کد و بدون هیچ ایزاری، React را دربخش کوچکی از وبسایت خود امتحان کنید. سپس می توانید به تدریج گسترش دهید، یا آنرا در چند ابزارک پویا (dynamic) نگه دارید.
در این بخش نحوه اضافه کردن React را به یک صفحه HTML موجود نشان خواهیم داد. می توانید به همراه سایت خود دنبال کنید، یا یک HTML خالی برای تمرین ایجاد کنید.
هیچ ابزار پیچیده ای یا نصبی وجود ندارد _ برای تکمیل این بخش، فقط به اتصال اینترنت و یک دقیقه وقت نیاز دارید.
اختیاری : نمونه کامل را دانلود کنید (KB zipped2)
ابتدا صفحه HTML مورد نظر را در ویرایشگر باز کنید. یک تگ <div> خالی اضافه کنید تاجای که می خواهید با React نشان دهید، علامت گذاری کنید.
مثلا :
ما به این <div> یک id یونیک (HTML (HTML attribute دادیم. این به ما این امکان را می دهد که بعدا آنرا ازطریق JavaScript پیداکنیم و یک component React را در داخل آن نمایش دهیم.
می توانید یک <container” <div” مانند این را هرکجا داخل تگ <body> قرار دهید.شما ممکن است به تعداد مورد نیاز DOM containers مستقل در یک صفحه داشته باشید. آنها معمولاً خالی هستند – React جایگزین محتوای موجود درDOM containers می شود.
بعد سه تگ را درست قبل بسته شدن تگ <body/> در صفحه HTML اضاقه کنید:
دوتگ اول React را لود می کند. تگ سوم کد component شما را بارگیری می شود.
فایلی نام like_button.js در کنار صفحه HTML ایجاد کنید.
این بخش را باز کنید و کد آن را درون فایلی که ایجاد کرده اید کپی کنید.
این کد یک React component به نام LikeButton را تعریف می کند.اگر هنوز در نمی کنید نگران نباشید – ما بعدا در راهنمای آموزشی (tutorial) و راهنمای مفاهیم پایه (main) ساختار react را پوشش خواهیم داد.در حال حاضر، بیاید فقط روی صفحه نمایش دهیم!
بعد اجرای کد، دوخط پاین را به like_button.js اضافه کنید:
این دوخط کد <div> که در مرحله اول اضافه کردیم را پیدا می کند وسپس دکمه “Like” را که در داخل کامپونت React است نمایش می دهد.
مرحله چهارمی وجود ندارد. شما اولین React component را به سایت خود اضافه کرده اید.
برای راهنمایی های بیشتر در مورد استفاده از React به بخش های بعدی مراجعه کنید.
نمونه کامل را دانلود کنید. (KB zipped2)
معمولا ممکن است بخواهید کامپونت های React را در چندین مکان در صفحه HTML نشان دهید.
در اینجا مثالی وجود دارد که دکمه “Like” را سه بار نمایش داده و برخی از داده ها را به آن منتقل می کند:
نمونه کامل را دانلود کنید. (KB zipped2)
این استراژی بیشتر اوقات مفید است درحالی که قسمت های React-powered بخش های از صفحه که از یکدیگر جدا شده اند.در داخل کد React ، راحت تر است که به جای آن از ترکیب component استفاده کنید.
قبل گسترش سایت شما به محصول نهایی، توجه داشته باشید که JavaScript ناشناس (unminified) به طور قابل توجهی می تواند صفحه کاربران شما کند کند.
اگر اسکریپت های برنامه خود را از قبل کوچک کرده اید، سایت شما آماده استفاده خواهد بود اگراطمینان حاصل کنید که HTML ورژن های react خاتمه یافته به production.min.js را بارگیری می کند:
اگر یک مرحله برای کوچک سازی (minification) اسکریپت های خود ندارید، در اینجا یک راه برای تنظیم آن وجود دارد.
در مثالهای بالا، ما فقط از ویژگی های که توسط مروگر پشتیبانی می شود استفاده کرده ایم. به همین دلیل ما از صدا زدن JavaScript function استفاده کردیم تا بگوییم React چه چیزی نشان می دهد :
با این حال، React گزینه ای برای استفاده ازJSX به جای آن ارائه می دهد:
این دوقطعه کد معادل هستند. درحالی که JSX کاملا اختیاری است، بسیاری از افراد آن را برای نوشتن کد UI مفید می دانند – هم با React هم با سایر کتابخانه ها.
با استفاده از این مبدل (converter) آنلاین می توانید با JSX بازی کنید.
سریعترین راه برای امتحان کردن JSX در پروژه ، اضافه کردن این تگ به صفحه است:
حالا می توانید از JSX در تگ با افزودن ویژگی “type=”text/babel به آن استفاده کنید. دراینجا مثالی از فایل html با JSX وجود دارد که می توانید دانلود و بازی کنید.
این یک روش مناسب برای یادگیری و ایجاد دموی ساده است. با این حال، وب سایت را کند و مناسب برای تولید نهایی نمی کند. هنگامی که آماده حرکت به جلو هستید، این تگ جدید را حذف کنید و ویژگی “type=”text/babel که اضافه کرده اید. در عوض ، در قسمت بعدی یک پردازنده JSX تنظیم می کنید تا تمام تگ های خود را به صورت خودکار تبدیل کنید.
افزودن JSX به یک پروژه به ابزار پیچده ای مانند نرم افزار یا سرور نیاز ندارد. در اصل اضافه کردن JSX مانند اضافه کرن CSS است. تنها شرط نصب Node.js در کامپوتر است.
به پوشه پروژه خود در ترمینال بروید، و این دو command را paste کنید:
ما در اینجا از npm فقط برای نصب پردازنده JSX استفاده می کنیم. شما به آن نیاز ندارید، هردو React و کد برنامه را تغییر دهید می توانید به عنوان تگ های بدون تغییر باقی بماند.
تبریک می گویم! شما فقط یک مجموعه JSX آماده تولید را به پروژه خود اضافه کرده اید.
پوشه ای بنام src ایجاد کنید و این دستور را در ترمینال اجرا کنید:
npx یک تایپ (typo) نیست – این یک ران کنند پکیج (package runner tool) است که با npm 5.2+ ارائه می شود.
اگر پیغام خطایی را مشاهد می کنید که می گوید “You have mistakenly installed the babel package”، ممکن است مرحله قبل را درست انجام نشده باشد. آن را در همان پوشه انجام دهید و دوباره امتحان کنید.
منتظر تمام شدن آن نباشید – این دستور یک automated watcher برای JSX شروع می کند.
اگر الان یک فایل به نام src/like_button.js با این کد شروع JSX بسازید، واچر(watcher ) مانند قبل like_button.js را پردازش می کند با کد ساده JavaScript مناسب برای مرورگرها. وقتی سورس کد را با JSX ویرایش می کنید، تبدیل کننده (transform) به صورت خودکاردوباره اجرا می شود.
به عنوان پاداش، این همچنین به شما این امکان رو می دهد از ویژگی های بروز JavaScript مانند class ها استفاده کنید بدون اینکه نگرانی درمورد مرورگر های قدیمی باشید. ابزاری که از آن استفاده کردیم بابل (Babel) نامیده می شود و می توانید درباره مستندات آن اطلاعات بیشتری کسب کنید.
اگر دقت کرده باشید برای راحت شدن کار ابزار های بیشتری میخواهیم، دربخش بعدی برخی ازمحبوب ترین وقابل دسترس ترین ابزار های دستی داده شده است. اگر نمی خواهید آن تگ های script به درستی کار می کنند!
این مقاله ترجمه شده در این صفحه است.
ما هروز ترجمه مستندات React js را ذر سایتمون منتشر میکنیم. خوشحال میشیم به سایت ما سر بزنی و نظرتو در مورد مقالات بگی:)
ادرس سایت : learnreactapp.com
