دوره آموزش React & Redux

React چیست؟ Redux چیست؟

 React یک کتابخانه جاوا اسکریپت است و در طراحی رابط کاربری UI و component صفحات وب کاربرد دارد. ری اکت یک کتابخانه ی open source و رایگان است و یکی از بهترین و کارآمد ترین کتابخانه های جاوا اسکریپت به شمار می رود.

 ری اکت بر پایه ی  componentsها کار می کند؛ بدین صورت که پس از ایجاد تغییر در کامپوننت آن را مجددا Render گرفته و نمایش می دهد. سرعت رندر در ری اکت سریع بوده و هر بخش به صورت مجزا و مستقل اجرا می شود. برنامه نویسان با React می توانند رابط کاربری های بسیار پیچیده را در کوتاه ترین زمان پیاده سازی کنند.

Redux نیز بخشی از فریم ورک ری اکت است که برای مدیریت وضعیت برنامه یا State Managment به کار می رود و با همکاری کتابخانه ی انگولار برای ایجاد رابط کاربری UI استفاده می شود. Redux با داشتن API ساده و محدود به عنوان مکمل در کنار کتابخانه های React  و Angular کاربرد دارد.

تاریخچه ی ری اکت و ریداکس

ری اکت توسط شخصی به نام جردن واک در فیس بوک ساخته شد و اولین نسخه ی آن در سال 2011 توسعه یافت و یک سال بعد در سرویس اینستاگرام مورد استفاده قرار گرفت. React Native نیز در ماه فوریه سال 2015 در کنفرانسی مطبوعاتی معرفی شده و در ماه مارس به صورت رایگان عرضه شد.

ریداکس نیز توسط دن آبراموف و اندرو کلارک (Dan Abramov and Andrew Clarck) در سال 2015 منتشر شد.

چرا React  وRedux  ؟

شاید این سوال برای شما پیش بیاید که در بین فریم ورک ها و کتابخانه های متنوع جاوا اسکریپت چرا باید ری اکت و ریداکس را بیاموزیم؟ در جواب این سوال باید بگوییم که React یکی از پرکاربردترین کتابخانه ها در زمینه ی UI و در برنامه نویسی Front End است و در واقع یکی از بهترین ها در حوزه ی خود به شمار می رود. شما با تسلط بر آن می توانید به خوبی در بازار رقابتی بخش فرانت اند و UI مشغول به فعالیت شوید.

یادگیری راحت و سادگی React یکی از دلایلی است که برنامه نویسان را به سمت این کتابخانه سوق می دهد. هر شخصی با داشتن پیش زمینه ای از برنامه نویسی می تواند به راحتی React  را یاد بگیرد.

علاوه بر آن React Native بر پایه جاوا اسکریپت و ری اکت بوده و تمام ویژگی های React را شامل می شود. تست پذیری کتابخانه ی ری اکت نیزعملکرد مناسبی داشته و این امکان را می دهد تا Componentها و توابع را با پارامترها و خروجی های مورد نظر چک کرده و در زمان خود صرفه جویی کنید. 

ریداکس نیز به عنوان بخشی از کتابخانه ی ری اکت state های مختلف را در برنامه های java script  مدیریت می کند.

چرا باید ری اکت و ریداکس را یاد بگیریم؟

یکی از قدم ها در مسیر یادگیری آموزش طراحی سایت و آموزش فرانت اند و تبدیل شدن به یک برنامه نویس حرفه ای فرانت اند یادگیری ری اکت است.

اگر به دنبال یادگیری کتابخانه ای هستید که برای ساخت اپلیکیشن ها و برنامه های مختلف مفید باشد ما در آکادمی آی تی یادگیری ری اکت و ریداکس را به شما پیشنهاد می کنیم.

React بهترین کتابخانه در حوزه ی UI بوده و مناسب ترین گزینه برای برنامه نویسان سمت فرانت اند است. هم چنین می توان گفت که یادگیری آن بسیار آسان بوده و عملکرد بهتری نسبت به سایر کتابخانه ها و فریم ورک ها دارد.

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

اگر پروژه ی بزرگی دارید و نیاز دارید با امکانات کاملی state های داخل ری اکت را مدیریت کنید بهتر است از Redux استفاده کنید. ریداکس به خوبی با ری اکت کار می کند و به شما اجازه می دهد تا رابط کاربری را به عنوان تابعی از state تعریف کرده و آن را مدیریت کنید.

یادگیری ریداکس باعث می شود مدیریت state اپلیکیشن ها بسیار ساده تر شود و با استفاده از آن می توانید state اپلیکیشن را به بخش هایی که مورد نیاز است اطلاع دهید.

دوره ی React و Redux مناسب چه کسانی است؟

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

