نحوه ایجاد کامپونت های React

[تعداد: 0    میانگین: 0/5]

ایجاد کامپونت های React

کامپوننت های React ، قابل استفاده مجدد و واحد های نمایشی مستقل هستند که می توانند به سادگی داده ها را بروز نمایند.یک کامپوننت می تواند از یک یا چند المنت React ایجاد شود.Props نیز ورودی هایی اختیاری هستند که می توانید از آنها برای پاس دادن داده به داخل کامپوننت استفاده کنید. یک کامپوننت React شبیه function در JavaScript عمل می کند، هر موقع فراخوانی شود خروجی مورد نظر را تولید می کند.

برای ایجاد کامپوننت React می توانید از روش معمولی function و یا سینتکس جدید ES6 استفاده کنید.در این مقاله از دومی استفاده می کنیم زیرا Babel اجازه استفاده از ECMAScript 6 را به ما می دهد. اگر شما می خواهید اطلاعات بیشتری در مورد اینکه چگونه کامپوننت ها را بدون ES6 بسازید ، کسب کنید می توانید به صفحه Components and Props page مستندات رسمی مراجعه کنید.

در پایین می توانید کامپوننت ساده ای که می خواهیم ایجاد کنیم ببینید. هدف ایجاد Notification ساده برای کاربر بعد از لاگین به سایت است.برای این ۳ بخش از داده داریم که مورد به مورد تغییر خواهند کرد. اسم کاربر، تعداد پیام های کاربر، و تعداد notification های کاربر که ما اینها را به عنوان pros پاس خواهیم داد.

هر کامپوننت React یک کلاس جاوااسکریپت است که از کلاس پایه React.Component مشتق شده است. کامپوننت ما Stats نام دارد چون آمار ساده ای در مورد کاربر نشان می دهد.ابتدا یک کلاس با نام Stats بوسیله class Stats extends React.Component{…} ایجاد می کنیم، بعد با فراخواندن متد ReactDOM.render() آن را در صفحه نمایش می دهیم.

class Stats extends React.Component {
  render() {
    return(
       <p className="summary">
         Hi {this.props.name}, you have {this.props.notifications}
         new notifications and {this.props.messages} new messages.
       </p>
    );
  }
}
 
ReactDOM.render(
  <Stats name="John Doe" notifications={5} messages={2} />,
  document.getElementById("myStats")
);

آرگومان اول متد ReactDOM.render() حاوی اسم کامپوننت است و props های آن (name, notifications, و messages) به همراه مقادیرشان.

هنگام مقداردهی برای مقادیر رشته ای از کوتیشن (مثل "John Doe") استفاده می کنیم و مقادیر عددی داخل آکولاد (مثل {۳} )

فایل HTML نهایی به این صورت است :

<html>
 <head>
  <meta charset="utf-8">
  <script src="vendors/react.js"></script>
  <script src="vendors/react-dom.js"></script>
  <script src="vendors/babel.js"></script>
 </head>
 <body>
   <div id="myStats"></div>
   <script type="text/babel" src="component.js"></script>
 </body>
</html>

در این صفحه از مستندات React ، مثال های جالبی در مورد ایجاد و مدیریت کامپوننت های React وجود دارد و همچنین اطلاعات بیشتری در مورد Props!

 

درباره نویسنده:

مطالب زیر را حتما بخوانید

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

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