React.JS چیست؟Reviewed by fartabriz on May 26Rating: 4.5React.JS چیست؟آموزش React.JS - معرفی React.JS - یادگیری React.JS - React.JS چیست؟ - شروع کار با React.JS - درباره React.JS -

React.JS

React.Js چیست؟

React توسط Jordan Walke، یک مهندس نرم افزار در فیس بوک ایجاد شد. React.Js  اولین بار در سال 2011 در روزنامه فیس بوک و در سال 2012 در Instagram.com برگزار شد.React.Js یا همان واکنش، می تواند در توسعه برنامه های کاربردی تک صفحه و برنامه های کاربردی تلفن همراه مورد استفاده قرار گیرد.این هدف عمدتا برای ارائه سرعت، سادگی و مقیاس پذیری است.

React.JS چیست؟

React.JS چیست؟

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


بیشتر بخوانید:

آموزش HTML


React در وب سایت به چند بخش تقسیم شده است:

  1. شروع سریع
  2. راهنماهای پیشرفته
  3. مرجع API
  4. راهنمای مشارکتی
  5. آموزش
  6. پشتیبانی

Hello World: (سلام دنیا)،ساده ترین راه برای شروع با React است که از این مثال Hello World در CodePen استفاده میکنید. شما نیازی به نصب چیزی ندارید شما فقط می توانید آن را در برگه دیگری باز کنید و به دنبال نمونه هایی بروید. به عنوان مثال:

122 - React.JS چیست؟

این یک عنوان است که “سلام، جهان!” را در صفحه نشان می دهد.

به مثال زیر دقت کنید:

123 - React.JS چیست؟

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

  • یادگیری React.js:

راه اندازی: هنگام شروع با React، باید از ساده ترین راه اندازی ممکن استفاده کنید.یک فایل HTML که درکتابخانه React و ReactDOM است را با استفاده از برچسب های اسکریپت در مثال زیر ببینید:

321 - React.JS چیست؟

ما babel را وارد کرده ایم، زیرا React از چیزی به نام JSX برای نوشتن نشانه استفاده می کند.ما باید این JSX را به زیان ساده جاوا اسکریپت تبدیل کنیم تا مرورگر بتواند آن را درک کند.

در این مثال دو چیز وجود دارد:<div> با شناسه #root. این نقطه ورود به برنامه است.

برچسب <“script type = “text / babel> ،جایی است که ما کد React.Js را خواهیم نوشت.

  • اجزاء:

همه چیز در React یک جزء است، و این معمولا به صورت کلاس های جاوااسکریپت است.یک مولفه را با گسترش کلاس React.Component ایجاد کنید.به نمونه زیر دقت کنید:

543 - React.JS چیست؟

سپس روش ها را برای جزء تعریف کنید. در این مثال ما فقط یک روش داریم و آن را ()render نامگذاری می کنیم.

درون رندر () یک توصیف از آنچه میخواهید درصفحه نمایش دهد را مینویسیم. که ما در اینجا می خواهیم متن سلام جهان! را با برچسب H1 نمایش دهد.

برای دریافت رندر کردن برنامه روی صفحه،ما باید از ReactDOM.render () استفاده کنیم.

554 1 - React.JS چیست؟

بنابراین این جایی است که ما مولفه Hello را با نقطه ورود برای برنامه (<div id = “root”> </ div>) متصل می کنیم.این نتایج به شرح زیر است:

5555 - React.JS چیست؟

نحوه HTML به این صورت است که (<h1> و <Hello />) با کد JSX ذکر کردیم. این در واقع HTML نیست، هرچند شما آن را نوشتید، ولی به عنوان تگ های HTML در DOM است.

  • اداره داده ها:

دو نوع داده در React وجود دارد: props و State. تفاوت بین این دو در ابتدا کمی پیچیده است، بنابراین اگرچه کمی گیج کننده است اما وقتی شروع به کار کنید ساده تر می شود.

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

  • غرفه:

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

برای دستیابی به این نوع قابلیت استفاده مجدد،پروکسی را اضافه خواهیم کرد.یعنی پرونده ها را به یک جزء منتقل می کنیم (برجسته به شکل پررنگ)

0000000 - React.JS چیست؟

این پیغام پیام نامیده می شود و دارای ارزش “دوست من” است. ما می توانیم این لینک را درون مولفه Hello با مراجعه به این پرونده، مانند این، دسترسی داشته باشیم:

1111 - React.JS چیست؟

در نتیجه، این بر روی صفحه نمایش داده می شود:

2222 - React.JS چیست؟

دلیل این که ما {this.props.message} را با braces فیشینگ می نویسیم؛این است که ما باید به JSX بگوییم که می خواهیم یک عبارت به جاوا اسکریپت اضافه کنیم.بنابراین اکنون یک مولفه قابل استفاده مجدد را داریم که می تواند هر پیامی را که می خواهیم بر روی صفحه، نمایش دهد.با این حال، اگر ما بخواهیم مولفه را قادر به تغییر داده های خود کنیم ،باید از دولت استفاده کنیم!

  • دولت:

راه دیگر ذخیره سازی داده ها در React ،حالت جزء است. که بر خلاف پروکسی نمی تواند مستقیما توسط کامپوننت تغییر کند.بنابراین اگر می خواهید داده ها را در برنامه خود تغییر دهید مثلا براساس تعاملات کاربرباید آن را در حالت مکانی در جایی از برنامه ذخیره کنید.

  • شروع دولت:

برای مقداردهی اولیه دولت، باید درستی set.state را در روش constructor () کلاس تعیین کنید. دولت یک شی است که در مورد یک کلید به نام پیام است.

6666 - React.JS چیست؟

قبل از اینکه دولت را تنظیم کنیم، باید سوکت () را در سازنده تماس دهیم.

  • تغییر دولت:

برای اصلاح حالت، به سادگی call this.setState ()، passing در شیء حالت جدید به عنوان argument است.که ما این را در داخل یک روش انجام می دهیم که به آن updateMessage می گوییم.

444 - React.JS چیست؟

توجه: برای این کار، ما نیز مجبور بودیم این کلیدواژه را به روش updateMessage بنویسیم. در غیر اینصورت نمیتوانیم به این روش دسترسی داشته باشیم.گام بعدی ایجاد یک دکمه برای کلیک روی آن است به طوری که ما می توانیم روش ()updateMessage را فعال کنیم.بنابراین اجازه دهید یک دکمه را به روش ()render اضافه کنیم.

190 - React.JS چیست؟

در اینجا، ما یک شنونده بر روی دکمه قرار می دهیم، گوش دادن به رویداد onClick باعث می شود، ما روش updateMessage را فراخوانی کنیم.

890 - React.JS چیست؟

سپس method updateMessage calls this.setState () را که این مقدار value.state.message را تغییر می دهد، فراخوانی می کند. و هنگامی که ما روی دکمه کلیک میکنیم، در اینجا این است که چگونه بازی را بازی خواهیم کرد.

 

777 - React.JS چیست؟

تبریک میگم شما موفق شدید درک بسیار ساده ای از مهم ترین مفاهیم React داشته باشد.

source

برای دیدن سایر مقالات این سایت اینجا کلیک کنید.

آموزش سئو

PHP چیست؟

آموزش فوتوشاپ در تبریز آموزش طراحی سایت در تبریز 

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

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

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست