زبان برنامه نویسی جاوا اسکریپت که در حوزه فرانت اند کاربردهای بسیار زیادی دارد، دارای فریم ورک ها و کتابخانه های زیادی است که هر یک از آنها در حوزه مشخصی کاربرد خاص خود را دارند. ری اکت نیز یکی از کتابخانه های جاوا اسکریپت است که به دلیل گستردگی و وسعت خود، در دسته فریم ورک ها قرار می گیرد و بستر مناسبی را برای برنامه نویسی در زمینه توسعه وب فراهم میکند. در این مطلب به طور کامل به شما میگوییم که ری اکت چیست و چه کاربردها و ویژگی هایی دارد.
ری اکت یکی از کتابخانه های اوپن سورس (متن باز) جاوا اسکریپت هست که طبق گفته داکیومنت خود آن برای ساخت رابط های کاربری وب سایت ها مورد استفاده قرار می گیرد.
کتابخانه ری اکت توسط جامعه ای از توسعه دهندگان فیس بوک ارائه شد. ریکت ابتدا در سال 2011 با هدف استفاده توسط خود فیسبوک ایجاد شد اما بعد ها با توسعه بیشتر و تکمیل شدنش در سال 2013 به یک کتابخانه عمومی برای استفاده همه برنامه نویس ها تبدیل شد.
در پاسخ به سوال خصوصیات فریم ورک react چیست؟ باید بگوییم فریم ورک ری اکت نسبت به سایر فریم ورک‌های جاوا امتیازات زیادی دارد. از جمله مهم‌ترین خصوصیات فریم ورک ری اکت که آن را از سایر فریم ورک‌ها متمایز میکند، می‌توان به موارد زیر اشاره کرد:
امتیازات زبان ری اکت این فریم ورک را به یک فریم ورک پرتقاضا و کاربردی در توسعه‌ی وب تبدیل کرده. اما ببینیم چه چیز باعث شهرت زبان react شد:
در این قسمت به این سوال پاسخ می دهیم که استفاده از سینتکس JSX در ری اکت یعنی چه؟ همان طور که اطلاع دارید کتابخانه زبان برنامه نویسی react از سینتکسی به اسم JSX استفاده می کند. Jsx مخفف Java Script XML هست. برای این که نحوه نوشتن این سینتکس را یاد بگیرید باید با مفهوم XML آشنا باشید.
اگر بخواهیم خیلی خیلی ساده و خلاصه توضیح بدهیم، XML را همان HTML در نظر بگیرید اما با این تفاوت که در Html تگ های از پیش تعیین شده وجود دارند که فقط مجاز به استفاده از این تگ ها هستیم و نمی توانیم از تگ هایی با اسم دلخواه استفاده کنیم. به عنوان مثال نمی توانیم از تگی به اسم <Amin> استفاده کنیم.
اما شما در XML می توانید تگ هایی با اسامی دلخواه را ایجاد کرده و از آنها استفاده کنید. داخل ری اکت هم شما می توانید قسمت های مختلف وب سایتتان را با اسم های دلخواه ایجاد کرده و استفاده کنید.
اکنون که دانستیم منظور از xml در تعریف ری اکت یعنی چه، به معنای jsx بپردازیم. به طور کلی Jsx یعنی این که ما داخل صفحات جاوا اسکریپت کد هایی در قالب Html و Xml بنویسیم. به همین دلیل در پروژه هایی که با فریمورک ری اکت توسعه داده می شوند هیچ خبری از فایل Html نیست و تمام کد های Html توسط فایل های جاوا اسکریپت Render میشوند.
همان طور که در داکیومنت آموزش react گفته شده، ری اکت یک لایبرری کامپوننت بیس هست. ممکن هست برایتان سوال شود که معنی و مفهوم کامپوننت چی هست؟! کامپوننت یعنی یک تکه کوچک از یک چیز بزرگ.
یعنی ری اکت وب سایت شما را تبدیل به تکه های کوچیک کرده و با قرار دادن این تکه های کوچک در کنار همدیگر، وب سایت شما ساخته میشود.
حال ممکن هست برایتان سوال شود که این Component Based بودن زبان برنامه نویسی react چه فایده ای دارد و چه قابلیت مثبتی به ما می دهد.
تا اینجا مفهوم کامپوننت را اینطور گفتیم که یک تکه کوچک از وب سایت ما؛ مثل هدر، فوتر، باکس محصول، نوبار و ….
همان طور که می دانیند هدر و فوتر در همه صفحه های یک وب سایت یکسان هستند و تغییری نمی کنند.
حال فرض کنید وب سایت ما 10 صفحه دارد و قطعا فوتر همه صفحات باید یکی باشد. به جای این که تمام کد های فوتر را در همه 10 صفحه بنویسیم، فوتر را تبدیل می کنیم به یک کامپوننت، با اسم مثلا Footer.js.
از این به بعد در هر کدام از صفحه های وب سایتمان که به فوتر نیاز داشتیم، به جای تکرار چند خط کد های فوتر فقط اسم کامپوننت Footer را می نویسیم.
این موضوع خوانایی کدهای مان را افزایش می دهد، تست نویسی را راحت تر کرده، دیباگینگ را راحت تر می کند و … بسیاری مزایای دیگر.
مثلا اگر شما سایتتان را با ریکت به صورت Component Based توسعه داده باشید و در قسمتی از وب سایتتان مشکل و باگی وجود داشته باشد، خیلی راحت اطلاع دارید که مشکل در کدام کامپوننت رخ داده و آن را حل می کنید و با قسمت های دیگر وب سایتتان درگیر نمی شوید و وقتتان را تلف نمی کنید.
همان طور که میدانید ری اکت یکی از لایبرری (کتابخونه) های زبان جاوا اسکریپت است. پس در وهله اول متوجه می شویم که یکی از پیش نیاز های آموزش react تسلط داشتن روی جاوا اسکریپت است.
اما از آن جایی که بعد ها جاوا اسکریپت آپدیت شد و ورژن های 6 الی 11 را هم ارائه داد و در هر ورژن قابلیت ها و امکانات جدیدی به جاوا اسکریپت اضافه کرد، برای شروع ری اکت علاوه بر جاوا اسکریپت 5 باید حداقل با نسخه 6 (Es6) کار کرده باشید.
حالا ممکن هست برایتان سوال پیش بیاید که چه اندازه باید جاوا اسکریپت بلد باشیم تا بتوانیم کار با فریمورک ری اکت را شروع کنیم.
این سوال را خیلی از دوستانی می پرسند که به تازگی وارد این حوزه شده و سردرگم هستن در مورد این که برای شروع ری اکت چقدر و چه مباحثی از جاوا اسکریپت را باید بلد باشیم.
برای این سوال جواب های مختلفی می توان ارائه کرد و همین طور هیچ جواب منطقی ندارد(عجب! الان برایتان واضح تر میگم)
یک جواب این است که بگوییم “شما برای شروع ری اکت باید به اندازه ای جاوا اسکریپت بلد باشید که تمام پروژه هایی را که می خواهید با ری اکت بنویسید، بتوانید با خود جاوا اسکریپت هم پیاده سازی کنید”.
به عنوان مثال به یاد دارم که یک بار در یکی از گروه های پرسش و پاسخ برنامه نویسی در تلگرام یکی از دوستان سوالی در مورد جاوا اسکریپت پرسیده بود و یکی دیگر از دوستان قصد راهنمایی ایشان را داشت. این دوست عزیز یک راهنمایی کوچک کرده و سپس عینا همین جمله را گفت که “میدونم در ری اکت چطور نوشته میشه، ولی نمیدونم در جاوا اسکریپت چطوری باید نوشت”!!
اگر بخواهیم منطقی نگاه کنیم مسیر رسیدن این عزیز به فریم ورک ری اکت کاملا اشتباه بود، چون به جاوا اسکریپت تسلط کافی نداشت و پروژه ای را که با ری اکت میتوانست بنویسد، با جاوا اسکریپت نمی توانست.
ری اکت یکی از لایبرری های جاوا اسکریپت است و شما اگر چیزی را با ری اکت می نویسید، قطعا باید با جاوا اسکریپت هم بتوانید بنویسید.
اما جواب بعدی به این سوال (سوال: برای شروع ری اکت چقدر باید جاوا اسکریپت بلد باشیم؟) را قصد دارم با یک مثال برایتان توضیح بدهم تا کاملا متوجه بشوید.
فرض کنید دقیقا همین سوال را در حوزه های دیگر مثل رانندگی، قنادی، آشپزی بپرسیم. به عنوان مثال سوالمان این باشد که “برای تبدیل شدن به یک آشپز حرفه ای چه غذاهایی را باید درست کرده باشیم و چه دوره های آشپزی را باید گذرونده باشیم؟!”
خب واقعا همچین سوالی جواب ندارد. کاملا واضح هست که شما هر چقدر تجربه آشپزی داشته و با آشپز های حرفه ای سر و کار داشته باشید و ابزار های زیادی در اختیارتان قرار گرفته باشد، به همان اندازه می توانید آشپز حرفه ای باشین.
برنامه نویسی هم دقیقا همینطور است. شما هر چقدر با جاوا اسکریپت بیشتر کار کرده باشید و پروژه های بیشتر با جاوا اسکریپت نوشته باشید و همچنین با لایبرری ها و پلاگین های جاوا اسکریپت آشنایی زیادی داشته باشید، به همان اندازه می توانید با آمادگی و قدرت بیشتر وارد زبان برنامه نویسی ری اکت بشوید.
پس پیشنهاد می کنم همچین سوال هایی را جایی مطرح نکنید و از کسی نپرسید. اگر میخواهید زبان برنامه نویسی react را یاد بگیرید، ابتدا چندین پروژه خوب و قابل قبول بازار کار با خود جاوا اسکریپت پیاده سازی کنید و بعد که بنا به رفرنس ها و داکیومنت جاوا اسکریپت مطمئن شدید روی جاوا اسکریپت تسلط کافی دارید، با قدرت و آمادگی کامل وارد آموزش react شوید.
در این صورت وقتی ریکت را شروع کردید، اذیت نمی شوید و مسیر یادگیریتان هموار تر می شود و در مدت زمانی معقولی میتوانید به سطح خیلی خوبی برسید.
برای جواب دادن به این سوال بهتر است اول توضیحی کوتاهی در مورد تایپ اسکریپت داده شود. تایپ اسکریپت یک زبان برنامه نویسی است که توسط شرکت مایکروسافت ارائه شده و پشتیبانی می شود.
تایپ اسکریپت یک زبان برنامه نویسی اوپن سورس و کامپایلری است که قابلیت های پیشرفته و جدیدی به جاوا اسکریپت اضافه کرده و همچنین برخی از کاستی ها و نقص های جاوا اسکریپت را برطرف کرده است.
به عنوان مثال شما در جاوا اسکریپت نمیتوانید برای متغیر هایی که تعریف می کنید نوع (Type) تعریف کنید اما تایپ اسکریپت به شما این قابلیت را میدهد که بتوانید برای متغیر ها و همچنین ورودی توابع پروژه تان Type تعیین کنید.
حال شاید بپرسید ارتباط تایپ اسکریپت و react چیست. در واقع تایپ اسکریپت بیشتر برای توسعه پروژه های بزرگ مورد استفاده قرار میگیرد. به خاطر همین موضوع شما برای شروع یادگیری ری اکت هیچ نیازی به یادگیری تایپ اسکریپت ندارید اما بعدها که وارد پروژه های بزرگ تری شدید، حتما تایپ اسکریپت را هم در مسیر یادگیری خودتان قرار بدهید.
جلوتر به دام مجازی اشاره کردیم، اما نگفتیم که دقیقا منظور از دام مجازی در react چیست؟ در این قسمت میخواهیم درباره دام مجازی (Virtual Dom) صحبت کنیم. همان طور که می دانید مرورگر با المنت های Html وب سایت شما به طور ساختار درختی برخورد می کند. ممکن است برایتان سوال باشد که منظور از ساختار درختی چیست؟!
کد های زیر را در نظر بگیرید:
<div>
<nav>
<img />
<div></div>
</nav>
</div>
وقتی شما کد های بالا را می نویسید و میخواهید در مرورگر اجرای شان کنید، مرورگر کد های شما را طبق یک ساختار درختی که به آن Dom Tree (درخت دام) می گویند، در کنار هم می چیند و در نهایت برای کد های بالا ساختار زیر را در نظر می گیرد.
حالا شما وقتی با جاوا اسکریپت یک پروژه را می نویسید و در پروژه تان یک قسمتی از سایت را با جاوا اسکریپت تغییر بدهید. یعنی شما می خواهید یک قسمت از Html و Dom وب سایت را با Js تغییر بدهید.
در همین ساختار بالا که توضیح داده شد اگر شما بخواهید تگ img را تغییر بدهید، بقیه قسمت هایی از Dom که به img متصل هستند و با آن ارتباط دارند را هم تغییر داده و آپدیت می کند.
اگر منطقی نگاه کنیم، وقتی تگ img میخواهد اپدیت شود دیگر نیاز نیست هیچ تگ دیگری آپدیت شود و اگر همچین اتفاقی بیفتد ممکن هست در سایت های کوچک تاثیر چشمگیری نداشته باشد ولی در سایت های بزرگ به سرعت به وب سایتتان آسیب جدی وارد می کند.
زبان برنامه نویسی react این مشکل را حل کرده. ری اکت عزیز به جای این که با دام واقعی (Real Dom) کار کند، برای خودش یک دام مجازی (Virtual Dom) در نظر میگیرد و به این ترتیب به محض این که تغییری در یکی از قسمت های سایت اتفاق بیفتد، ری اکت قبل از این که تغییری روی Real Dom انجام دهد، اول خودش داخل Virtual Dom بررسی می کند تا متوجه بشود کدام المنت تغییر کرده و باید آپدیت شود.
بعد از این بررسی، تغییر های لازم را روی Real Dom اعمال می کند. ری اکت به کمک دام مجازی فقط قسمتی که آپدیت شده را تغییر میدهد و به این ترتیب هیچ تاثیر منفی روی سرعت سایت نخواهیم داشت.
چون که مبحث دام مجازی و نحوه عملکردش داخل فریم ورک ری اکت تقریبا بحث تخصصی است، ممکن است با این توضیحات تئوری مفهومش را آنطور که باید متوجه نشوید.
اگر می خواهید بهتر متوجه شوید که مفهوم و عملکرد Virtual Dom در فریم ورک ری اکت چیست، ما آن را به طور کامل در ویدئوی همین مقاله برایتان توضیح دادیم. پیشنهاد می کنم برای این که این قسمت را به خوبی متوجه شوید، حتما ویدئو را مشاهده کنید.
در این قسمت از مقاله میخواهیم با یک مثال ببینیم که چطور یک برنامه ری اکت بسازیم. تا اینجا فهمیدیم فریمورک ری اکت چیست و چه ویژگی‌هایی دارد؛ اما، در بخش میخواهیم زیبایی و سادگی این زبان را به شما نشان دهیم. شما میتوانید کدهای ری اکت را مستقیما داخل کدهای html استفاده کنید.
<html>
<head>
<title>Let's React with npm</title>
</head>
<body>
</body>
</html>
2. کتابخانه‌ی ری اکت را ایمپورت کنید: این کتایخانه در دو فایل .js تعریف شده که یکی برای تولید کنندگان و دیگری برای توسعه دهندگان است.
<!-- Load React Libraries -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
این کد را در تگ هد html باید قرار دهید. کد نهایی به شکل زیر میشود:
<html>
<head>
<title>Let's React with npm</title>
<!-- Load React Libraries -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
</body>
</html>
3. یک نگهدارنده برای مولفه‌ها بسازید: تا اینجای کار متوجه شدید که مولفه یا کامپوننت در ری اکت چیست. حالا برای اینکه بتوانیم از این کامپوننت‌ها در برنامه استفاده کنیم، باید برای آنها یک نگهدارنده بسازیم. برای اینکار ما از یک تگ div در بدنه استفاده می‌کنیم.
<body>
<div id="root"></div>
</body>
4. ساخت کامپوننت: اکنون زمان ساخت کامپوننت‌هاست. شما باید این مولفه‌ها را به صورت کلاس بسازید. به عنوان مثال:
class HelloClass extends React.Component
{
render()
{
return React.createElement('div', null, 'React without npm');
}
}
تابع React.createElement تابعی است که به شما امکان ساخت المان‌ها در ری اکت را میدهد.
5. فراخوانی کامپوننت ری اکت: در مرحله‌ی آخر شما باید کامپوننت خود را از داخل جاوا اسکریپت فراخوانی کنید. تابع React.DOM.render() این کار را برای شما انجام میدهد. در داخل تابع دو آرگومان داریم که اولی کامپوننت را می‌سازد و دومین آرگومان، تابع را داخل نگهدارنده‌ای که ساختیم برای رندر کردن قرار می‌ده
ReactDOM.render(
React.createElement(HelloClass, null, null),
document.getElementById('root')
);
دستور کامل ساخت فایل ری اکت را در ادامه مشاهده می‌کنید:
<html>
<head>
<title>React's React</title>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<div id="root"></div>
<!-- This is embedded JavaScript. You can even place this in separate .js file -->
<script>
= function()
{
class HelloClass extends React.Component
{
render()
{
return React.createElement('div', null, 'React without npm..');
}
}
ReactDOM.render(
React.createElement(HelloClass, null, null),
document.getElementById('root')
);
};
</script>
</body>
</html>
کافیست این کد را در یک فایل متنی ذخیره کرده و روی مرورگر باز کنید.
حال ببینیم منظور از وضعیت (state) و ویژگی (props) در ری اکت چیست و چه کاربردی دارند. در واقع هر دو مولفه برای یک کامپوننت در ری اکت استفاده میشوند؛ ولی تفاوت‌هایی با هم دارند:
یک وضعیت می‌تواند توسط یک ویژگی مقداردهی اولیه شود. مثلا یک کامپوننت والد می‌تواند شامل یک کامپوننت فرزند باشد و یک ویژگی را با سینتکس زیر به او انتقال دهد:
<ChildComponent color=green />
در ساختار کامپوننت فرزند می‌توان به این ویژگی دسترسی داشت:
class ChildComponent extends React.Component {
constructor(props) {
super(props)
console.log(props.color)
}
}
هر متد دیگری در این کلاس می‌تواند با استفاده از this.props به آن ویژگی ارجاع دهد. حال props می‌تواند برای وضعیت‌های داخلی بر اساس مقدارش مورد استفاده قرار گیرد. برای درک بهتر به کد زیر نگاه کنید:
class ChildComponent extends React.Component {
constructor(props) {
super(props)
this.state.colorName = props.color
}
}
البته کلاس می‌تواند وضعیت را بدون توجه به ویژگی نیز مقداردهی کند. شما نمیتوانید props را در نود فرزند تغییر دهید؛ بنابراین هر چیزی که تغییر می‌دهید باید متعلق به وضعیت کامپوننت باشد. با این اوصاف بنظرتان کاربرد ویژگی در ری اکت چیست؟ در واقع ویژگی یا همان props در یک کامپوننت به آن اجازه میدهد که متدهای کامپوننت والد دسترسی پیدا کند و به نوعی یک کنترل مرکزی روی کامپوننت‌های والد ایجاد میکند. جالب است بدانید بعضی از کامپوننت‌ها stateless هستند یعنی فقط بر اساس ویژگی‌ها، چیزهایی را نمایش می‌دهند.
ممکن است دیده باشید که در گروه های مجازی مرتبط با برنامه نویسی وقتی یک نفر در مورد انتخاب بین ریکت، انگیولار و ویو سوال می پرسد، یک شخصی پیشنهاد میکند که آموزش react را دنبال کنید. دلیلش هم این است با آن هم می شود صفحات وب پیاده سازی کرد و هم اپلیکیشن های موبایلی اندروید و IOS.
اینجا میخواهم بگوییم که این حرف و معیار کاملا اشتباه است . چون فقط ریکت نیست که این قابلیت را به شما می دهد. شما بعد از یادگیری انگیولار و ویو هم می توانید اپلیکیشن های موبایلی بنویسید. در این مقاله مقایسه کاملی میان ریکت و ویو انجام داده ایم که می توانید مطالعه نمایید.
همان طور که اطلاع دارید یک فریمورک وجود دارد به نام ریکت نیتیو. شاید ندانید که تفاوت React Native و react چیست. به طور کلی React Native یکی از فریمورک های جاوا اسکریپت است. شما میتوانید به کمک ریکت نیتیو اپلیکیشن های موبایلی برای سیستم عامل های اندروید و IOS پیاده سازی کنید. ریکت نیتیو به قدری قدرتمند است که توانسته سهم زیادی از بازار کار اپلیکیشن های موبایلی را به خودش اختصاص بدهد و رقیب های خودش مثل جاوا، کاتلین، سوئیفت و … را کمرنگ کند. برای اثبات این ادعا کافیست سری به وب سایت های استخدامی مثل کوئرا، جابینجا، استک اور فلو و … برنامه نویسا بزنید.
منبع:
