× خانه ویدیو دانلود اپلیکیشن درباره ما ورود / ثبت نام

  • خانه
  • ویدیو
  • دانلود
  • اپلیکیشن
  • درباره ما
  • ورود / ثبت نام
  • خانه
  • ویدیو
  • دانلود
  • اپلیکیشن
  • درباره ما
  • ورود / ثبت نام
خانه
|
پست های javascript
|
آموزش React - قسمت اول

مطالب

  • CSS
  • Git
  • HTML
  • Javascript
  • PHP
  • Web

بیشترین بازدید

  • طراحی صفحه ثبت نام و ورود کاربران HTML و CSS

    طراحی صفحه ثبت نام و ورود کاربران HTML و CSS

    با توجه به اینکه در سایت تبلیغات، کاربران جهت ارائه آگهی های خود باید ثبت نام کنند در این قسمت برای ارسال اطلاعات به سمت سرور، با استفاده از تگ های موجود در HTML فرمی را جهت ثبت نام و ورود کاربران ایجاد خواهیم کرد. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
  • ساخت وب سرویس با استفاده از PHP و SOAP

    ساخت وب سرویس با استفاده از PHP و SOAP

    به عنوان توسعه دهنده نرم افزار، توانایی توسعه نرم افزار و سرویس برای محدوده گسترده ای از پلتفرم ها یک مهارت ضروری است. اما برای تحقق این موضوع  نمی توان انتظار داشت که همه از یک پلتفرم یا یک زبان برنامه نویسی استفاده کنند یا اینکه همه پلتفرم ها و زبان ها را پوشش داد، این یک کار نشدنی است. اگر تنها یک استاندارد وجود داشت که به ما اجازه می داد تا کدهای نرم افزارمان را یکبار بنویسیم و دیگران با نرم افزارهای خودشان به آسانی از طریق شبکه با آن ارتباط برقرار می کردند چقدر عالی می شد. خب خوشبختانه وجود دارد و نامش هم  SOAP است. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
  • طراحی صفحه ثبت نام و ورود کاربران PHP و MySQL

    طراحی صفحه ثبت نام و ورود کاربران PHP و MySQL

    برای ثبت اطلاعات کاربران در پایگاه داده سایت، باید با استفاده از PHP اطلاعات ارسال شده توسط کاربر را دریافت کنیم و با استفاده از دستورات MySQL ذخیره کنیم. جهت اجرای کدهای PHP و MySQL در ویندوز باید نرم افزار WAMP یا XAMP را در سیستم خود نصب کنید. با استفاده از این نرم افزار یک لوکال هاست مجازی در سیستم شما شبیه سازی می شود تا کدهای PHP را اجرا و پایگاه داده MySQL را ایجاد کنید. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
  • ساخت وب سرویس RESTful با استفاده از PHP

    ساخت وب سرویس RESTful با استفاده از PHP

    Representational State Transfer یک سبک معماری در وب سرویس است که در آن از آدرس ها برای دستیابی به منابع استفاده می شود. داده ها و توابع در معماری RESTful منابع نامیده می شوند به این جهت که داده ها و توابع در واقع آنچیزی هستند که ما می خواهیم از طریق سرویس به آن متصل شویم. در این پست می خواهیم نشان دهیم که چطور می توان یک وب سرویس RESTful را بدون استفاده از هیچ نوع Framework خاصی در PHP ایجاد کرد. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
  • آموزش نصب و استفاده از Composer

    آموزش نصب و استفاده از Composer

    Composer ابزاری برای مدیریت وابستگی در پروژه های PHP می باشد. زمانی که شما تصمیم می گیرید تا یک پروژه PHP را ایجاد کنید قطعا با مسائلی برخورد خواهید کرد که راه حل آنها استفاده از کتابخانه ها یا پکیج های موجودی است که برای این مساله ها ارائه شده اند زیرا با این کار در فاکتور های مهمی همچون زمان و هزینه صرفه جویی کرده اید و به عبارت دیگر چرخ را از نو اختراع نمی کنید. از این دست مسائل می توان به: اعتبار سنجی کاربر مدیریت پایگاه داده مسیریابی درخواست اشاره کرد. اما در این میان کتابخانه ها یا پکیج های موجود هم دارای وابستگی های خاص خود هستند و به عنوان توسعه دهنده PHP شما باید انرژی مضاعفی را برای یافتن و تطبیق این وابستگی ها صرف کنید. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
  • ساخت WSDL با استفاده از PHP

    ساخت WSDL با استفاده از PHP

    در قسمت قبل ایجاد یک اپلیکیشن سازگار را با استفاده از پروتکل SOAP بررسی کردیم. همینطور نشان دادیم که ساخت سرور و کلاینت SOAP با کتابخانه NuSOAP چقدر آسان است اما در این قسمت می خواهیم WSDL را که در هنگام کار با SOAP حتما استفاده خواهد شد را توضیح دهیم. در اینجا ما در ارتباط با فایل های WSDL و اینکه چطور می توان از آنها استفاده کرد بحث خواهیم کرد همچنین به شما نشان می دهیم که به چه صورت می توان فایل WSDL  را با NuSOAP ایجاد کنید و آن را با مثال های سرور و کلاینت SOAP که در قسمت قبل ایجاد کردیم ترکیب کنیم. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
تبلیغات

دانلودها

  • آموزش لاراول: معرفی و آموزش گام به گام Laravel
  • آموزش ساخت بازی XO با استفاده از React - بخش دوم
  • آموزش ساخت بازی XO با استفاده از React - بخش اول
  • آموزش React - قسمت سوم
  • آموزش React - قسمت دوم

