React API برای توسعه دهندگان جاوا اسکریپت

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

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

React و DOM (مدل شیء سند)

React از DOM مجازی (Document Object Model) برای به روز رسانی و حفظ وضعیت رابط کاربری استفاده می کند. در صورت نیاز، DOM مرورگر واقعی را به روز می کند.

DOM ساختار یک صفحه وب را به شکل درختی از گره ها نشان می دهد که در آن هر گره یک عنصر HTML، یک ویژگی یا یک گره متن را نشان می دهد. هر زمان که یک صفحه وب تغییر می کند، DOM باید به روز شود تا تغییرات را منعکس کند. شما می توانید زمان واقعی تجسم dom را در اینجا ببینید.

در اینجا چند روش متداول و مهم DOM وجود دارد که برای درک React API باید بدانید.

createElement

این روش همانطور که از نامش مشخص است برای ایجاد عناصر HTML استفاده می شود.

نحو – document.createElement(tagName, options)

مولفه های –

• TagName (رشته): نام عنصر HTML (h1, p, img)
• گزینه ها (شیء): اختیاری

مثال –

const root = document.createElement('div')

مثال بالا یک را ایجاد می کند بخش عنصر و آن را در متغیر ریشه ذخیره کنید.

در اینجا درباره createElement بیشتر بیاموزید.

نوشتن متن در یک گره

در مثال بالا از createElement، یک div HTML خالی ساده ایجاد کردیم. حالا بیایید یاد بگیریم که چگونه یک متن در عنصر HTML بنویسیم.

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

const greeter = document.createElement('p')

اکنون یک تگ پاراگراف ایجاد و در متغیر greeter ذخیره می کنیم. حال برای افزودن محتوای متنی به این عنصر، دو راه وجود دارد.

1. ایجاد یک گره متنی

const textNode = document.createTextNode('Hello World')

با استفاده از این رویکرد، باید یک گره متنی ایجاد کنید و سپس آن را به عنصر سلام/پاراگراف اضافه کنید.

greeter.appendChild(textNode)

این در نتیجه به نظر می رسد <p>Hello World</p>.

1. استفاده از ویژگی textContent

greeter.textContent="Hello World"

این در نتیجه به نظر می رسد <p>Hello World</p>.

الحاق به عنصر موجود

صفحه HTML مجموعه ای از عناصر مختلف است که رابط کاربری را تشکیل می دهند. همچنین می تواند حاوی عناصر تو در تو باشد مانند:

<div id="hero">
  <p>Hello World</p>
</div>

برای ایجاد ساختار فوق، باید متدهای append و appendChild DOM را درک کنیم.

این روش ها برای الحاق یک متن یا یک عنصر جدید به عنصر موجود استفاده می شود.

مثال –

// Creating a div
const root = document.createElement('div')
root.setAttribute('id','hero')

// Creating a paragraph element
const greeter = document.createElement('p')
greeter.textContent="Hello World"

// Append greeter to root

root.append(greeter)

مثال بالا ساختار زیر را ایجاد می کند –

<div id="hero">
  <p>Hello World</p>
</div>

متدهای append و appendChild یکسان کار می کنند. تفاوت اصلی این است که متد append رشته و گره ها را به عنوان پارامتر می پذیرد در حالی که روش appendChild فقط عناصر گره را می پذیرد. متد appendChild رشته ساده را به عنوان پارامتر نمی پذیرد.

root.appendChild('Hello World') // this won't work
root.appendChild(document.createTextNode('Hello World')) // will work

تفاوت دیگر این است که متد appendChild شی گره ضمیمه شده را برمی گرداند در حالی که متد append چیزی را برمی گرداند.

آخرین موضوع ولی به همان اهمیت،

تنظیم ویژگی ها

یک ویژگی راهی برای پیکربندی عناصر HTML است. اینها مقادیر اضافی هستند که می توانند برای تغییر رفتار یک عنصر استفاده شوند.

مثال ها – class, id, src, style

اینها برخی از ویژگی های رایج HTML هستند. لیست دقیق ویژگی ها را می توانید در اینجا بیابید.

DOM متد setAttribute را برای تنظیم ویژگی های یک عنصر HTML فراهم می کند.

نحو – element.setAttribute(name, value)

مولفه های –

1. name (string) : نام صفتی است مانند class, id و غیره.
2. value (string): رشته ای حاوی مقدار یک ویژگی.

مثال –

const root = document.createElement('div')
root.setAttribute('id', 'root')

مثال بالا یک عنصر div با id به عنوان ریشه ایجاد می کند.

<div id="root"></div>

واکنش نشان دهید

React از دو بسته اصلی زیر استفاده می کند:

