فرادرسآموزش React.js در کمتر از ۵ دقیقه — از صفر تا صد
شما در این راهنما برای React.js از طریق ساخت یک اپلیکیشن بسیار ساده به درکی مقدماتی از این کتابخانه محبوب جاوا اسکریپت دست خواهید یافت. در این نوشته تلاش شده است همه مواردی که اساسی محسوب نمی‌شوند، حذف شوند تا این آموزش در حد امکان ساده و کوتاه باشد.
راه‌اندازی اولیه
زمانی که کار خود را با React آغاز می‌کنیم، باید از ساده‌ترین تنظیمات ممکن استفاده کنیم.
بدین منظور یک فایل HTML خواهیم داشت که react و کتابخانه‌های reactDOM را با استفاده از تگ‌های اسکریپت به صورت زیر ایمپورت می‌کند:
<html>
<head>
<script src="https://unpkg.com/react@15/dist/react.min.js"> </script><script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js">
</script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
/*
ADD REACT CODE HERE
*/
</script>
</body>
</html>
همچنین Babel را ایمپورت می‌کنیم، چون React از چیزی به نام JSX برای نوشتن زبان نشانه‌گذاری شده استفاده می‌کند. ما باید این JSX را به جاوا اسکریپت ساده تبدیل کنیم به‌طوری که مرورگر بتواند آن را درک کند. موارد دیگری هستند که باید به آنها نیز توجه داشته باشید:
- تگ <div> دارای id به نام root# یک نقطه ورود برای اپلیکیشن ما محسوب می‌شود. این همان جایی است که اپلیکیشن شروع به کار می‌کند.
- تگ <script type="text/babel"> بدنه اپلیکیشن را تشکیل می‌دهد. این همان جایی است که کل کد React.js قرار می‌گیرد.
کامپوننت‌ها
همه چیز در React یک کامپوننت محسوب می‌شود و این کامپوننت‌ها به طور معمول نوعی از کلاس‌های جاوا اسکریپت هستند. یک کامپوننت را می‌توان با بسط دادن کلاس React-Component ایجاد کرد. در ادامه یک کامپوننت به نام Hello می‌سازیم:
class Hello extends React.Component {
render() {
return <h1>Hello world!</h1>;
}
}
سپس متدهای این کامپوننت را تعریف می‌کنیم. در این مثال، ما تنها یک متد داریم که ()render نام دارد.
درون متد ()render توضیحی از آنچه که React روی صفحه ترسیم خواهیم کرد بازگشت می‌یابد. در مثال فوق تنها می‌خواهیم که یک تگ h1 با متن !Hello World درون آن نمایش دهیم.
برای این که اپلیکیشن کوچک ما متن فوق را روی صفحه رندر کند باید از ()ReactDOM.render نیز استفاده کنیم:
ReactDOM.render(
<Hello />,
document.getElementById("root")
);
این همان جایی است که باید کامپوننت Hello را با نقطه ورود اپلیکیشن (<div id="root"></div>) اتصال دهیم. نتیجه آن به صورت زیر است:
ساختار شِبه HTML که دیدیم (<h1> و <Hello/>) کد JSX است که قبلاً اشاره کردیم. این HTML واقعی نیست با این وجود، آن چه می‌نویسید در نهایت به تگ‌های HTML در DOM منتهی می‌شود.
در مرحله بعد سعی می‌کنیم داده‌ها را در اپلیکیشن خود داشته باشیم.
مدیریت داده‌ها
دو نوع داده در React وجود دارد: props و state. درک تفاوت این دو نوع شاید در آغاز کمی دشوار باشد، بنابراین اگر حس می‌کنید سردرگم شده‌اید جای نگرانی نیست. زمانی که شروع به کار با آنها بکنید، مسائل بسیار آسان‌تر خواهد شد.
تفاوت اصلی این است که state خصوصی است و می‌تواند درون خود کامپوننت تغییر یابد. props بیرونی است و از سوی کامپوننت کنترل نمی‌شود. props از سوی کامپوننت‌های رده‌های بالاتر سلسله مراتب، که داده‌ها را نیز کنترل می‌کنند ارسال می‌شود.
یک کامپوننت می‌تواند مستقیماً state درونی خود را تغییر دهد؛ اما نمی‌تواند رأساً در props تغییری ایجاد کند.
در ادامه نگاهی دقیق‌تر به Props داریم.
Props
کامپوننت Hello ما بسیار استاتیک است و صرف‌نظر از همه مسائل، تنها یک پیام را رندر می‌کند. بخش عمده‌ای از React قابلیت استفاده مجدد آن است یعنی توانایی نوشتن یک باره کامپوننت و سپس استفاده مجدد از آن در موارد مختلف. برای نمونه نمایش پیام‌های متفاوت.
برای رسیدن به این قابلیتِ استفاده مجدد، باید props را اضافه کنیم. روش ارسال props به یک کامپوننت به صورت زیر است:
ReactDOM.render(
<Hello message="my friend" />,
document.getElementById("root")
);
این prop به نام message است و مقدار «my friend» را دارد. ما می‌توانیم با ارجاع به this.props.message به صورت زیر به این prop دسترسی داشته باشیم:
class Hello extends React.Component {
render() {
return <h1>Hello {this.props.message}!</h1>;
}
}
در نتیجه تصویر زیر روی صفحه رندر می‌شود:
دلیل این که {this.props.message} را درون آکولاد گذاشته‌ایم، این است که باید به JSX بگوییم می‌خواهیم عبارت جاوا اسکریپت اضافه کنیم. این کار escaping نام دارد.
بنابراین اینک یک کامپوننت با قابلیت استفاده مجدد داریم که هر پیامی که بخواهیم را روی صفحه رندر می‌کند.
با این وجود، اگر بخواهیم کامپوننتی داشته باشیم که خودش داده‌هایش را تغییر دهد چه باید بکنیم؟ چاره این کار استفاده از state است.
State
روش دیگر برای ذخیره‌سازی داده‌ها در React در State کامپوننت است. برخلاف props که کامپوننت نمی‌تواند مستقیماً آن را تغییر دهد، State از سوی کامپوننت قابل تغییر است.
بنابراین اگر می‌خواهید داده‌ها را در اپلیکیشن خود به طور مثال بر مبنای تعامل با کاربر، تغییر دهید می‌توانید آن را در state کامپوننت در داخل اپلیکیشن ذخیره کنید.
مقداردهی اولیه state
برای مقداردهی اولیه state باید this.state را در متد ()constructor کلاس تعیین کرد. state ما یک شیء است که در مورد این مثال تنها یک کلید به نام message دارد.
class Hello extends React.Component {
constructor(){
super();
this.state = {
message: "my friend (from state)!"
};
}
render() {
return <h1>Hello {this.state.message}!</h1>;
}
}
پیش از آن که state را تعیین کنیم باید ()super را در متد سازنده کلاس فراخوانی نماییم. دلیل این امر آن است که this پیش از آنکه ()super فراخوانی شود، مقدار اولیه خود را از دست می‌دهد.
تغییر دادن حالت
برای تغییر دادن state کافی است ()this.setState را فراخوانی کنیم و شیء state جدید را به صورت آرگومان به آن ارسال کنیم. این کار را درون یک متد که updateMessage نامگذاری کرده‌ایم، انجام می‌دهیم.
class Hello extends React.Component {
constructor(){
super();
this.state = {
message: "my friend (from state)!"
};
this.updateMessage = this.updateMessage.bind(this);
}
updateMessage() {
this.setState({
message: "my friend (from changed state)!"
});
}
render() {
return <h1>Hello {this.state.message}!</h1>;
}
}
برای این که این روش در عمل جواب دهد، باید کلیدواژه this را نیز به متد updateMessage اتصال دهیم. در غیر این صورت نمی‌توانیم به this در این متد دسترسی داشته باشیم.
در مرحله بعد باید یک دکمه ایجاد کنیم که با کلیک روی آن بتوانیم متد ()updateMessage را فراخوانی کنیم. بنابراین یک دکمه به متد ()render اضافه می‌کنیم:
render() {
return (
<div>
<h1>Hello {this.state.message}!</h1>
<button onClick={this.updateMessage}>Click me!</button>
</div>
)
}
در اینجا یک شنونده رویداد (event listener) به دکمه وصل می‌کنیم تا منتظر رویداد onClick آن باشد. وقتی که روی دکمه کلیک شد، متد updateMessage را فراخوانی می‌کنیم. کد کامل کامپوننت به صورت زیر است:
class Hello extends React.Component {
constructor(){
super();
this.state = {
message: "my friend (from state)!"
};
this.updateMessage = this.updateMessage.bind(this);
}
updateMessage() {
this.setState({
message: "my friend (from changed state)!"
});
}
render() {
return (
<div>
<h1>Hello {this.state.message}!</h1>
<button onClick={this.updateMessage}>Click me!</button>
</div>
)
}
}
در این صورت متد updateMessage متد ()this.setState را فراخوانی می‌کند که مقدار this.state.message را تغییر می‌دهد و هنگامی که دکمه کلیک شود، تصویر زیر نمایش می‌یابد:
بدین ترتیب شما توانسته‌اید درکی مقدماتی از مهم‌ترین مفاهیم React به دست آورید. اگر می‌خواهید در این خصوص موارد بیشتری بیاموزید می‌توانید از منابع زیر استفاده کنید:
- مجموعه آموزش‌های طراحی و برنامه نویسی وب
- بهینه‌سازی کد‌های جاوا اسکریپت در سال ۲۰۱۸
- مجموعه آموزش‌های برنامه‌نویسی
- آموزش فریمورک React — ساخت یک سیستم طراحی با قابلیت استفاده مجدد
- ۱۰ کتابخانه و فریمورک جاوا اسکریپت که باید آنها را بشناسید
- بهینه‌سازی کد‌های جاوا اسکریپت در سال ۲۰۱۸
==
