React قسمت اول

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

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

var React = require('react');
var ReactDOM = require('react-dom');

var MyComponentClass = React.createClass({
  render: function () {
    return <h1>Hello world</h1>;
  }
});

ReactDOM.render(
	<MyComponentClass />, 
	document.getElementById('app')
);

کد بالا یک کامپوننت در react ایجاد میکنه

کامپوننت ها چی هستند ؟ کامپوننت ها قطعه کد های کوچک و مفیدی هستند که از آن ها مرتب استفاده می کنند و در قسمت هایی از برنامه استفاده می شوند

به کد زیر دقت کنید :

var React = require('react');

کد بالا یک متغیر ایجاد کرده و متد require استفاده کرده است اما این متد چی هستش ؟

این متد یک آبجکت جاوا اسکریپ ایجاد میکند که در داخل آن مجموعه ای از متد ها قرار دارد و میتوانیم از این آبجکت ها استفاده کنیم

اصطلاح this در ری اکت جی اس

اگه زبان های دیگه کار کرده باشید خیلی ها از واژه this استفاده می کنند به این معنی است که یعنی از این کلاس استفاده شود به مثال زیر توجه کنید تا باز من توضیح بدم

var IceCreamGuy = React.createClass({
  food: 'ice cream',

  render: function () {
    return <h1>I like {this.food}.</h1>;
  }
});

در قطعه کد بالا ما یک کلاس داریم که در این کلاس یک فیلد به اسم food داریم و یک فیلد دیگر به اسم render داریم که تو همه کلاس ها هستش در متدی که در حال اجرا هستش اگر دقت کنید از this.food استفاده کرده و به این معنا که آقای کلاس خان تو همین کلاسی که هستم یه فیلد داریم به اسم food از مقدار اون استفاده کن

Event Handler ها در ری اکت

var React = require('react');
var ReactDOM = require('react-dom');

var Button = React.createClass({
  scream: function () {
    alert('AAAAAAAAHHH!!!!!');
  },

  render: function () {
    return <button onClick={this.scream}>AAAAAH!</button>;
  }
});

ReactDOM.render(
<Button /> , 
document.getElementById('app')
)

به کد بالا دقت کنید ما برای تعریف رویداد اگر یادتون باشه در jsx به صورت camelCase می نوشتم در حالی که در html فرقی نداشت مثلا برای نوشتن رویداد on click به صورت زیر مینوشتیم

<button onClick={this.scream}>AAAAAH!</button>

و نکته ی دیگه این در هنگام اتفاق افتادن اون رویداد حتما باید یه متد اجرا بشه دیگه درسته ؟ حالا ما کجا باید متدمون رو بنویسیم ؟ درست حدس زدین باید در خود کلاس به property تعریف کنیم و در قسمت مقدار یک فانکشن تعریف کنیم

حالا با دانستن این دانش دوباره به کد بالا یک نگاهی می اندازیم یک پروپروتی داریم به اسم scream که یک مقداری رو alert میکنه و حالا در قسمت render دقت کنید توی رویداد onClick از مقدار this.scream استفاده شده و به این معنا است که وقتی اون دکمه کلیک بشه یعنی رویداد کلیک اتفاق بی افتد این رویداد میرود و متد scream رو اجرا میکنه و متد scream هم یک alert بر میگردونه

تا این قسمت داشته باشید بقیه اش در پست بعدی

پست های مرتبط :

React قسمت دوم – استفاده کامپوننت در کامپوننت در React کپی در کلیپ برد با استفاده از جاوا اسکریپت jsx چیست آموزش ساخت ربات تلگرام با روش وب هوک – قسمت اول