یادگیری مفاهیم React در 5 دقیقه
شنبه 29 تیر 1398آشنایی با مفاهیم پایه ای React در 5 دقیقه امری فوق العاده است. ما در این مطلب قصد داریم مفاهیم پایه ای React را در زمانی کوتاه به شما آموزش دهیم.
در این مقاله قصد داریم با ساخت یک اپلیکیشن ساده درک پایه ای از React به شما بدهیم. به همین علت در این مطلب تمامی چیزهایی که فکر می کنم غیرضروری هستند را دور می ریزم. در حال حاضر ما قصد داریم بر روی مبانی ری اکت تمرکز کنیم و اگر بعد از خواندن این مطلب شما به آن علاقه مند شدید می توانید از سایر منابع رایگان و پولی استفاده کنید.
نصب محیط مورد نیاز
زمانی که شما کار خود را با ری اکت آغاز می کنید، باید از ساده ترین روش برای نصب محیط مورد نیاز استفاده کنید: یک فایل HTML که کتابخانه های ری اکت و ReactDOM را با استفاده از تگ های اسکریپتی ایمپورت می کند.
مانند قطعه کد زیر:
<html> <head> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.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 را نیز ایمپورت کرده ایم، ری اکت از چیزی به نام JSX برای نوشتن نشانه ها استفاده می کند. ما در این جا باید JSX را به زبان ساده جاوا اسکریپت تبدیل کنیم تا مرورگر بتواند آن را متوجه شود.
در این جا دو نکته ی دیگر نیز وجود دارد که از شما می خواهیم که به آنها توجه ویژه ای داشته باشید:
1- <div> به همراه آی دی #root، این جا نقطه ورود به اپلیکیشن ما می باشد، یعنی در واقع اینجا جایی است که برنامه ی ما در آن اجرا می شود.
2- تگ <script type="text/babel"> در داخل بدنه ی کدهای ما جایی است که ما کدهای مربوط به React را می نویسیم.
کامپوننت ها
هر چیزی در داخل ری اکت در واقع یک کامپوننت است که این ویژگی معمولا از کلاس های جاوا اسکریپت گرفته شده است. شما می توانید یک کامپوننت با ارث بری از کلاس React-Component بسازید، اجازه دهید در مثال پایین کامپوننتی بسازیم و آن را Hello بنامیم:
class Hello extends React.Component { render() { return <h1>Hello world!</h1>; } }
حال باید متدها را برای این کامپوننت تعریف کنید، در این مثال ما تنها یک متد خواهیم داشت که آن را render() می نامیم، در داخل این متد یک توضیح بازگردانده می شود که نشان می دهد که شما می خواهید ری اکت چه چیزی را در صفحه برای شما بکشد. در مورد بالا ما به سادگی می خواهیم که یک تگ h1 را نمایش دهیم که عبارت Hello World در داخل آن نوشته شده است.
علاوه بر این ها برای این که اپلیکیشن ما بر روی صفحه اجرا شود ما باید از ReactDOM.render() استفاده کنیم:
ReactDOM.render( <Hello />, document.getElementById("root") );
بنابراین این جایی است که ما کامپوننت Hello خود را به نقطه ی ورودی اپلیکیشن خود متصل می کنیم (<div id="root"></div>).
بنابراین ما به سادگی می گوییم که سلام React، لطفا کامپوننت Hello را در داخل نود DOM با یک آ دی root اجرا کن. نتیجه ی آن به شکل زیر خواهد بود:
در سینتکس مربوط به HTML ما تنها به (<h1> and <Hello/>) نگاه کردیم که یک کد JSX است که من قبلا نیز آن را به شما معرفی کردم. این در واقع HTML نیست، بسیار قوی تر از HTML می باشد، اگر چه شما آن را در تگ های مربوط به HTML در داخل DOM نوشتید.
گام بعدی در اپلیکیشن ما مدیریت کردن داده ها می باشد.
مدیریت داده ها
در داخل React به صورت کلی دو نوع داده وجود دارد: state و prop، تفاوت بین این دو نوع داده در ابتدا کمی پیچیده به نظر می رسد، بنابراین اگر در ابتدا کمی گیج کننده بود نگران نباشید، زمانی که شما شروع به کار کردن با آنها کنید برای شما ساده تر به نظر خواهند رسید. تفاوت کلیدی بین این دو این است که state تنها از داخل یک کامپوننت قابل دسترسی است و می توان آن را تغییر دارد، در حالی که prop ها خارجی هستند و توسط خود کامپوننت مدیریت نمی شوند، در واقع آنها از کامپوننت های سطح بالاتر ارسال می شوند و در واقع آن کامپوننت است که این داده را متغیر می کند.
یک کامپوننت می تواند به صورت مستقیم state داخلی خود را به صورت مستقیم تغییر دهد، اما با این وجود نمی تواند prop های خود را به صورت مستقیم تغییر دهد.
اجازه دهید در ابتدا نگاهی دقیق تر به prop ها داشته باشیم.
Prop ها
کامپوننت Hello ما به صورت کامل استاتیک است، با این حال بخش بزرگی از React قابل استفاده مجدد می باشد، منظور از قابل استفاده مجدد بودن چیست؟ یعنی این که می توان یک کامپوننت را نوشت و در موارد دیگر مانند نمایش دادن پیغام های مختلف نیز از آن استفاده کرد.
برای دست پیدا کردن به این نوع از استفاده مجدد ما prop ها را به کد خود اضافه می کنیم. این کد نشان می دهد که شما چگونه می توانید prop ها را به یک کامپوننت ارسال کنید:
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 ها در کامپوننت می باشد، برخلاف prop ها که نمی توان آن ها را به صورت مستقیم از داخل کامپوننت تغییر داد state ها دارای این قابلیت می باشند.
بنابراین اگر شما بخواهید که داده ها را در داخل اپلیکیشن خود تغییر دهید (به عنوان مثال براساس رابط کاربری) باید داده های خود را در داخل State های کامپوننت ذخیره کنید.
مقداردهی State
برای مقداردهی State به سادگی کافی است که this.state را در داخل کانستراکتور کلاس ست کنید. در واقع 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
برای آن که 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 را بر روی باتن خود قرار می دهیم که منتظر کلیک بر روی باتن می ماند. زمانی که این دکمه فشرده شد ما متد 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 بازدید کنید
- Java Script
- 3k بازدید
- 1 تشکر