React JS این امکان را به برنامه نویسان می دهد تا برنامه های تحت وبی طراحی کنند که بدون بارگزاری مجدد می توان اطلاعات آن را تغییر داد. این کتابخانه ی قدرتمند java script برای مدیریت لایه های نمایشی برنامه های وب و موبایل کاربرد دارد و می تواند با angular JS در MVC استفاده شود.

برنامه نویسان با استفاده از jsx می توانند کدهای HTML را درون جاوا اسکریپت بنویسند که این ویژگی باعث افزایش سرعت و راحتی در کدنویسی می شود.
Redux  نیز برای مدیریت state ها به کار می رود و یک زیرساخت قوی را ارائه می دهد تا توسعه دهندگان بتوانند با استفاده از آن برنامه های  React را تکمیل کنند.

پیش نیازهای دوره  React و  Redux

برای یادگیری React و Redux نیاز به پیش نیاز خاصی ندارید و تنها کافی است تا به HTML و CSS مسلط باشید. علاوه بر آن با توجه به این که ری اکت جزو کتابخانه های جاوا اسکریپت است باید به زبان برنامه نویسی جاوا اسکریپت نیز مسلط باشید.

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

از جمله مزایای یادگیری React  و Redux با استفاده از دوره ی آموزشی آکادمی آی تی می توان به انتقال شفاف مفاهیم اشاره کرد؛ زیرا درک کردن React بسیار آسان بوده و از سینتکس ویژه ای به نام JSX استفاده می کند که با استفاده از آن می توانید HTML و JAVA SCRIPT را با یکدیگر ترکیب کنید.

مورد دیگری که برنامه نویسان را به سمت یادگیری این کتابخانه ها سوق می دهد یادگیری آسان آموزش های React.js است؛ با داشتن دانش مختصری در زمینه HTML ،CSS و جاوا اسکریپت می توانید به راحتی آن را فرا بگیرید.

کتابخانه ی ReactJS برای تست پذیری عملکرد مناسبی داشته و یادگیری این دوره امکان را به شما می دهد تا COMPONENTها و توابع خود را با پارامترها و خروجی مورد نظر چک کنید. آموزش پروژه محور React.js تمرین هایی را برای درک بهتر مفاهیم در اختیار شما قرار می دهد تا بتوانید به خوبی به نحوه ی پیاده سازی آن مسلط شوید.

علاوه بر آن برنامه نویسان می توانند با گذراندن این دوره آموزشی آمادگی لازم برای استفاده از Redux را فراگرفته و از آن در پروژه های خود به خوبی استفاده کنند.
 

دوره آموزشی ری اکت جی اس 

فصل اول /مقدمات

1- ری اکت چیست ؟

2- افزودن کتابخانه ری اکت به وبسایت 

3- bable و jsx 

4- npm js

5- بررسی فایل ها و فولدر های یک پروژه ی ری اکتی 

6- نصب ری اکت با npm 

7- کامپوننت ها و شروع مینی پروژه اول 

8- propsها در ری اکت 

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

10- رندر شرطی کامپوننت ها

11- رخداد ها یا eventها در ری اکت

12- state در ری اکت 

فصل دوم /پروژه ی کار های روزمره با ری اکت

13- شروع پروژه کار های روزمره

14- استایل دهی به پروژه کار های روزمره 

15- مدیریت کردن state در پروژه‌

16- حلقه زدن روی یک state 

17- اضافه کردن یک آیتم به لیست 

18- کلیدواژه ی key در حلقه زدن در لیست ها 

19- حذف یک آیتم از لیست و رفع ارور ها 

فصل سوم  /اپلیکیشن موزیک پلیر

20- شروع پروژه ی موزیک پلیر

21-  راه اندازی اولیه و کار روی کامپوننت هدر 

22- استایل دهی به کامپوننت هدر 

23- استایل دهی به کامپوننت sidebar

24- استایل دهی به کامپوننت main

25- دسترسی به داده ها از یک فایل لوکال

26- اضافه کردن تگ audio 

27- useRef و دسترسی به تگ audio 

28- useEffect در ری اکت  

29- دسترسی  به هر آهنگ با کلیک

30- آپدیت کردن آهنگ در حال پخش

31- رفع برخی ایرادات 

32- رندر شرطی آیکون ها 

33- کتابخانه ی react-icons

34- آپدیت کردن زمان آهنگ در حال پخش 

35- تبدیل زمان آهنگ به دقیقه و ثانیه 

36- آپدیت شدن rangeSlider با زمان آهنگ

37- دکمه برای رفتن به آهنگ بعدی و قبلی

فصل چهارم  /پویا سازی اپلیکیشن موزیک پلیر 

38- ReactMemo و UseCallBack در ری اکت

40-  استایل دهی به آهنگ در حال پخش

41- notification در ری اکت

42- کامپوننت layout و propdrilling در ری اکت

43- context Api ها در ری اکت 

44- Routing در ری اکت 

45- LINK و NAVLINK در ری اکت 

46- استایل دهی به input و آپدیت استایل با زمان آهنگ