برنامه نویسی

🧪Hello World در ReactJS – DEV Community

توضیحات تصویر

👩‍💻چرا واکنش نشان دهیم؟

  • اعلامی است: این کمک می کند تا رابط های کاربری تعاملی را به راحتی ایجاد کنید، زیرا react مراقب به روز رسانی و رندر کردن مؤلفه ها در هنگام تغییر داده ها است.

  • **مبتنی بر مؤلفه: **می‌توانید مؤلفه‌های کپسوله‌شده ایجاد کنید که حالت خودشان را مدیریت کنند، چون منطق مؤلفه‌ها در JS نوشته شده است و نه در قالب‌ها، می‌توانید به راحتی داده‌ها را از طریق برنامه خود منتقل کنید و وضعیت را خارج از SUN نگه دارید. .

📝ویژگی های React

برخی از ویژگی های اصلی React عبارتند از:

  • JSX: پسوند نحو JS که ویژگی های ES6 را گسترش می دهد (ECMAScript 2015). این به ما اجازه می دهد تا منطق JS و نشانه گذاری را در یک جزء ترکیب کنیم.

  • DOM مجازی: این یک کپی از شی DOM است که ابتدا صفحات ما را به‌روزرسانی می‌کند و زمانی که تغییرات ایجاد می‌شود، دوباره ارائه می‌شود. سپس وضعیت فعلی را با DOM اصلی مقایسه کنید تا آن را با تغییرات همگام نگه دارید و در نتیجه رندر صفحه سریعتر انجام شود.

  • اجزاء: برنامه های React از اجزای مختلف قابل استفاده مجدد تشکیل شده اند که منطق و رابط کاربری خاص خود را دارند.

👀حالت چه واکنشی نشان می دهد؟

همچنین به عنوان حالت، دومین نوع داده ای است که کتابخانه JS مدیریت می کند، از داده های داخلی تشکیل شده است که یک جزء می تواند مدیریت کند، با تغییر داده ها، یا با تعامل کاربر یا با دریافت داده از API، وضعیت تغییر می کند. .

😎 قلاب چیست؟

هوک ها توابعی هستند که به شما امکان می دهند وضعیت و چرخه حیات واکنش را از اجزای تابع “قلاب” کنید، آنها در داخل کلاس ها کار نمی کنند – آنها به شما اجازه می دهند از react بدون کلاس استفاده کنید. بیایید به چند هوک داخلی در React نگاه کنیم.

به یاد داشته باشید که ما چندین نوع قلاب داریم، 👀بیایید ببینیم آنها چیست:

قلاب های دولتی:

  • useState: یک Hook است که به شما امکان می دهد حالت React را به یک جزء تابع اضافه کنید.

  • useReducer: به ما اجازه می دهد تا وضعیت اجزای عملکردی خود را دستکاری کنیم، این از طریق:

    • یک تابع کاهش
    • و یک تابع بازگشتی به نام dispatch که می توانیم با آن حالت را ترکیب یا مطابقت دهیم.

قلاب های زمینه

  • useContext: آنها راهی برای به اشتراک گذاشتن حالت خارج از درخت مؤلفه ارائه می دهند.

Ref Hooks

  • useRef: ارجاعات به عناصر DOM را در برنامه React ایجاد و دستکاری کنید.
  • useImperativeHandle: این به ما اجازه می دهد تا مشخص کنیم که کدام ویژگی ها و روش هایی که می خواهیم از مولفه والد قابل دسترسی باشند.

قلاب های اثر

  • useEffect: با استفاده از این هوک، به React می گوییم که کامپوننت باید پس از رندر کردن، کاری انجام دهد.

قلاب های عملکرد

  • useMemo: به شما امکان می دهد نتیجه محاسبه بین رندرها را در حافظه پنهان نگه دارید.
  • useCallback: به شما امکان می دهد تعریف یک تابع را بین رندرهای بعدی ذخیره کنید.

بیایید ببینیم چگونه با استفاده از React یک برنامه ایجاد کنیم ایجاد-واکنش-برنامه:

  1. ما باید به صورت جهانی برنامه create-react-app را نصب کنیم که به آن خواهیم رسید

    npm نصب -g create-react-app

توضیحات تصویر

پس از نصب، می توانیم برنامه خود را با قرار دادن دستور زیر ایجاد کنیم

_نام پروژه create-react-app_

توضیحات تصویر

چیزی که همیشه باید در نظر داشته باشیم 🧐، که یک فایل مهم به آن می گویند package.json، که در آن می توانیم وابستگی ها و اسکریپت هایی را که در پروژه خود استفاده می کنیم پیدا کنیم که به صورت زیر مشاهده می شود.

توضیحات تصویر

🤔 نکته ذهنی 🤔: به یاد داشته باشید که در آن فایل شما قادر خواهید بود اسکریپت هایی را ببینید که با آنها می توانید پروژه خود را اجرا کنید، به طور پیش فرض از npm start استفاده می کنیم.

حالا اگر ما را داشته باشیم Hello World در React، ما می توانیم کارهای بی پایان انجام دهیم، اما این موضوع برای مقاله دیگری است. 😅

توضیحات تصویر

نوشته های مشابه

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

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

دکمه بازگشت به بالا