پیش‌نیازها
- دانش پایه از HTML – CSS و JavaScript
- درک پایه از ویژگی‌های ES6. برای شروع باید با ویژگی‌های زیر آشنا باشید و همچنین خواندن این مقاله به زبان انگلیسی پیشنهاد می‌شود.
- Let
- Const
- Arrow function
- Import و Export
- Class
- دانش استفاده از npm.
شروع به کار
برای شروع میتوانید از ویرایشگرهای آنلاین کد برای تمرین استفاده کنید. همچنین گزینه Create React App برای شروع سریع نیز موجود است. همچنین میتوانید از این محیط توسعه در JSFiddle و یا Codepen برای تمرین استفاده کنید. برای درک مفاهیم پایه ری‌اکت میتوانید از آموزش‌های زیر استفاده کنید:
- مستندات رسمی ری‌اکت (به انگلیسی)
- راهنمای مقدماتی ری‌اکت با کنت سی دادذ (به انگلیسی)
- مفاهیم بنیادین ری‌اکت با سامر بونا (به انگلیسی)
با دنبال کردن آموزش‌های بالا باید درک پایه از مفاهیم اساسی ری‌اکت داشته باشید. تنها همین مقدار آموزش برای شروع توسعه یک وب اپ در ری‌اکت کافی است. اکنون میتوانید به سراغ آموزش ری‌اکت که بطور رسمی توسط خود ری‌اکت منتشر شده است مراجعه کنید. مقاله‌ای بسیار عالی در مورد مفاهیم ری‌اکت که موضوعات مختلف را با جزییات دقیق توضیح می‌دهد. پس از آن باید به سراغ یادگیری اتصال APIها به اپلیکیشن‌های ری‌اکت بروید. این آموزش از ایتان جرل به زبان انگلیسی میتوانید راهنمای خوبی برای یادگیری اتصال API به ری‌اکت باشد.
چند پروژه‌ی پیشنهادی برای ساخت تا اینجا
- todo-app ساده
- ماشین حساب
- سبد خرید
- نمایش اطلاعات کاربری GitHub توسط API گیت‌هاب
React Router
با استفاده از روتر ری‌اکت میتوانید مسیرهای اپلیکیشن تک صفحه‌ای خود را ایجاد کنید. روشی بسیار ساده و قدرتمند برای استفاده در اپلیکیشن‌های ری‌اکت. آموزش‌های مورد نیاز:
- یادگیری روتر ری‌اکت توسط پائول شرمن (به انگلیسی)
- React Router و مقدمه‌ای بر اپلیکیشن‌های تک صفحه‌ای در یوتیوب و در آپارات (به انگلیسی)
- مسیردهی اپلیکیشن‌های ری‌اکت (به انگلیسی)
همین سه آموزش برای شروع مسیردهی در ری‌اکت کافی است.
پروژه‌های پیشنهادی
- یک اپ ساده با قابلیت ایجاد، خواندن، بروزرسانی و حذف (CRUD)
- یک کپی مشابه سایت Hacker News
اگر خیلی به یادگیری در مورد روتر علاقه دارید این مقاله را از دست ندهید.
Webpack
وب‌پک یکی از مشهورترین پکیج‌سازهای ماژول‌های جاوا اسکریپت است. وب‌پک در نگهداری نیازمندی‌ها و متعلقات پروژه به شکل یک فایل ایستا کمک می‌کند تا توسعه دهندگان را از انجام این کار بی‌نیاز سازد. وب‌پک دارای loaderهایی است. لودرهایی که وظایف خاصی را برای پروژه شما انجام می‌دهند. برای افزایش دانش خود در مورد وب‌پک، آموزش‌های زیر را دنبال کنید:
- چه زمانی و چرا از وب‌پک استفاده کنیم
- آموزش وب‌پک در یوتیوب و در آپارات
برای تنظیم محیط ری‌اکت برای استفاده از وب‌پک به این مخزن گیت‌هاب مراجعه کنید. مطالب بالا برای یادگیری ری‌اکت کافی هستند، اما اگر میخواهید دانش عمیق‌تری نسب به ری‌اکت داشته باشید میتوانید این مقاله با عنوان مقدمه‌ای بر وب‌پک یا مستندات رسمی وب‌پک را مطالعه کنید.
رندر کردن در سمت سرور
یکی از جذابترین ویژگی‌های ری‌اکت رندر کردن در سمت سرور است که میتوان از آن برای استفاده با هر نوع تکنولوژی در back-end استفاده کرد. رندر کردن در سمت سرور یا بطور خلاصه SSR در ری‌اکت به شما کمک می‌کند کامپوننت‌هایی را در سمت سرور ایجاد کنید و به شکل HTML در مرورگر رندر کنید، و زمانی که همه ماژول‌های جاوا اسکریپت در مرورگر دانلود شدند، ری‌اکت صحنه را فراخواهد گرفت. بسیار ساده!
در ابتدا نگاهی به React-DOM API بیندازید. و سپس مقالات زیر را برای درک بهتر مطالعه کنید:
Redux
ریداکس کتابخانه‌ای برای جاوا اسکریپت است که برای نهگداری وضعیت‌های(states) اپلیکیشن توسعه داده شده است. زمانی که یک اپلیکیشن پیچیده می‌سازید، باید بتوانید state ها را در طول کامپوننت‌های مختلف مدیریت کنید. ریداکس به شما کمک می‌کند که این وضعیت‌ها را در یک منبع نگهداری کنید. آموزش‌هایی برای شروع کار با ریداکس:
این آموزش‌ها برای یادگیری ریداکس کافی هستند، اما این مقاله با عنوان شروع کار با ریداکس را از دست ندهید.