سوالات

  • اضافه کردن یک ستون جدید به جدول موجود در Migration لاراول

    چطور می توانم یک ستون به جدولی که از قبل با استفاده از فریموورک لاراول ایجاد شده است اضافه کنم؟من فایل Migration رو به صورت زیر ویرایش کردم:<?php public function up() { Schema::create('users', function ($table) { $table->integer("paid"); }); }در ترمینال هم دستور php artisan migrate:install  و migrate رو اجرا کردم، اما ستون اضافه نشده است.چطور می توانم ستون مورد نظرم را اضافه کنم؟
  • چک کردن موجود بودن یک رکورد در Laravel

    من تازه کار با فریممورک Laravel رو شروع کردم. چطور می توانم بررسی کنم که یک رکورد موجود است یا خیر؟$user = User::where('email', '=', Input::get('email'));چطور می می تونم بررسی کنم که user$ شامل رکورد هست یا نه؟
  • لاراول 4: چطور می توان در Blade آدرس صفحه را دریافت کرد؟

    من از لاراول نسخه 4 استفاده می کنم، چطور می توانم آدرس یک صفحه را دریافت کنم و در if@ استفاده کنم. می دونم که  می توانم با استفاده از کد PHP زیر این کار را انجام دهم:<?php echo URL::current(); ?>اما در blade چطور می توان این کار را انجام داد؟
  • چطور می توان چندین شرط Where در Eloquent لاراول در نظر گرفت؟

    من از Query Builder لاراول برای ایجاد گزارش استفاده می کنم و گزارشم دارای چندین شرط می باشد.شرط ها را به صورت زیر اعمال کردم اما به نظرم راه جالبی نیست.$results = User::where('this', '=', 1) ->where('that', '=', 1) ->where('this_too', '=', 1) ->where('that_too', '=', 1) ->where('this_as_well', '=', 1) ->where('that_as_well', '=', 1) ->where('this_one_too', '=', 1) ->where('that_one_too', '=', 1) ->where('this_one_as_well', '=', 1) ->where('that_one_as_well', '=', 1) ->get();آیا راه بهتری برای اعمال شرط ها وجود دارد؟
  • چطور می توان گزارش SQL که Query Builder لاراول آن را ایجاد می کند مشاهده کرد؟

    کد زیر را در نظر بگیرید:DB::table('users')->get();من می خوام کد SQL که Query Builder بالا اجرا می کند را دریافت کنم به عنوان مثال در کد بالا کد SQL:SELECT * FROM usersتوسط Query builder اجرا می شود.
  • Eloquent: شمارش و تشخیص خالی بودن

    آیا راهی برای تشخیص اینکه مجموعه بازگشتی از گزارش:$result = Model::where(...)->get() خالی است یا اینکه تعداد عناصر موجود در آن چقدر است وجود دارد؟من در حال حاضر از:!$result استفاده می کنم آیا راه درستی است؟در مورد:count($result)آیا همه موارد را پوشش می دهد؟ به عنوان مثال اگر result خالی باشد؟
  • لاراول 5: نمایش HTML در Blade

    من یک رشته به صورت زیر دارم که شامل تگ HTML می باشد:$text = '<p><strong>Lorem</strong> ipsum dolor <img src="images/test.jpg"></p>'و می خواهم با استفاده از Blade نمایش بدم:{{$text}}اما خود رشته را چاپ می کند و تگ های HTML را رندر نمی کند. چطور می توانم HTML را با Blade در لاراول 5 نمایش بدم؟
  • ReactJSX: استفاده از Props بین کوتیشن

    چطور می توان در JSX از یک مقدار props به عنوان مقدار attribute استفاده کرد؟به عنوان مثال:<img className="image" src="images/{this.props.image}" />و خروجی HTML آن به صورت زیر است:<img class="image" src="images/{this.props.image}"> 
  • ارتباط بین دو کامپوننت در React

    اپلیکیشن من شامل یک لیست با فیلتر های آن و یک button برای تغییر layout می باشد. در حال حاضر از سه کامپوننت:</list></Filters></TopBar>استفاده می کنم. می خوام زمانی که تنظیمات در </Filters> تغییر کرد متدی در کامپوننت </list> برای بروزرسانی view اجرا شود.چطور میتونم بین این سه کامپوننت ارتباط برقرار کنم؟ آیا باید از مدل داده global برای انجام این کار استفاده کنم؟ 
  • Show یا Hide کردن عنصر در React

    من تازه شروع به یادگیری React کردم و دنبال راهی هستم که بتونم یک عنصر روی صفحه را show یا hide کنم.  می خوام زمانی که کلیک کردم، div مربوط به نتایج نمایش داده شود.var Search= React.createClass({ handleClick: function (event) { console.log(this.prop); }, render: function () { return ( <div className="date-range"> <input type="submit" value="Search" onClick={this.handleClick} /> </div> ); } }); var Results = React.createClass({ render: function () { return ( <div id="results" className="search-results"> Some Results </div> ); } }); React.renderComponent(<Search /> , document.body); 

اشتراک

آموزش React - قسمت اول

آموزش React - قسمت اول

۱۲ اسفند ۱۳۹۷
دانیال افشار
1602

React یک کتابخانه مبتنی بر کامپوننت می باشد که توسط فیسبوک و با استفاده از جاوااسکریپت توسعه یافته و ساختن رابط های کاربری را آسان تر کرده است. در این کتابخانه می توانید برای امکاناتی که در اپلیکیشن خود لازم دارید view های ساده ای را طراحی و از آن استفاده کنید. همچنین زمانی که داده های شما در UI تغییر می کند React به شکل موثری آن ها را اداره و به روز می کند.

React مبتنی بر کامپوننت است، و این بدین معنی است که که می توانیم کامپوننت های مختلف را به صورت کاملا مجزا تعریف کنیم و آن ها را برای ساختن UI های پیچیده تر استفاده کنیم. کامپوننت ها ترکیبی از HTML و Javascript هستند که منطق مورد نیاز قسمت های مختلف یک UI را پوشش می دهند. هر اپلیکیشن React حداقل دارای یک کامپوننت می باشد.

در ادامه مطلب همراه من باشید.

در ابتدا یک صفحه Html ایجاد می کنیم و کد زیر را در آن قرار می دهیم.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <!-- We will put our React component inside this div. -->
    <div id="root"></div>
  </body>
</html>

برای اضافه کردن React به صفحه وب می توان به صورت زیر و با استفاده از تگ script کتابخانه را به صفحه اضافه کرد: 

  <!-- ... other HTML ... -->

  <!-- Load React. -->
  <script src="React/react-development.js>"</script>
  <script src="React/react-dom-development.js"></script>
  <script src="React/babel-core-5.8.34.js"></script>

  <!-- Load our React component. -->
  <script type="text/babel" src="example.js"></script>

</body>

توجه داشته باشید که تگ های script را قبل از بسته شدن تگ <body> قرار دادیم.

دو تگ <script> اول React را به صفحه اضافه می کند، تگ <script> سوم مربوط به JSX و کامپایلر Babel می باشد و تگ چهارم فایلی که شامل کدهای ماست را به صفحه اضافه می کند.

نکته:

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

در کنار فایل Html یک فایل جاوااسکریپت با نام example.js ایجاد می کنیم و کد زیر را در آن قرار می دهیم.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

این کد یک تگ <h1> با متن Hello, world! در صفحه، نمایش می دهد.  

قبل از ادامه آموزش، مروری بر JSX خواهیم کرد که یک ابزار کارآمد در کنار React برای توسعه UI می باشد.

معرفی JSX

JSX یک syntax extension برای جاوااسکریپت است که در کنار React برای طراحی UI استفاده می شود که ما در قسمت های بعد از آن برای render کردن عناصر DOM استفاده می کنیم.

به بیان ساده تر با استفاده از JSX می توانیم همانطوری که در یک فایل HTML از ساختار HTML/XML (همانند ساختار درختی DOM) استفاده می کنیم در فایل های جاوااسکریپت هم بدون هیچ مشکلی و به سادگی از همان ساختار استفاده کنیم و کامپایلر Babel این کدها (کدهای JSX) را به کد جاوااسکریپت ترجمه می کند. بر خلاف گذشته که کدهای Javascript را در فایل های HTML قرار می دادیم، حالا و با استفاده از JSX می توانیم کدهای HTML را در فایل Javascript قرار دهیم.

در ادامه با مباحث اساسی JSX که مورد نیاز ما است آشنا می شویم.

به عنوان مثال با استفاده از JSX می توانیم کد JSX/Javascript زیر را بنویسیم:

var nav = (
    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
);

و کامپایلر Babel آن را به کد زیر تبددیل می کند:

var nav = React.createElement(
   "ul",
   { id: "nav" },
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Home"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "About"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Clients"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Contact Us"
      )
   )
);

یا تعریف متغیر زیر را در نظر بگیرید:

const element = <h1>Hello, world!</h1>;

همانطور که syntax کد را مشاهده می کنید نه به صورت یک رشته است و نه به صورت تگ HTML.

چرا JSX؟

React این واقعیت را پذیرفته که منطق render و منطق UI در هم آمیخته است. اینکه چطور رویداد ها مدیریت می شوند، چطور state ها تغییر می کنند و داده ها چطور برای نمایش آماده می شوند مسائلی از این دست هستند که فقط با تکیه بر منطق render یا منطق UI قابل انجام نیست.

کامپوننت های React به ما این امکان را می دهند که به جای جدا کردن کدهای HTML و منطق UI، هر دو تکنولوژی را به صورت واحد در اختیار داشته باشیم.

برای کار با React هیچ اجباری به استفاده از JSX نیست اما اکثر توسعه دهندگان استفاده از آن را در زمان طراحی UI بسیار کارآمد می دانند. همچنین با استفاده از JSX، پیغام خطاهای کارآمد تری را در اختیار خواهیم داشت.

استفاده از JSX

در مثال پایین ما یک متغیر به نام name تعریف کردیم و در خط بعد با استفاده از JSX از این متغیر که در بین دو آکولاد قرار گرفته است استفاده کردیم.  

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

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

شما می توانید هر نوع عبارت جاوااسکریپتی را بین دو آکولاد در JSX استفده کنید. برای مثال: 2+2، user.firstName یا formatName(user) نمونه ای از عبارت جاوااسکریپتی هستند که می توانید استفاده کنید.

در مثال پایین، نتیجه فراخوانی یک تابع جاوااسکریپت به نام formatName(user) را داخل یک تگ <h1> قرار دادیم.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

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

در مثال بالا می توانستیم کدهای JSX را در یک خط بنویسیم اما برای خوانایی بیشتر به صورت چند خطی نوشتیم البته باید توجه داشته باشیم که آن را بین پرانتز قرار دادیم تا از درج سیمی کالن به صورت خودکار در انتهای هر خط جلوگیری کنیم.

عبارات JSX به توابع و اشیا جاوااسکریپت تبدیل می شوند و این بدین معنی است که ما این امکان را خواهیم داشت که از JSX در:

  • حلقه for یا if استفاده کنیم
  • آنها را به متغیر نسبت دهیم
  • به عنوان آرگومان تابع استفاده کنیم
  • و یا آن را از یک تابع return کنیم
function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

مشخص کردن Attribute در JSX

برای مشخص کردن یک Attribute با استفاده از رشته به صورت زیر عمل می کنیم:

const element = <div tabIndex="0"></div>;

و برای مشخص کردن Attribute با استفاده از یک عبارت جاوااسکریپت به صورت زیر:

const element = <img src={user.avatarUrl}></img>;

 بابد به این نکته توجه داشته باشیم که زمانی که یک عبارت جاوااسکریپت را به عنوان مقدار Attribute در نظر می گیریم نباید از کوتیشن استفاده کنیم. زمانی که از یک مقدار نوع رشته به عنوان مقدار Attribute استفاده می کنیم باید از کوتیشن (برای مقادیر رشته ای) و زمانی که از یک عبارت جاوااسکریپت در مقدار Attribute استفاده می کنیم باید از آکولاد (برای عبارات) استفاده کنیم و نمی توانیم هم زمان از هر دوی آنها استفاده کنیم.

نکته

از آنجا که JSX بیشتر شبیه به جاوااسکریپت است تا HTML، React از قرار داد نامگذاری مشخصه به صورت camelCase به جای نام مشخصه های HTML استفاده می کند. به عنوان مثال مشخصه class در JSX به صورت className استفاده می شود و tabindex به صورت tabIndex.

تعریف فرزند با استفاده از JSX

در JSX اگر یک تگ خالی باشد و فرزندی نداشته باشد باید با استفاده از /> بسته شود. به مثال زیر دقت کنید:

const element = <img src={user.avatarUrl} />;

و اگر تگی دارای فرزند باشد به صورت زیر عمل می کنیم:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX جلوگیری از حملات Injection

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

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

 Reactبه صورت پیش فرض همه مقادریر JSX را قبل از render کردن آنها escape می کند. هر چیزی قبل از render شدن به رشته تبدیل می شود و این به جلوگیری از حملات XSS کمک می کند.

Object های JSX

Babel کدهای JSX را به فراخوانی های React.createElement کامپایل می کند.

از اینرو دو مثال زیر با یکدیگر برابر هستند:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

متد React.createElement() کدهای ما را بررسی می کند تا خطایی در آن وجود نداشته باشد و یک شی به شکل زیر ایجاد می کند.

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

چنین اشیایی React elements خوانده می شود و می توان این برداشت را از آن داشت که توصیف آن چیزی است که می خواهیم در صفحه مشاهده کنیم. React این اشیا را می خواند و از آنها برای ساخت DOM و به روز رسانی آن استفاده می کند.

Render کردن عناصر

Element ها کوچکترین قسمت اپلیکیشن های React محسوب می شوند.

یک element شرح آن چیزی است که می خواهیم در صفحه، نمایش دهیم.

const element = <h1>Hello, world</h1>;

در ادامه ابتدا یک تگ div در صفحه HTML تعریف می کنیم و id آن را  root قرار می دهیم.

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

این تگ div را گره DOM ریشه می خوانیم زیرا هر چیزی در آن با استفاده از React مدیریت می شود. اپلیکیشن هایی که فقط با React ایجاد می شوند معمولا دارای یک گره ریشه هستند اما اگر ما React را در یک برنامه import کنیم می توانیم چندین گره root داشته باشیم.

برای render کردن عنصر React در گره root که آن را بالاتر تعریف کردیم، عنصر React و گره با شناسه root را به عنوان آرگومان به تابع ReactDOM.render() ارسال می کنیم.

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

کد بالا Hello world! را در صفحه، نمایش می دهد.

به روز رسانی Element رندر شده

Element های React تغییر ناپذیر هستند. زمانی که یک element را ایجاد می کنیم، نمی توانیم فرزندانش یا attribute های آن را تغییر دهیم. یک element مانند یک فریم در یک فیلم می باشد که UI را در یک نقطه مشخص از زمان نمایندگی می کند. در حال حاضر و با آموخته های ما تنها راه برای بروز رسانی UI ساخت element جدید و فرستادن آن به ReactDOM.render() می باشد .

به عنوان مثال ساعت زیر را در نظر بگیرید:

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

این کد هر ثانیه و با استفاده از متد setInterval()، ReactDOM.render() را فراخوانی می کند.

React فقط تغییراتی را که ضروری است اعمال می کند

در مثال بالا React عنصر مورد نظر و فرزندانش را با خود عنصر، قبل از فراخوانی render مقایسه می کند و تنها تغییرات ضروری را برای اعمال  تغییرات انجام می دهد. در مثال قبلی می توانیم از صفحه inspect بگیریم و این ویژیگی React را مشاهده کنیم.

با اینکه ما یک element تعریف کردیم که در آن کل UI تعریف شده است تنها متن گره ای که محتوای آن تغییر کرده است توسط React به روز رسانی می شود.

Component و Prop

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

کامپوننت به صورت کلاس و تابع

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

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

این تابع یک React Component در نظر گرفته می شود زیرا دارای آرگومان props است و یک عنصر React را بر می گرداند. چنین کامپوننت هایی “function components” در نظر گرفته می شوند در واقع آنها توابع جاوااسکریپت هستند.

همچنین می توانیم از کلاس های ES6 برای تعریف کامپوننت در React استفاده کنیم.

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

دو کامپوننت بالا در React تفاوتی با یکدیگر ندارند.

رندر کردن یک کامپوننت

تا اینجا فقط با عناصر React که تگ های DOM را نمایش می دادند آشنا شدیم.

const element = <div />;

در مثال پایین مشاهده می کنید که چطور می توان از کامپوننت های که تعریف کردیم استفاده کنیم.

const element = <Welcome name="Sara" />;

React زمانی که با یک عنصر کامپوننت که توسط کاربر تعریف شده است مواجه می شود، attribute های JSX را به صورت یک object (که همان props است) به کامپوننت ارسال می کند.

برای مثال این کد “Hello Sara” را در صفحه، نمایش می دهد:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

در مثال بالا:

  1. ReactDOM.render را با عنصر </Welcome name= "Sara"> فراخوانی می کنیم.
  2. React کامپوننت Welcome را با {name: ‘Sara’}  فراخوانی می کند.

  3. کامپوننت Welcome یک عنصر <h1>Hello,Sara</h1> را به عنوان نتیجه بر می گرداند.

  4. ReactDOM، صفحه را برای مطابقت با <h1>Hello,Sara</h1> بروز رسانی می کند.

نکته:

در نامگذاری کامپوننت ها همیشه حرف اول را به صورت بزرگ در نظر می گیریم. React، کامپوننت هایی را که با حرف کوچک شروع شده اند به عنوان تگ DOM در نظر می گیرد. به عنوان مثال <div/> یک تگ div در HTML در نظر گرفته می شود اما <Welcome/> یک کامپوننت است که البته باید در همان Scope تعریف شده باشد.

ترکیب کامپوننت ها

کامپوننت ها می توانند در خروجی های خود از کامپوننت های دیگر استفاده کنند. این مورد به ما این امکان را می دهد تا از یک کامپوننت برای هر موردی مانند button، form یا dialog استفاده کنیم.

در مثال پایین ما یک کامپوننت به نام App تعریف کردیم که Welcome را چندین مرتبه render می کند:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

تقسیم یک کامپوننت بزرگ به کامپوننت های کوچکتر