• React: یک نقطه ورودی به کتابخانه React است. این روش‌های مختلفی را برای ایجاد کامپوننت‌ها، عناصر، refs، قطعات، قلاب‌ها و بسیاری موارد دیگر ارائه می‌کند. این یک API سطح بالای React است.
• ReactDOM: بسته ReactDOM روش های خاص DOM را ارائه می دهد. روش هایی مانند رندر، ایجاد پورتال و غیره را ارائه می دهد.

در این مقاله، سه روش زیر React API را بررسی خواهیم کرد.

1. createElement
2. createRoot
3. ارائه دادن

createElement

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

JSX فقط یک قند نحوی برای تماس است createElement تابع.

بیایید بفهمیم که این تابع چه کاری انجام می دهد.

را createElement تابع به شما امکان می دهد بدون نوشتن JSX یک عنصر React ایجاد کنید.

نحو – createElement(type, props, ...children)

شما همچنین می توانید کودکان را به عنوان بخشی از لوازم جانبی ارسال کنید، سپس نحو تبدیل به

نحو – createElement(type, props)

جایی که پایه ها = {...props, children:[...children]}

مولفه های –

1. type – آرگومان نوع می تواند یک نام برچسب (رشته) باشد مانند div یا span، یا می تواند یک تابع، یک کلاس یا یک قطعه باشد.
2. props – آرگومان props باید یک شی یا تهی باشد. اگر null را پاس کنید، به عنوان یک شی خالی در نظر گرفته می شود.
3. کودکان – می تواند صفر یا بیشتر گره فرزند باشد.

بیایید ببینیم مولفه JSX هنگام نوشتن با استفاده از دستور خام API چگونه به نظر می رسد.

اینجا یک JSX ساده است Greeter جزء.

const Greeter = ({name}) => {
 return <div className="container">
  <p>Hello {name}</p>
 </div>
}

هنگامی که با استفاده از APIهای خام نوشته می شود، JSX بالا چگونه به نظر می رسد.

const elementType="div"
const elementProps = {className: "container"}
const Greeter = createElement(elementType, elementProps, createElement('p', null, 'Hello', name))

می توانید از این لینک برای مشاهده نحوه ترانسفیل شدن JSX در React استفاده کنید.

همانطور که می بینید، کامپوننت با استفاده از createElement شبیه نسخه JSX است اما خواندن و نوشتن آن دشوار است. از این رو، JSX برای نوشتن کامپوننت ها با استفاده از React ترجیح داده می شود.

بیشتر بدانید createElement API در اینجا.

اگر علاقه مند به دیدن کد پیاده سازی هستید createElement در مخزن رسمی React، اینجا را کلیک کنید.

createRoot

این تابع به شما امکان می دهد یک عنصر ریشه برای نمایش برنامه React در داخل یک گره DOM ایجاد کنید. این یک ریشه React از گره DOM داده شده ایجاد می کند.

زیبایی React این است که می توان از آن برای ساخت یک برنامه کامل یا فقط بخشی از برنامه استفاده کرد.

اگر در حال ساخت کل برنامه هستید، در درخت DOM خود تنها گره ریشه واحد خواهید داشت. اگر از React برای ساختن تنها بخشی از برنامه استفاده می کنید، می توانید یک روت جداگانه برای اجزای مختلف ایجاد کنید. شما می توانید از هر عنصر ریشه برای مدیریت یک بخش مختلف از UI استفاده کنید.

نحو – createRoot(domNode, options)

مولفه های –

1. domNode – یک عنصر DOM. عنصر DOM ارائه شده برای ایجاد یک ریشه که در آن برنامه ارائه می شود استفاده می شود. سپس این عنصر ریشه می تواند برای فراخوانی توابعی مانند استفاده شود render برای نمایش محتوای برنامه
2. گزینه ها – یک شی پیکربندی اختیاری.

پس از ایجاد روت، باید تماس بگیرید root.render(<App/>) برای نمایش کامپوننت React در آن.

ارائه دادن

Render روشی است که برای نمایش یک JSX در گره DOM ریشه React استفاده می شود.

نحو – root.render(component)

مولفه های –

1. یک گره React را به عنوان پارامتری که می خواهید نمایش دهید می گیرد. همچنین می تواند یک رشته، عدد، تهی یا تعریف نشده را به عنوان پارامتر بگیرد.

TL; DR

React یک کتابخانه محبوب جاوا اسکریپت است که برای ساخت رابط های کاربر مبتنی بر مؤلفه استفاده می شود. در این مقاله به روش‌های مختلف ارائه شده توسط React API مانند createElement، createRoot، و render.