کامپوننت component ها و پراپس props در ری اکت React

کامپوننت component ها در React قطعات UI مستقل و قابل استفاده مجدد هستند. یک صفحه وب معمولی ممکن است از یکnavbar، قسمت محتوا وfooter تشکیل شده باشد. در React ، ما این قسمت ها را با components ها ایجاد می کنیم. این باعث صرفه جویی در تکثیر کد می شود و همانطور که خواهیم دید ، امکان انعطاف پذیری بی نظیری را فراهم می کند..

روش دیگر برای فكر كردن به کامپوننت components ها اینست که آنها مانند توابع JavaScript هستند. به جای دریافت argument ، آنها “props” را دریافت می کنند ، و سپس عناصر React را برمی گردانند تا آنچه را که روی صفحه می بینیم بسازند!.

کامپوننت component ها

در واقع ، در React  همه چیز کامپوننت component ها هستند ! حتی تگ های HTML

بیایید نگاهی به مثال زیر بیندازیم:

import React from 'react'
import ReactDOM from 'react-dom'


ReactDOM.render(<h1>I'm a component!</h1>, 
document.getElementById('myapp'))

در اینجا ما از JSX برای وارد کردن <h1> من یک  component هستم! </ h1> در id با نام  myapp استفاده کرده ایم که این id  داخل index.html است که میتواند یک div یا هر آن چیزی که نیاز دارید باشد.  h1 ما بعنوان یک component در نظر گرفته شده است که ازطریق React.DOM رندر میشود ، اجرا میشود.

ساخت کامپوننت component

ساخت کامپوننت component چگونه components های خود را بسازیم؟ این جایی است که React با قدرت وارد شده است ، به ما این امکان را می دهد که با ایجاد component خود ، UI مد نظر خود را بسازیم.

ما می توانیم components ها را به 2 روش تعریف کنیم ، بیایید اکنون به هر یک نگاهی بیندازیم:

کامپوننت تابعی (function components)

کامپوننت های تابعی (function components)  در واقع فقط همان توابع JavaScript هستند:

کد2

function Greeting(props) {
  return <h1>Hello, {props.username}!</h1>;
}

آنچه این تابع را به یک component ری اکت تبدیل می کند این است که “props” را به عنوان آرگومان با داده می پذیرد و سپس یک عنصر React را برمی گرداند.

Component کلاسی (class component)

برای ایجاد component مذکور میتوان از کلاس های Es6 استفاده کرد:

کد3

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.username}!</h1>;
  }
}

البته من باید بگویم که استفاده از هر نوع component صحیح است . فقط چیزی که وجود دارد اینست که حداقل در ایران از روش class component در پروژه ها استفاده میکنند . ولی بازهم یادگیری هردو نوع روش تعریف امری است ضروری.

Props پراپس ها

در کل “props” نحوه دستیابی component ها به property های خودشان است. .به مثال زیر دقت کنید:

function Greeting(props) {
  return <h1>Hello, {props.username}!</h1>;
}


const element = <Greet username="Mahdi" />;


ReactDOM.render(
  element,
  document.getElementById('root')
);

اکنون این کد Hello Mahdi را رندر (اجرا) میکند.

در واقع در مثال بالا چه اتفاقی افتاد؟ بیاید بررسی کنیم.

. () ReactDOM.render همراه با المنت <Greet username = ” Mahdi />”فراخوانی می شود.

. ری اکت کامپوننت Greet را با {name: ‘Bruce’} را به عنوان props فراخوانی میکند.

. کامپوننت Greet سلام مهدی Hello Mahdi را به عنوان نتیجه بر میگرداند.

نکته :

توجه: نام component ها را همیشه با یک حرف بزرگ شروع کنید! چرا؟چون React اجزایی را که با حروف کوچک شروع می شوند به عنوان برچسب های DOM در نظر می گیرد.

پراپس ها (props) در کامپوننت تابعی (function components)

لازم به ذکر است که هنگام کار با کامپوننت ها (components) باید میگفتم که کامپوننت ها هر آن داده ای که بخواهند دریافت کنند از کامپوننت والد میگیرن . مانند مثال زیر که ما چیزی را از App.js به صورت props به کامپوننت مذکور فرستادیم اگر هم دقت کنید نحوه فرستادن ما به این شیوه است که ما در کامپوننت تابعی (function component) پراپس (props) را به صورت یک آرگومان به تابع میدهیم و بعد از آن به صورت زیر داخل یک {} مینویسیم.

const BlogPostInfo = props => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  )
}

پراپس ها (props) در کامپوننت کلاسی (class components)

در رابطه با پراپس در کامپوننت کلاسی باید گفت همان توضیحات بالا صدق میکند . فقط نحوه فرستادن پراپس فرق میکند . در اینجا ما از this.component استفاده میکنیم.

مانند نمونه زیر:

import React, { Component } from 'react'


class BlogPostInfo extends Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
      </div>
    )
  }
}

امیدوارم که این مقاله به شما کمک کند . در مقاله های بعد با ما همراه باشید.

برای خواندن مقاله jsx در ری اکت بر روی لینک کلیک کنید

کلمات کلیدی:کامپوننت component ها و پراپس props در React،کامپوننت component ها،ساخت کامپوننت component،کامپوننت تابعی (function components)،Props پراپس ها