با آموزش فریم ورک محبوب React.js موضوع این مقاله است. البته قبلا هم آموزش هایی در این مورد داشتیم که می توانید اینجا آنها را ببینید.
قبل از شروع آموزش React.js نیاز است با بعضی از مفهوم های موجود در آن آشنا شویم تا بتوانیم چیزهای با معنی و زیبایی توسط ری اکت بسازیم.
React چیست؟
React یک کتابخانه UI است که در فیس بوک توسعه داده شده است تا به ایجاد اجزای رابط کاربری تعاملی و قابل استفاده مجدد کمک کند.React توسط فیس بوک به صورت کاربردی استفاده شده است و برای مثال کل وب سایت Instagram توسط React توسعه داده شده است(اپلیکیشن instagram هم توسط React Native توسعه یافته است).
یکی از نقاط قوت react این است که در می تواند سمت سرور نیز کار کند.همچنین یکی از مهمترین ویژگی های آن قابلیتی بنام Virtual DOM می باشد. در react نیز مثل رقبایش مثل Vue.js یا Angular می توان بخش های مختلف صفحه را داخل کامپوننت هایی قرار داد و بدین ترتیب علاوه بر سازماندهی بهتر سایت، از آنها در جاهای مختلف استفاده مجدد کرد.
قابلیت Virtual DOM چطور کار می کند؟
همانطور که می دانید سرعت تغییر DOM کند است.Virtual DOM همیشه یک کپی از DOM اصلی را در خود نگه می دارد تا موقع آپدیت بخشی از DOM ، نیازی به تغییر همه بخش ها نباشد و فقط بخشی که دست خوش تغییر شده است در DOM اصلی تغییر کند که این کار باعث افزایش سرعت آن شده است.
در واقع هنگامی که نیاز به آپدیت بخشی از DOM باشد ، react الگوریتم Diffing را اجرا می کند و تفاوت های بین DOM مجازی خودش و DOM اصلی را می فهمد و سپس فقط آن تفاوت ها را به DOM اصلی می فرستد.
شروع کنیم
برای شروع react، ابزار React CLI Tool را نصب کنید و بعد دستورات زیر را در خط فرمان ویندوز یا ترمینال لینوکس اجرا کنید تا برنامه جدید react برایتان نصب شود:
# Install the CLI tool npm install -g create-react-app # Create an app create-react-app my-app-name # Install Dependencies cd my-app-name npm install
همچنین می توانید از این JSFiddle فورک کنید:
تنظیم صفحه
شما باید react.js و react-dom.js و همچنین کامپایلر Babel را وارد صفحه کنید. بعد کامپوننت خود را داخل تگ script که خصیصه type آن مساوی text/babel باشد بنویسید:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://unpkg.com/react@latest/dist/react.js"></script> <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script> <script src="https://unpkg.com/[email protected]/babel.min.js"></script> </head> <body> <div id="myDiv"></div> <script type="text/babel"> <!-- React Code Goes Here --> </script> </body> </html>
در react، هر کامپوننت به یک تگ HTML متصل می شود، پس در این مثال می توانیم از myDiv به عنوان نگهدارنده آن استفاده کنیم.
البته روش بالا شاید آسان ترین راه شروع یادگیری react باشد ولی استفاده از Browserify یا Webpack برای مجزا کردن کامپوننت ها در فایل های مجزا روش بهتری خواهد بود.
مقدمات
اجزای اولیه react همان کامپوننت ها هستند. یکی مثل این:
<script type="text/jsx">
/** @jsx React.DOM */
React.render(
<h1>Hello, world!</h1>,
document.getElementById('myDiv')
);
</script>اگر قبلا یکی از این کدها ندیده باشید احتمالا از دیدن JavaScript و HTML کنار هم متعجب شده اید.
JSX
اسم این زبان که در بالا دیدید JSX است.با JSX می توانید تگ های مشابه HTML را داخل جاوا اسکریپت بنویسید. به این علت گفتم مشابه HTML چون واقعا تگ های HTML نیستند و در واقع آبجکت های نمایشی مبتنی بر XML هستند.
شما از اکثر خصیصه هایی که برای HTML استفاده می کردید می توانید اینجا نیز استفاده کنید به جز بعضی ها مثل class که در jsx باید با className جایگزین شود و یا خصیصه for باید htmlFor نوشته شود.علت این کار رزرو بودن این کلمات در خود JavaScript است . تفاوت های دیگر را می توانید اینجا مطالعه کنید.
کامپوننت ها
برای دیدن نتایج خروجی کامپوننت باید از دستور render استفاده کنیم.آرگومان اول این متد همان کامپوننتی است که می خواهیم رندر کنیم و آرگومان دوم تگی است که محتویات باید داخل آن قرار گیرند. برای ایجاد کلاس های سفارشی کامپوننت می توانید از متد createClass استفاده کنید. مثل این:
var MyComponent = React.createClass({
render: function(){
return (
<h1>Hello, world!</h1>
);
}
});بعد از ایجاد کلاس می توانیم آن را به صورت زیر داخل صفحه ببینیم:
React.render(
<MyComponent/>,
document.getElementById('myDiv')
);دقت کنید که تگی با id مقدار myDiv در صفحه باشد.
Props
وقتی می خواهیم از کامپوننت هایی که تعریف کرده ایم استفاده کنیم، می توانیم خصیصه هایی بنام props به آن اضافه کنیم. این خصیصه ها را می توان داخل کامپوننت با this.props خواند و وسیله ای برای فرستادن اطلاعات داینامیک به داخل کامپوننت هستند:
var MyComponent = React.createClass({
render: function(){
return (
<h1>Hello, {this.props.name}!</h1>
);
}
});
React.render(<MyComponent name=”Handsome” />, document.getElementById(‘myDiv’));
مشخصات، چرخه عمر و حالت
متد render تنها نیازمندی ما برای رندر و دیدن یک کامپوننت در صفحه است.ولی متدهای دیگری هم وجود دارند که بعضی مواقع می توانند مفید باشند.
متدهای lifecycle (چرخه زندگی)
برخی از متدهایی که باید بشناسید:
- componentWillMount – فقط یکبار قبل از رندر در سمت کاربر و سرور اجرا می شود.
- componentDidMount – فقط یکبار در سمت کاربر و بعد از رندر اجرا می شود.
- shouldComponentUpdate – مقداری که مشخص می کند کدام کامپوننت باید آپدیت شود بر می گرداند.
- componentWillUnmount – قبل از unmount کامپوننت اجرا می شود.
مشخصات
- getInitialState – مقدار اولیه state را بر می گرداند.
- getDefaultProps – اگر props ها موجود نباشند ، مقدار پیش فرض شان را مشخص می کند.
- mixins – آرایه ای از اشیا که قابلیت های فعلی کامپوننت را گسترش می دهند.
State
هر کامپوننتی یک شی state و یک شی props دارد.state توسط متد setState تنظیم می شود.فراخوانی setState باعث بروزرسانی رابط کاربری هم می شود.اگر بخواهید یک state ابتدایی قبل از اینکه هر واکنشی رخ دهد تنظیم کنید می توانید از متد getInitialState استفاده کنید. پایین نمونه آن را می بینید:
var MyComponent = React.createClass({
getInitialState: function(){
return {
count: 5
}
},
render: function(){
return (
<h1>{this.state.count}</h1>
)
}
});رویدادها
react همچنین یک سیستم رویدادهای جامع دارد. رویدادها به عنوان خصیصه های کامپوننت ها اضافه می شوند و می توانند متدها را صدا بزنند. یک نمونه برای افزایش یک رقم را در زیر می بینید:
/** @jsx React.DOM */
var Counter = React.createClass({
incrementCount: function(){
this.setState({
count: this.state.count + 1
});
},
getInitialState: function(){
return {
count: 0
}
},
render: function(){
return (
<div class="my-component">
<h1>Count: {this.state.count}</h1>
<button type="button" onClick={this.incrementCount}>Increment</button>
</div>
);
}
});
React.render(<Counter/>, document.getElementById('myDiv'));این پن را ببینید.
جریان داده یک طرفه
در react جریان داده های برنامه بوسیله اشیا state و props یک طرفه است بر خلاف جریان دو طرفه مثل Angular. پس در یک سلسله مراتب با کامپوننت های تو در تو، کامپوننت والد باید state را مدیریت کرده و آن را به فرزندان پایین تر خود بوسیله props پاس دهد.
state شما باید بوسیله setState بروزرسانی شود تا از ریفرش UI مطمئن شوید.
برای دیدن این مفهوم کد زیر را ببینید:
/** @jsx React.DOM */
var FilteredList = React.createClass({
filterList: function(event){
var updatedList = this.state.initialItems;
updatedList = updatedList.filter(function(item){
return item.toLowerCase().search(
event.target.value.toLowerCase()) !== -1;
});
this.setState({items: updatedList});
},
getInitialState: function(){
return {
initialItems: [
"Apples",
"Broccoli",
"Chicken",
"Duck",
"Eggs",
"Fish",
"Granola",
"Hash Browns"
],
items: []
}
},
componentWillMount: function(){
this.setState({items: this.state.initialItems})
},
render: function(){
return (
<div className="filter-list">
<input type="text" placeholder="Search" onChange={this.filterList}/>
<List items={this.state.items}/>
</div>
);
}
});
var List = React.createClass({
render: function(){
return (
<ul>
{
this.props.items.map(function(item) {
return <li key={item}>{item}</li>
})
}
</ul>
)
}
});
React.render(<FilteredList/>, document.getElementById('myDiv'));این پن را ببینید.
در پایان
حالا که بعضی از مقدمات React را مرور کردیم بهتر از وقت بگذارید و React API و کمی JSX را مطالعه کنید.
در مقالات بعدی سعی می کنیم بیشتر وارد React شویم و نحوه رندر سمت سرور و سمت کاربر را یاد بگیریم.
