آموزش ری اکت (React) در 30 روز

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

سری آموزش رایگان ری اکت 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

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

jsx چیست؟

نوشتن اولین کامپوننت (Component) در ری اکت

ساخت کامپوننت های تو در تو و پیچیده در ری اکت

کار با داده ها (Data Driven) و Props در Reactjs

کار با state ها در ری اکت (React)

چرخه حیات (Lifecycle) در ری اکت (React)

اعتبارسنجی مقادیر با propType

استایل ها در ری اکت

تعامل کاربران با نرم افزارهای ری اکت

کامپوننت های خالص در ری اکت

ساخت یک برنامه ری اکت با پکیج create-react-app

تکرار عناصر (حلقه ها) در ری اکت

promise چیست و چه کاربردی دارد؟ (ری اکت)

دریافت داده های خارجی در ری اکت

نمایش داده های خارجی در ری اکت

مسیردهی (Routing) در ری اکت (React)

مقدمه ای بر Flux در ری اکت

آموزش Redux در ری اکت

افزودن Action ها در Redux و React

میان افزارها (Middleware) در Redux

مقدمه ای بر تست نرم افزارهای ری اکتی

آموزش پیاده سازی تست نرم افزارهای ری اکت

تست کردن پروژه ها در ری اکت

تست برنامه های ری اکتی با پکیج Enzyme

یکپارچه سازی تست در ری اکت

آماده سازی برنامه ری اکتی برای انتشار (Deploy)

آپلود یک نرم افزار ری اکت روی سرور واقعی

ایجاد محیط یکپارچه تست در ری اکت

معرفی منابع آموزشی ری اکت - اتمام دوره