برای مثال کامپوننت Comment را در نظر بگیرید:

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

این کامپوننت author را به صورت یک object، text را به صورت string و date را به صورت تاریخ در props دریافت می کند و یک Comment را در شبکه اجتماعی توصیف می کند. این کامپوننت می تواند به چندین کامپوننت کوچکتر تقسیم شود که هر یک قابلیت استفاده مجدد را دارد.

در ابتدا می توانیم یک کامپوننت به نام Avatar ایجاد کنیم:

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

در کد بالا و در props، نام عمومی تر user را به جای author در نظر گرفتیم زیرا این کامپوننت می تواند در هر کامپوننت دیگری مانند Comment رندر شود.در  نام گذاری prop ها این موضوع را در نظر داشته باشید که نام ها را با توجه به همان کامپوننت در نظر بگیرید و نه Context که در آن استفاده می شود.

تا اینجای کار توانستیم کامپوننت Comment را مقداری ساده تر کنیم.

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

در قدم بعدی می توانیم کامپوننت UserInfo را که یک Avatar را در کنار نام کاربر render می کند در نظر بگیریم:

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

که باعث می شود تا کامپوننت Comment ما ساده تر شود.

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

تقسیم یک کامپوننت به کامپوننت های کوچکتر ممکن است، کاری اضافه به نظر برسد اما می توانیم یک مجموعه از کامپوننت هایی که دارای قابلیت استفاده مجدد هستند را در اختیار داشته باشیم و از آن ها در اپلیکیشن های بزرگتر استفاده کنیم. به عنوان مثال می توان در دیگر اپلیکیشن ها از کامپوننت هایی مانند Button، Avatar و Panel یا کامپوننت های پیچیده تر نظیر App، FeedStroy یا Comment استفاده کنیم.

Props ها فقط خواندی هستند

زمانی که یک کامپوننت چه به صورت تابعی و چه به صورت کلاس تعریف شود هیچگاه نمی تواند prop های خودش را ویرایش کند.

تابع sum زیر را در نظر بگیرید:

function sum(a, b) {
  return a + b;
}

چنین توابعی اصطلاحا pure خوانده می شود زیرا نمی توانند ورودی هایی که برای آنها در نظر گرفته شده است را تغییر دهند، و همیشه نتیایج مشابه را برای ورودی های مشابه بر می گردانند.

علاوه بر این توابعی مانند توابع زیر که به شکل نادرستی ورودی های خودشان را تغییر می دهند در آینده مشکل ساز خواهند بود.

function withdraw(account, amount) {
  account.total -= amount;
}

React دارای انعطاف پذیری خوبی است اما یک قاعده سختگیرانه دارد:

همه کامپوننت های React باید همانند توابع pure با props ها برخورد کنند. هر چند که UI اپلیکیشن ها پویاست و در طول زمان تغییر می کنند.

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

State و LifeCycle در React

مثال ساعت را که، بالاتر بررسی کردیم در نظر بگیرید. ما از ReactDOM.render() برای تغییر خروجی render شده استفاده کردیم.

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

در این قسمت بررسی می کنیم که چطور می توانیم کامپوننتی به نام Clock ایجاد کنیم که به درستی دارای قابلیت استفاده مجدد باشد و خود کامپوننت دارای تایمر باشد و هر ثانیه به صورت خودکار خودش را بروز کند که در اینصورت دیگر نیازی به setInterval برای بروزرسانی خودش نداشته باشد.

کامپوننت Clock را تعریف می کنیم و آن را در تابع tick به صورت زیر فراخوانی می کنیم:

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

در مثال بالا Clock باید timer خودش را داشته باشد و UI را هر ثانیه بروزر سانی کند. به صورت ایده آل ما باید کد را به صورت زیر بنویسیم و کامپوننت Clock به صورت خودکار بروزرسانی شود.

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

برای پیاده سازی این امکان ما نیاز به اضافه کردن state به کامپوننت Clock داریم.

State شبیه به prop است اما خصوصی است و کاملا توسط خود کامپوننت کنترل می شود.

زمانی که کامپوننت ها را به صورت کلاس تعریف می کنیم می توانیم از ویژگی های بیشتری استفاده کنیم و state یکی از همین ویژیگی هاست.

تبدیل یک کامپوننت تابعی به کلاس

شما می توانید در 5 قدم یک Function component را به Class component تبدیل کنید:

  1. یک کلاس ES6 هم نام با تابع ایجاد می کنیم که از React.Component، با استفاده از extend ارث بری می کند.
  2. یک متد خالی به نام render به کلاس اضافه می کنیم.
  3. کد های موجود در تابع را به متد render اضافه می کنیم.
  4. prop های موجود در کدهای متد render را با this.props جایگزین می کنیم.
  5. تابع مربوط به کامپوننت را حذف می کنیم.
class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

متد render هر زمان که update رخ دهد فراخوانی می شود، اما هر زمان که ما کامپوننت Clock را در یک گره مشابه DOM رندر می کنیم فقط یک نمونه از کلاس Clock استفاده می شود هر چند که کلاس ها امکانات بیشتری مانند: local state و متدهای life cycle.

اضافه کردن Local State به کلاس

در این قسمت ما در سه مرحله داده های لازم را از props به state منتقل می کنیم.

1- جایگزین کردن this.state.date  به جای this.props.date در متد render.

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

2- اضافه کردن class constructor برای نمونه سازی اولیه this.state

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

توجه داشته باشید که باید props را به صورت زیر به base constructor بفرستیم:

constructor(props) {
    super(props);
    this.state = {date: new Date()};
}

Class Component ها همیشه باید base constructor را با props فراخوانی کنند.

3- حذف date از عنصر <Clock />:

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

بعدا کد تایمر را به کلاس اضافه خواهیم کرد اما تا الان کد ما باید بصورت زیر باشد:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

اضافه کردن متدهای Lifecycle به Class

در اپلیکیشن هایی که تعداد زیادی کامپوننت دارند، آزاد کردن منابع تخصیص یافته به آنها زمانی که حذف می شوند اهمیت بالایی دارد.

ما می خواهیم زمانی که Clock در DOM رندر شد یک تایمر داخل کامپوننت شروع به کار کند. که این کار در React، Mounting نامیده می شود. و هر زمان که عنصر ایجاد شده توسط Clock از DOM حذف شد این تایمر هم حذف شود که به این  کار هم در React، Unmounting می گویند.

ما می توانیم در کامپوننت ها متدهای خاصی را برای زمانی که Mount و Unmount می شود تعریف کنیم.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

این متدها lifecycle method  نام دارند.

متد componentDidMount() بعد از اینکه خروجی کامپوننت در DOM رندر شد، اجرا می شود که مکان خوبی برای شروع به کار تایمر می باشد.

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

توجه داشته باشید که چطور شناسه تایمر را در this ذخیره کردیم.

در حالی که this.props توسط React تنظیم می شود و مقادیر this.state دارای یک مفهوم خاص است، شما می توانید فیلدهای مورد نظر خود را که در جریان داده جایگاه مشخصی ندارند به صورت دستی به کلاس اضافه کنید مانند شناسه timer.

در متد componentWillUnmout() تایمر را clear می کنیم.

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

در آخر باید متد tick() را که کامپوننت را هر ثانیه فراخوانی می کند پیاده سازی کنیم. این تابع از متد this.setState() برای بروز رسانی state کامپوننت استفاده می کند.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

حالا دوباره به صورت خلاصه، متد های موجود در کامپوننت Clock را بررسی می کنیم:

  1- زمانی که <Clock /> به تابع ReactDOM.render() ارسال می شود، React، constructor کامپوننت Clock را فراخوانی می کند. از آنجا که Clock به زمان جاری، برای اینکه آن را نمایش دهد نیاز دارد، this.state را با یک object که شامل زمان جاری است نمونه سازی اولیه می کنیم که البته مقدار state بعدا بروز رسانی خواهد شد.

2- سپس React متد render کامپوننت Clock را فراخوانی می کند. React از طریق این متد آن چیزی که باید در صفحه، نمایش دهد را ایجاد می کند. پس از این React، DOM را برای تطابق با خروجی متد render کامپوننت Clock تطبیق می دهد.

3- زمانی که خروجی کامپوننت در DOM وارد می شود، React متد lifecycle، componentDidMount() را فراخوانی می کند. داخل این متد، کامپوننت Clock هر ثانیه متد tick() را اجرا می کند.

4- مرورگر هر ثانیه متد tick() را فراخوانی می کند که در داخل این متد کامپوننت Clock، با فراخوانی متد setState() با یک object که شامل تاریخ جاری می شود UI را بروزرسانی می کند. این نکته را باید در نظر داشته باشیم که زمانی که متد setState فراخوانی می شود، React پس از تغییر state متد render را فرا خوانی می کند تا تغییرات را در UI اعمال کند. این بار this.state.date در متد render متفاوت است و خروجی متد render شامل زمان بروز شده است. React، DOM را طبق تغییرات بروزرسانی می کند.

5- اگر کامپوننت Clock از DOM حذف شود، React متد componentWillUnmount را که یک متد lifecycle است را فراخوانی می کند و در این متد تایمر متوقف می شود.

استفاده صحیح از State

سه نکته مهم در ارتباط با :setState()

1- به صورت مستقیم State را ویرایش نکنید

به طور مثال در کد پایین، کامپوننت رندر مجدد نخواهد شد:

// Wrong
this.state.comment = 'Hello';

و باید به جای آن از setState استفاده کنیم.

// Correct
this.setState({comment: 'Hello'});

تنها جایی که باید از this.state استفاده کنیم داخل constructor است.

2- بروزرسانی State ممکن است به صورت نا همگام باشد

ممکن است React چندین فراخوانی setState را برای حفظ کارایی، تنها یکبار اجرا کند. به همین علت در محاسبه state بعدی باید این نکته را در نظر داشته باشید که ممکن است مقادیر هنوز بروز نشده باشد.

برای مثال ممکن است اجرای این کد در بروز رسانی counter موفقیت آمیز نباشد.

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

برای حل این مشکل می توان از شکل دوم تابع setState که یک تابع را به جای یک شی دریافت می کند استفاده کرد. تابعی که به عنوان آرگومان برای متد setState در نظر می گیریم، state قبلی را را به عنوان اولین آرگومان و props فعلی را به عنوان دومین آرگومان دریافت می کند.  

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

در مثال بالا ما از arrow function به جای regular function استفاده کردیم ولی می توانید از regular function ها هم به صورت زیر استفاده کنید:

// Correct
this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});

3- بروزرسانی های State ادغام می شوند

زمانی که setState را فراخوانی می کنیم، React، object که به state جاری ارائه کردیم را ادغام می کند.

به طور مثال ممکن است state شما شامل چندین مقدار مستقل مانند نمونه زیر باشد:

  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

ما می توانیم آنها را به صورت مستقل با فراخوانی های متعدد setState() بروز رسانی کنیم:

  componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

بنابراین this.setState({comments})، this.state.posts را تغییر نمی دهد اما this.state.comments را به صورت کامل جایگزین می کند.

هیچ یک از کلاس های والد یا فرزند نمی دانند که یک کامپوننت به صورت stateful است یا stateless به همین دلیل است که معمولا state ها local یا encapsulated خوانده می شوند. state از هیچ کامپوننت دیگری به غیر از کامپوننتی که در آن تعریف شده است و مقادیرش در آن set شده قابل دسترسی نیست.

همچنین کاپوننت ها از اینکه کامپوننت های دیکر به صورت class component تعریف شده اند یا function component اطلاعی ندارند.

یک کامپوننت ممکن است state خود را به عنوان props به فرزندانش ارسال کند:

<h2>It is {this.state.date.toLocaleTimeString()}.</h2>

همچنین می تواند state را به کامپوننت های تعریف شده توسط کاربر ارسال کند:

<FormattedDate date={this.state.date} />

کامپوننت FormattedDate داده را در props خود دریافت می کند و هیچ اطلاعی از اینکه این داده از state کامپوننت Clock آمده است یا از props کامپوننت Clock ندارد.

