آموزش ری اکت (React) در 30 روز - مقدمه و معرفی

27 بهمن 1397
درسنامه درس 1 از سری آموزش react (ری اکت)
React-introduction

سری آموزش رایگان ری اکت React

امروز قصد داریم آموزش ری اکت یا React را شروع کنیم و ببینیم که React برای چه مسائلی کاربرد دارد و توضیح می دهیم که چرا می خواهیم از آن استفاده کنیم.

ری اکت (React) چیست؟

بعد از پایان این 30 روز می توانید به راحتی با بخش های مختلف فریمورک React و اکوسیستم های مربوط به آن کار کنید.

در این 30 روز قدم به قدم به جلو می رویم و در انتهای دوره، شما نه تنها با اصطلاحات، مفاهیم و نحوه کار این فریمورک آشنا می شوید، بلکه می توانید از این به بعد از این فریمورک در برنامه های تحت وب تان استفاده کنید.

React (ری اکت) چیست؟

React (ری اکت) یک کتابخانه جاوا اسکریپت برای ساخت رابط های کاربری است. در حقیقت این کتابخانه برای طراحی لایه View برنامه مورد استفاده قرار می گیرد.

کامپوننت ها قلب React (ری اکت) هستند

کامپوننت ها قلب تمام برنامه های ری اکتی هستند.

کامپوننت یک ماژول مستقل است که وظیفه نمایش خروجی کدهای ری اکت در صفحه وب را به عهده دارد.

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

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

در کامپوننت فرم، ساختار فرم برنامه مان را تعریف کرده و هر کدام از عناصر رابط کاربری را درون آن قرار می دهیم.

هر کامپوننت در یک برنامه ری اکتی از یک سری اصول مدیریت داده پیروی می کند.

رابط های کاربری تعاملی پیچیده، اغلب با داده ها و وضعیت های پیچیده سر و کار دارند.

ری اکت تنها محدود به کار با ظاهر یک برنامه تحت وب می باشد و هدفش این است که به ما ابزاری بدهد تا بتوانیم طرز کار برنامه را پیش بینی کنیم. در ادامه این درس به طور مفصل به تشریح این اصول می پردازیم.

چگونه از ری اکت (React) می توان استفاده کرد؟

ری اکت یک فریمورک جاوا اسکریپت است. استفاده از این فریمورک به آسانی وارد کردن یک فایل جاوا اسکریپت به داخل فایل های html و استفاده از React exports در برنامه است.

برای مثال توسط کدهای زیر به سادگی می توانید یک برنامه Hello World در ری اکت بنویسید.

<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
<!-- Script tags including React -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js
"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/reactdom.
min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">
</script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello world</h1>,
document.querySelector('#app')
);
</script>
</body>
</html>

هر چند کدهای فوق ممکن است ترسناک به نظر برسند، اما در واقع تنها یک خط کد جاوا اسکریپت دارد که به طور خودکار متن hello world را به صفحه اضافه می کند.

نکته مهم این است که برای کار کردن کدهای فوق، تنها باید تعدادی فایل جاوا اسکریپت به صفحه وارد (import) کنیم.

React (ری اکت) چگونه کار می کند؟

Virtual DOM در ری اکت (Reactjs)

بر خلاف اکثر کتابخانه های قدیمی جاوا اسکریپت، ری اکت بطور مستقیم با Dom مرورگر کار نمی کند، بلکه تنها روی یک DOM مجازی کار فعال شده و قابل استفاده است.

یعنی به جای اینکه بعد از انجام هر تغییری که در داده ها اتفاق افتاد، document صفحه را تغییر کند (که با سرعت پایینی اینکار انجام خواهد شد)، تغییرات را روی یک DOM که به طور کامل در حافظه ساخته شده، اجرا می کند.

بعد از اینکه DOM مجازی بروزرسانی شد، ری اکت بطور هوشمندانه این تغییرات را تشخیص داده و آنها را روی DOM واقعی در مرورگر اعمال می کند.

DOM مجازی ری اکت به طور کامل در حافظه قرار می گیرد و در واقع یک نمایش از DOM مرورگر وب است. هنگام نوشتن یک کامپوننت در ری اکت، در حقیقت ما بطور مستقیم DOM واقعی را تغییر نمی دهیم، بلکه یک کامپوننت مجازی می نویسیم که ری اکت آن را تبدیل به DOM می کند.

در مقاله بعدی، مطالبی درباره نحوه ساخت کامپوننت های ری اکت و کار با jsx به شما ارائه می کنیم.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش react (ری اکت) توصیه می‌کند:
نویسنده شوید
دیدگاه‌های شما (6 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

مهران
19 شهریور 1400
سلام، سپاس بابت زحمتی که بابت این آموزش کشیدید. فقط دوست عزیز توی این آموزش ری اکت رو یک جا هم فریم ورک معرفی کردید و جای دیگه کتابخونه.چرا؟ باز هم سپاس

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

مهیا توکلی
13 تیر 1400
ایا این دوره مقدماتی تا پیشرفته هس

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

حمیدرضا
08 مهر 1398
با تشکر از شما، بسیارمفید

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

فاطمه
04 مهر 1398
سلام . ممنون از آموزش خیلی خوبتون یه سوال داشتم من کد بالا رو که اجرا میکنم hello world تویه div ای دی app نمیاد و تو خروجی چیزی چاپ نمیشه . علتش چیه ؟

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

راد
14 شهریور 1398
سلام این آموزش ها براساس کدام ورژن ری اکت تهیه شده؟

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

مهدی
06 تیر 1398
سلام خسته نباشید روی سایتتون فیلم آموزشیreact ندارین؟؟میشه لینکشو بذارین

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

روکسو
06 تیر 1398
سلام. شما می توانید دوره آموزش جامع ری اکت روکسو را از طریق لینک زیر خریداری کنید: دوره آموزش جامع ری اکت

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.