این جریان داده معمولا “top-down” یا “unidirectional” خوانده می شود. هر state همیشه متعلق به یک کامپوننت خاص است، و هر داده یا UI که از آن حاصل می شود فقط می تواند برکامپوننت هایی که در سطح پایینتر آنها هستند تاثیر بگذارد.

اگر یک کامپوننت را آبشاری از prop ها در نظر بگیریم، هر state کامپوننت مانند یک منبع جریان آب اضافی به آن می پیوندد.

برای نشان دادن این موضوع که همه کامپوننت ها از یک دیگر جدا هستند، می توانیم یک کامپوننت App ایجاد کنیم که  سه کامپوننت <Clock>  را به صورت زیر رندر می کند.

function App() {
  return (
    <div>
      <Clock />
      <Clock />
      <Clock />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

هر Clock دارای تایمر مختص به خود می باشد. در اپلیکیشن های React تفاوتی ندارد که یک کامپوننت به صورت statefull است یا stateless و در هر صورت پیاده سازی یک کامپوننت در نظر گرفته می شود. می توانیم از یک کامپوننت stateless در یک کامپوننت statefull و بالعکس استفاده کنیم.

منبع: reactjs.org

ReactJavascript

مطالب مرتبط

آموزش ساخت بازی XO با استفاده از React - بخش دوم
مشاهده

آموزش ساخت بازی XO با استفاده از React - بخش دوم

آموزش ساخت بازی XO با استفاده از React - بخش اول
مشاهده

آموزش ساخت بازی XO با استفاده از React - بخش اول

آموزش React - قسمت سوم
مشاهده

آموزش React - قسمت سوم



نظر شما

مطالب

  • CSS
  • Git
  • HTML
  • Javascript
  • PHP
  • Web

بیشترین بازدید

  • طراحی صفحه ثبت نام و ورود کاربران HTML و CSS

    طراحی صفحه ثبت نام و ورود کاربران HTML و CSS

    با توجه به اینکه در سایت تبلیغات، کاربران جهت ارائه آگهی های خود باید ثبت نام کنند در این قسمت برای ارسال اطلاعات به سمت سرور، با استفاده از تگ های موجود در HTML فرمی را جهت ثبت نام و ورود کاربران ایجاد خواهیم کرد. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
  • ساخت وب سرویس با استفاده از PHP و SOAP

    ساخت وب سرویس با استفاده از PHP و SOAP

    به عنوان توسعه دهنده نرم افزار، توانایی توسعه نرم افزار و سرویس برای محدوده گسترده ای از پلتفرم ها یک مهارت ضروری است. اما برای تحقق این موضوع  نمی توان انتظار داشت که همه از یک پلتفرم یا یک زبان برنامه نویسی استفاده کنند یا اینکه همه پلتفرم ها و زبان ها را پوشش داد، این یک کار نشدنی است. اگر تنها یک استاندارد وجود داشت که به ما اجازه می داد تا کدهای نرم افزارمان را یکبار بنویسیم و دیگران با نرم افزارهای خودشان به آسانی از طریق شبکه با آن ارتباط برقرار می کردند چقدر عالی می شد. خب خوشبختانه وجود دارد و نامش هم  SOAP است. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
  • طراحی صفحه ثبت نام و ورود کاربران PHP و MySQL

    طراحی صفحه ثبت نام و ورود کاربران PHP و MySQL

    برای ثبت اطلاعات کاربران در پایگاه داده سایت، باید با استفاده از PHP اطلاعات ارسال شده توسط کاربر را دریافت کنیم و با استفاده از دستورات MySQL ذخیره کنیم. جهت اجرای کدهای PHP و MySQL در ویندوز باید نرم افزار WAMP یا XAMP را در سیستم خود نصب کنید. با استفاده از این نرم افزار یک لوکال هاست مجازی در سیستم شما شبیه سازی می شود تا کدهای PHP را اجرا و پایگاه داده MySQL را ایجاد کنید. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
  • ساخت وب سرویس RESTful با استفاده از PHP

    ساخت وب سرویس RESTful با استفاده از PHP

    Representational State Transfer یک سبک معماری در وب سرویس است که در آن از آدرس ها برای دستیابی به منابع استفاده می شود. داده ها و توابع در معماری RESTful منابع نامیده می شوند به این جهت که داده ها و توابع در واقع آنچیزی هستند که ما می خواهیم از طریق سرویس به آن متصل شویم. در این پست می خواهیم نشان دهیم که چطور می توان یک وب سرویس RESTful را بدون استفاده از هیچ نوع Framework خاصی در PHP ایجاد کرد. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
  • آموزش نصب و استفاده از Composer

    آموزش نصب و استفاده از Composer

    Composer ابزاری برای مدیریت وابستگی در پروژه های PHP می باشد. زمانی که شما تصمیم می گیرید تا یک پروژه PHP را ایجاد کنید قطعا با مسائلی برخورد خواهید کرد که راه حل آنها استفاده از کتابخانه ها یا پکیج های موجودی است که برای این مساله ها ارائه شده اند زیرا با این کار در فاکتور های مهمی همچون زمان و هزینه صرفه جویی کرده اید و به عبارت دیگر چرخ را از نو اختراع نمی کنید. از این دست مسائل می توان به: اعتبار سنجی کاربر مدیریت پایگاه داده مسیریابی درخواست اشاره کرد. اما در این میان کتابخانه ها یا پکیج های موجود هم دارای وابستگی های خاص خود هستند و به عنوان توسعه دهنده PHP شما باید انرژی مضاعفی را برای یافتن و تطبیق این وابستگی ها صرف کنید. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
  • ساخت WSDL با استفاده از PHP

    ساخت WSDL با استفاده از PHP

    در قسمت قبل ایجاد یک اپلیکیشن سازگار را با استفاده از پروتکل SOAP بررسی کردیم. همینطور نشان دادیم که ساخت سرور و کلاینت SOAP با کتابخانه NuSOAP چقدر آسان است اما در این قسمت می خواهیم WSDL را که در هنگام کار با SOAP حتما استفاده خواهد شد را توضیح دهیم. در اینجا ما در ارتباط با فایل های WSDL و اینکه چطور می توان از آنها استفاده کرد بحث خواهیم کرد همچنین به شما نشان می دهیم که به چه صورت می توان فایل WSDL  را با NuSOAP ایجاد کنید و آن را با مثال های سرور و کلاینت SOAP که در قسمت قبل ایجاد کردیم ترکیب کنیم. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟

دانلودها

  • آموزش لاراول: معرفی و آموزش گام به گام Laravel
  • آموزش ساخت بازی XO با استفاده از React - بخش دوم
  • آموزش ساخت بازی XO با استفاده از React - بخش اول
  • آموزش React - قسمت سوم
  • آموزش React - قسمت دوم

سوالات

  • اضافه کردن یک ستون جدید به جدول موجود در Migration لاراول

    چطور می توانم یک ستون به جدولی که از قبل با استفاده از فریموورک لاراول ایجاد شده است اضافه کنم؟من فایل Migration رو به صورت زیر ویرایش کردم:<?php public function up() { Schema::create('users', function ($table) { $table->integer("paid"); }); }در ترمینال هم دستور php artisan migrate:install  و migrate رو اجرا کردم، اما ستون اضافه نشده است.چطور می توانم ستون مورد نظرم را اضافه کنم؟
  • چک کردن موجود بودن یک رکورد در Laravel

    من تازه کار با فریممورک Laravel رو شروع کردم. چطور می توانم بررسی کنم که یک رکورد موجود است یا خیر؟$user = User::where('email', '=', Input::get('email'));چطور می می تونم بررسی کنم که user$ شامل رکورد هست یا نه؟
  • لاراول 4: چطور می توان در Blade آدرس صفحه را دریافت کرد؟

    من از لاراول نسخه 4 استفاده می کنم، چطور می توانم آدرس یک صفحه را دریافت کنم و در if@ استفاده کنم. می دونم که  می توانم با استفاده از کد PHP زیر این کار را انجام دهم:<?php echo URL::current(); ?>اما در blade چطور می توان این کار را انجام داد؟
  • چطور می توان چندین شرط Where در Eloquent لاراول در نظر گرفت؟

    من از Query Builder لاراول برای ایجاد گزارش استفاده می کنم و گزارشم دارای چندین شرط می باشد.شرط ها را به صورت زیر اعمال کردم اما به نظرم راه جالبی نیست.$results = User::where('this', '=', 1) ->where('that', '=', 1) ->where('this_too', '=', 1) ->where('that_too', '=', 1) ->where('this_as_well', '=', 1) ->where('that_as_well', '=', 1) ->where('this_one_too', '=', 1) ->where('that_one_too', '=', 1) ->where('this_one_as_well', '=', 1) ->where('that_one_as_well', '=', 1) ->get();آیا راه بهتری برای اعمال شرط ها وجود دارد؟
  • چطور می توان گزارش SQL که Query Builder لاراول آن را ایجاد می کند مشاهده کرد؟

    کد زیر را در نظر بگیرید:DB::table('users')->get();من می خوام کد SQL که Query Builder بالا اجرا می کند را دریافت کنم به عنوان مثال در کد بالا کد SQL:SELECT * FROM usersتوسط Query builder اجرا می شود.
  • Eloquent: شمارش و تشخیص خالی بودن

    آیا راهی برای تشخیص اینکه مجموعه بازگشتی از گزارش:$result = Model::where(...)->get() خالی است یا اینکه تعداد عناصر موجود در آن چقدر است وجود دارد؟من در حال حاضر از:!$result استفاده می کنم آیا راه درستی است؟در مورد:count($result)آیا همه موارد را پوشش می دهد؟ به عنوان مثال اگر result خالی باشد؟
  • لاراول 5: نمایش HTML در Blade

    من یک رشته به صورت زیر دارم که شامل تگ HTML می باشد:$text = '<p><strong>Lorem</strong> ipsum dolor <img src="images/test.jpg"></p>'و می خواهم با استفاده از Blade نمایش بدم:{{$text}}اما خود رشته را چاپ می کند و تگ های HTML را رندر نمی کند. چطور می توانم HTML را با Blade در لاراول 5 نمایش بدم؟
  • ReactJSX: استفاده از Props بین کوتیشن

    چطور می توان در JSX از یک مقدار props به عنوان مقدار attribute استفاده کرد؟به عنوان مثال:<img className="image" src="images/{this.props.image}" />و خروجی HTML آن به صورت زیر است:<img class="image" src="images/{this.props.image}"> 
  • ارتباط بین دو کامپوننت در React

    اپلیکیشن من شامل یک لیست با فیلتر های آن و یک button برای تغییر layout می باشد. در حال حاضر از سه کامپوننت:</list></Filters></TopBar>استفاده می کنم. می خوام زمانی که تنظیمات در </Filters> تغییر کرد متدی در کامپوننت </list> برای بروزرسانی view اجرا شود.چطور میتونم بین این سه کامپوننت ارتباط برقرار کنم؟ آیا باید از مدل داده global برای انجام این کار استفاده کنم؟ 
  • Show یا Hide کردن عنصر در React

    من تازه شروع به یادگیری React کردم و دنبال راهی هستم که بتونم یک عنصر روی صفحه را show یا hide کنم.  می خوام زمانی که کلیک کردم، div مربوط به نتایج نمایش داده شود.var Search= React.createClass({ handleClick: function (event) { console.log(this.prop); }, render: function () { return ( <div className="date-range"> <input type="submit" value="Search" onClick={this.handleClick} /> </div> ); } }); var Results = React.createClass({ render: function () { return ( <div id="results" className="search-results"> Some Results </div> ); } }); React.renderComponent(<Search /> , document.body); 

اشتراک

منو
خانه
ویدئو
دانلود
اپلیکیشن
درباره ما
خدمات
قالب سایت
خدمات
ما را دنبال کنید
Android Logo
Github Logo
© 2015 - 2023 All rights reserved