حالت مطالعه

آموزش react js دوره ای است که از صفر تا صد به صورت جامع و پروژه محور کلیه مباحث مورد نیاز برای یادگیری react js آموزش داده می شود.

react js چیست؟

React Js اساسا یک کتابخونه open-source جاوا اسکریپتی برای ساخت رابط کاربری(user interfaces) برای single page applications(اپلیکیشن های تک صفحه ای) هست. این کتابخونه برای مدیریت لایه View برای وب استفاده می شود. همچنین React این امکان رو در اختیار ما میذاره که reusable UI components (کامپوننت های قابل استفاده مجدد رابط کاریری) ایجاد کنیم.

چرا باید از react js استفاده کنیم؟

React این امکان را در اختیار توسعه دهندگان می گذارد که وب اپلیکیشن های خیلی بزرگ که می تواند data را تغییر بدهد، بدون reload صفحه ایجاد کنند. مهم ترین اهداف React را میتوان سادگی، سرعت و مقیاس پذیر بودن دانست.

تمرکز اصلی React Js بر روی رابط کاربری است و فقط در لایه View در معماری MVC مطابقت دارد، همچنین این کتابخانه می تواند با کتابخانه های و فریمورک های دیگر جاوا اسکریپت مثل Angular ترکیب و مورد استفاده قرار یگیرد.

اگر هنوز با React Js آشنایی کامل ندارید و تفاوت اون با سایر کتابخونه ها و فریمورک های وب جاوا اسکریپت نمی دونید، پیشنهاد میکنم نگاهی به بخش React بلاگ سایت بندازید و مقالات زیر رو حتما بخونید:

پس از گذراندن دوره جامع آموزش React چه چیزهایی رو یاد خواهید گرفت ؟

در این دوره سعی شده است که تمامی مواردی که برای پیاده سازی یک برنامه با React نیاز است به صورت کامل آموزش داده شود و شما بتوانید بعد از گذراندن این دوره به بازار کار وارد شوید.

این آموزش در حال حاضر بر اساس نسخه 16.8.6 ری اکت ارائه شده است و به محض بروزرسانی React به نسخه های جدیدتر،این دوره آموزشی نیز بروز خواهد شد و شما می توانید پس از خرید دوره به صورت رایگان به آن ها دسترسی داشته باشید.

دوره جامع آموزش React (ری اکت) مناسب چه کسانی است؟

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

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

تکلیف پیش نیاز های این دوره چی میشه؟

برای یادگیری React شما باید با جاوا اسکریپت (Javascript) و ES6 آشنا باشید و تسلط نسبی داشته باشید تا روند یادگیریتون خیلی سریعتر باشه. لازم نیست که شما برای پیش نیازها نگران باشید چون ما تمامی این پیش نیاز ها رو به صورت رایگان داریم و میتونید از این دوره ها استفاده کنید

از طرفی همچنین شما نیاز دارید تا با مفاهیم HTML و CSS برای یک خروجی زیبا از لحاظ ظاهری و بصری آشنایی داشته باشید که میتونید از مطالب سایت w3schools استفاده کنید.

هدیه ویژه برای کاربران این دوره :

در پایان این دوره شما کاملا با نحوه آپلود پروژه بر روی هاست آشنا خواهید شد، در مرحله اول بر روی هاست و در مرحله دوم بر روی سرویس لیارا پروژه آپلود خواهد شد. به همین منظور برای تمامی کاربرانی که دوره آموزش React Js سایت reactapp.ir رو تهیه کنند با توجه به همکاری reactapp و سرویس لیارا حسابشون به مبلغ 50 هزار تومان شارژ خواهد شد که فرصت بسیار مناسبی هست.

برای آشنایی با نحوه دریافت این هدیه می توانید پست هدیه ویژه کاربران دوره NodeJS و ReactJS| پنجاه هزار تومان اعتبار سرویس لیارا را مطالعه کنید.

جهت آشنایی با دوره و سرفصل ها ، بخش اول آموزش را مشاهده فرمائید .

سوالات متداول

تفاوت react js و react native چیست؟

react js یک کتابخاته بر پایه جاوا اسکریپت است که با استفاده از آن می توان وب سایت و وب اپلیکیشن های فوق العاده سریع و قوی تک صفحه ای ساخت.

اما react native یک فریمورک بر پایه جاوا اسکریپت و کتابخانه react js است که شما فقط با نوشتن کد جاوا اسکریپت و استفاده از کامپوننت های react می تواند اپلیکیشن native برای دو پلتفرم android و ios بسازید

آیا react js ارزش یادگیری دارد؟

برای فهمیدن پاسخ به این سوال شاید بهترین راه سر زدن به سایت های آگهی شغلی مثل جابجینا و… بزنید و ببینید که چه تعداد زیادی درخواست برای استخدام توسعه دهنده react وجود دارد
از طرفی با یادگیری react js شما میتوانید با صرف وقت نسبتا کمی به فریمورک react native مسلط شوید و اپلیکیشن موبایل برای Android و ios بسازید

یادگیری react js سخت است؟

یادگیری react js برای کسانی که به جاوا اسکریپت و Es6 تسلط دارد، کار بسیار راحتی است و با صرف مدت زمانی نسبتا کوتاه با داشتن پیش زمینه از html و css راحت می تواند به این کتابخانه مسلط شود

آیا آموزش react js وب سایت reactapp.ir برای یادگیری react کافی است؟

اگر شما به سرفصل های دوره نگاه بندازید، متوجه خواهید شد که در این دوره مفاهیم از صفر تا صد به صورت گام به گام و در قالب یک پروژه react js آموزش داده می شود و شما را برای ورود به بازار کار آماده می کند

فصل اول : آشنایی بامبانی و مفاهیم اساسی React Js

0.معرفی دوره جامع آموزش React Js ویدئو

4 دقیقه

پیش نمایش

React .1 چیست ویدئو

10 دقیقه

پیش نمایش

در این جلسه به این میپردازیم که React چی هست؟ چرا باید ازش استفاده کنیم؟ آیا React یک کتابخونه است یا فریمورک؟

در ادامه در مورد JSX و Virtual Dom صحبت میکنیم و همچنین چند تا از وب سایت معروف ایرانی که با React نوشته شدن معرفی میشه

2. نصب React ویدئو

7 دقیقه

در این جلسه با روش های مختلف نصب React آشنا میشید و در ادامه با استفاده از create react app یک پروژه ایجاد می کنیم

3. بررسی ساختار پروژهای React ویدئو

6 دقیقه

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

4. یادگیری و کار با JSX ویدئو

14 دقیقه

در این جلسه JSX رو به صورت کامل زیر و رو میکنیم و مزایای استفاده از JSX و دردسرهایی که در صورت عدم استفاده از اون رو باید بکشیم به صورت کامل بیان میشه

5. Functional Component در مقابل Class Component ویدئو

7 دقیقه

در این جلسه در مورد Functional Component و Class Component صحبت میکنیم.اینکه هر کدوم چه مزایایی دارند و با معرفیhooks چه امکاناتی در اختیار ما قرار گرفته که در پروژه هامون میتونیم ازش استفاده کنیم

6. نحوه ایجاد کامپوننت ویدئو

9 دقیقه

در این جلسه در مورد نحوه ایجاد یک کامپوننت و استفاده از اون بحث خواهیم کرد و شما یاد میگیرد که چجوری یک Functional Component ایجاد و از اون استفاده کنید

7. props ها در react ویدئو

9 دقیقه

در این جلسه یاد میگیرد که props ها در react چی هستند؟چه کاربردی دارند و چجوری میشه از اونها استفاده کرد

8. prop types چیست و چه کاربردی دارد ویدئو

14دقیقه

در این جلسه یاد میگیرد که static typing و dynamic typing چیه و چه تفاوت هایی با هم دارند سپس در ادامه یاد میگیرد که چجوری type (نوع) prop هایی که به کامپوننت ها پاس داده میشه رو با استفاده از prop types چک کنید و از خطاهایی که ممکن بخاطر type اشتباه prop به وجود بیاد جلوگیری کنید

9. نحوه تبدیل functional component به class component ویدئو

3دقیقه

در این جلسه یاد میگیرید که چجوری یک Functional Component رو به Class Component تبدیل کنید

10. state ها در react و کار با useState ویدئو

14 دقیقه

در این جلسه یاد میگیرید که چجوری با State ها در react کار کنید و اینکه تفاوت بین تعریف و بروز رسانی state ها در class Component و Functional Component چیه و چجوری میشه این عملیات ها رو انجام داد

11. استایل دهی در React ویدئو

8 دقیقه

در این جلسه یاد میگیرید که چجوری با استفاده از فایل های css استایل دهی به element های مورد نظرمون رو انجام بدیم

12. استفاده از css in js ویدئو

10 دقیقه

در این جلسه یاد میگیرید که css in js چه مزایایی داره، چه کتابخونه هایی در این زمینه وجود داره و چجوری ازش در React برای استایل دهی استفاده کنید

13. کار با css module ویدئو

8 دقیقه

در این جلسه یاد میگیرید که چجوری با css module ها در React کار کنید

14. مدیریت رویدادها(events) ویدئو

10 دقیقه

در این جلسه یاد میگیرید که چجوری رویدادها یا همون event ها در react رو مدیریت کنید

15. conditional rendering در react ویدئو

15دقیقه

در این جلسه یاد میگیرید که چجوری بر اساس وضعیت یک state یا prop شما render های متفاوتی رو به کاربر نمایش بدید و بر اساس شرط یک سری محتواهای خاص به کاربر نشون داده بشه

16. list و key در react ویدئو

9 دقیقه

در این جلسه در ابتدا یاد میگیرید که کار map چیه و سپس با list ها کار میکنیم و دلیل و نحوه استفاده از key در لیست ها رو بیان میکنم

17. کار با فرم ها ویدئو

18 دقیقه

در این جلسه یاد میگیرید که فرم ها در react با html چه تفاوتی دارند و چجوری با فرم ها در react باید کار کرد

18. lifecycle (چرخه حیات) کامپوننت ها و کار با useEffect ویدئو

21دقیقه

در این جلسه یاد میگیرید که به طور کلی life cycle چی هست و در چه مواردی مورد استفاده قرار میگیره.سپس نحوه پیاده سازی اون با استفاده از useEffect رو یاد می گیرید

فصل دوم : ساخت Todo App

19.معرفی فصل دوم ویدئو

5 دقیقه

پیش نمایش

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

20.ایجاد کامپوننت students ویدئو

9 دقیقه

در این جلسه کامپوننت students رو طراحی و ایجاد می کنیم

21.استفاده از map method برای نمایش لیست دانش آموزان ویدئو

9 دقیقه

در این جلسه یاد می گیرید که چجوری با استفاده از map اطلاعات مربوط به دانش آموزان رو نمایش بدید

22.نحوه بروزرسانی state نام دانش آموزان به صورت همزمان ویدئو

11 دقیقه

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

23.حذف اطلاعات دانش آموز ویدئو

4دقیقه

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

24.طراحی کامپوننت Button ویدئو

11دقیقه

در این جلسه یاد می گیرید که چجوری یک کامپوننت Button ایجاد کنیم که بتونیم در هر جایی از پروژه از اون استفاده کنیم

25.پیاده سازی بخش تغییر وضعیت نمایش اطلاعات دانش آموزان ویدئو

7 دقیقه

در این جلسه یاد می گیرید که چجوری یک Button برای تغییر وضعیت نمایش اطلاعات دانش آموزان ایجاد کنیم تا لیست دانش آموزان به صورت row و column نماش داده شود

26.ایجاد نوار جستجو(searchBarFilter) ویدئو

12 دقیقه

در این جلسه یاد می گیرید که چجوری یک نوار جستجو یا searchBarFilter ایجاد کنید که با واردکردن هر کاراکتر درون این نوار لیست دانش آموزان بر اساس نام فیلتر شود

27.طراحی کامپوننت new Student ویدئو

10 دقیقه

در این جلسه یاد می گیرید که چجوری کامپوننت مربوط به اضافه کردن دانش آموزان رو طراحی کنید

28.اضافه کردن دانش آموز جدید ویدئو

23 دقیقه

در این جلسه یاد می گیرید که چجوری اطلاعات مربوط به بک دانش آموز جدید رو به stateایی که نگهدارنده اطلاعات دانش آموزان است اضافه کنیم

29.استفاده از prop types برای بررسی کردن props ها ویدئو

10 دقیقه

در این جلسه یاد می گیرید که چجوری با استفاده از props types بیاید type یا همون نوع props های پاس داده شده به هر کامپوننت رو چک کنید و در صورت اشتباه بودن متوجه بشید که type یک کدوم از prop های که به کامپوننت ها پاس دادید،اشتباه است

30.کار با higher order component ویدئو

16 دقیقه

در این جلسه یاد می گیرید که higher order component چی هست،چه کاربردی داره و مزایای اون چیه

در ادامه چندین نمونه higher order component ایجاد می کنیم

31.کار با useRef ویدئو

7 دقیقه

در این جلسه یاد می گیرید که چجوری با useRef کار کنید

32.اضافه کردن فونت به react ویدئو

4 دقیقه

در این جلسه یاد می گیرید که چجوری font به react اضافه کنید

فصل سوم : debugging(خطایابی) در react

33.معرفی فصل سوم ویدئو

2 دقیقه

پیش نمایش

34.نحوه خطایابی(debugging) در react ویدئو

12 دقیقه

یکی از مواردی که هر برنامه نویس باید بدونه اینکه چجوری برنامه ای که می نویسه رو خطایابی کنه.در این جلسه شما debugging در react رو یاد خواهید گرفت

35.debugging برنامه های react با vs code ویدئو

6 دقیقه

در این جلسه شما debugging برنامه های react با استفاده از vs code رو یاد خواهید گرفت

36.کار با react developer tools ویدئو

11 دقیقه

در این جلسه یاد می گیرید که با ابزار فوق العاده ای که react در اختیار ما قرارداده کار کنید و تمامی ویژگی های مربوط به این ابزار رو به صورت کامل فراخواهید گرفت

37.Error Boundary ویدئو

15 دقیقه

در برنامه هایی که می نویسیم ممکنه یک سری کدها داشته باشیم که به صورت run Time به مشکل بخورند و fail بشن.در این قسمت یادمیگیریم که چجوری با این نوع error ها رفتار و اون رو مدیریت کنیم

فصل چهارم : طراحی UI پروژه

38.معرفی فصل چهارم ویدئو

3 دقیقه

39.اضافه کردن headerبه پروژه ویدئو

10 دقیقه

در این جلسه یاد میگیرید که چجوری یک header طراحی کنید و اون رو به پروژه اضافه کنید

40.اضافه کردن logo ویدئو

6 دقیقه

در این جلسه یاد میگیرید که چجوری با عکس ها در react کار کنید و logo رو به header برنامه اضافه کنید

41.اضافه کردن آیتم های منو ویدئو

15 دقیقه

در این جلسه یاد میگیرید که چجوری کامپوننت مربوط به آیتم های منو رو ایجاد، طراحی و استفاده کنید

42.ایجاد کامپوننت modal ویدئو

19 دقیقه

در این جلسه یاد میگیرید که چجوری یک کامپوننت modal ایجاد کنید که در همه کامپوننت های برنامه قابل استفاده باشه.

43.show و hide کردن modal با انیمیشن های css ویدئو

7 دقیقه

در این جلسه یاد یاد می گیرید که چجوری با استفاده از انیمیشن های css کامپوننت modal که در جلسه قبلی ایجاد کردیم show و hide بشه

44.ایجاد کامپوننت backDrop ویدئو

9 دقیقه

در این جلسه یاد یاد می گیرید که چجوری با ایجاد یک کامپوننت backDrop و با کلیک کردن بر روی اون باعث hiیe شدن modal بشید.

45.ایجاد sideDrawer ویدئو

11 دقیقه

header که قبلا طراحی کردیم در mobile device ها به خوبی نمایش داده نمیشه و آیتم های درون اون به هم ریخته است.در این جلسه یاد خواهید گرفت که چجوری با ایجاد sideDrawer از به وجود اومدن این مشکل جلوگیری کنید

46.حل مشکلات مربوط به sideDrawer ویدئو

15 دقیقه

با ایجاد و اضافه کردن sideDrawrer یک سری مشکلات برای برنامه به وجود میاد و باید یک سری استایل ها عوض بشه.در این جلسه شما نحوه برطرف کردن این مشکلات رو یاد خواهید گرفت

47.باز و بسته کردن sideDrawer ویدئو

14 دقیقه

در این جلسه یاد خواهید گرفت که چجوری با کلیک کردن بر روی hamburger icon کامپوننت sideDrawer که قبلا ایجاد کردیم باز بشه و با کلیک کردن بر روی backDrop کامپوننت sideDrawer بسته بشه

فصل پنجم : آموزش کار با react router

48.معرفی فصل پنجم ویدئو

3 دقیقه

در این جلسه تمامی مواردی که در این فصل یاد خواهید گرفت بیان خواهد شد و شما با مشاهده این قسمت میدونید که قراره چه مواردی در این فصل پیاده سازی بشه. به صورت کلی در این فصل react router dom آموزش داده خواهد شد

49.نحوه کار multi page در single page application ها ویدئو

4 دقیقه

در این جلسه یاد خواهید گرفت که multi page در single page application ها به چه شکلی کار می کنند و منطق اون به چه صورتی هست

50.نصب react router ویدئو

14 دقیقه

در این جلسه یاد خواهید گرفت که چجوری پکیج های react router و react router dom رو نصب کنید و با اون ها شروع به کار کنید

51.اضافه کردن Home Page ویدئو

11 دقیقه

در این جلسه یاد خواهید گرفت که چجوری ساختار پروژه رو تغییر بدید و یک page جدید مثل home اضافه کنید

52.استفاده از Links برای جایجایی بین صفحات ویدئو

5 دقیقه

در این جلسه یاد خواهید گرفت که چجوری با استفاده از Link بین صفحات جابجا بشید

53.استفاده از props در react router ویدئو

7 دقیقه

در این جلسه یاد خواهید گرفت که چجوری از props هایی که در react router وجود داره استفاده کنید

54.استفاده از withRouter Higher Order Component ویدئو

5 دقیقه

در این جلسه یاد خواهید گرفت که چجوری از withRouter برای دسترسی داشتن به props های react router استفاده کنید

55.استایل دهی به لینک route های active ویدئو

7 دقیقه

در این جلسه یاد خواهید گرفت که چجوری ابه لینک route هایی که active هستند استایل منحصر به فرد بدید

56.اضافه کردن page ویرایش اطلاعات دانش آموزان ویدئو

10 دقیقه

در این جلسه یاد خواهید گرفت که چجوری page مربوط به ویرایش اطلاعات دانش آموزان رو به Route ها اضافه کنید

57.استفاده از پارامترهای ارسالی بین Route ها ویدئو

8 دقیقه

در این جلسه یاد خواهید گرفت که چجوری پارامترهای ارسالی بین Route ها رو extract و استفاده کنید

58.استفاده از کامپوننت switch ویدئو

3 دقیقه

در این جلسه یاد خواهید گرفت که کامپوننت switch در react router چه کاربردی دارد و چجوری ازش استفاده کنید

59.استفاده از history method ویدئو

8 دقیقه

در این جلسه یاد خواهید گرفت که چجوری از method های مختلفی که react router در اختیار شما گذاشته استفاده کنید

60.Redirect کردن کاربران ویدئو

5 دقیقه

در این جلسه یاد خواهید گرفت که چجوری با توجه به فرآیندی که دارید کاربران رو با Redirect کنید

61.استفاده از replace method برای Redirect کردن کاربران ویدئو

3 دقیقه

در این جلسه یاد خواهید گرفت که چجوری با استفاده از replace method کاربران رو در react router به صفحات خاص Redirect کنید

62.مشخص کردن سطح دسترسی کاربران به Route ها ویدئو

7 دقیقه

در این جلسه یاد خواهید گرفت که چجوری سطح دسترسی کاربران به هر route رو مشخص کنید

63.طراحی 404page ویدئو

4 دقیقه

در این جلسه یاد خواهید گرفت فرآیند زمانی که کاربر یک آدرس اشتباه در نوار مرورگر وارد کرد 404 page به کاربر نمایش داده شود، رو پیاده سازی کنید

64.lazy loading در react ویدئو

9 دقیقه

در این جلسه یاد خواهید گرفت که lazy loading چی هست؟چه مزایایی داره و چه زمانی باید از اون استفاد کنید

فصل ششم : ارتباط با سرور

65.معرفی فصل ششم ویدئو

3 دقیقه

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

66. Http Request در React ویدئو

11 دقیقه

در این جلسه یاد می گیرید که http request در React چجوری کار میکنه و سپس API که قراره از اون استفاده کنیم به صورت کامل توضیح داده میشه و در انتها کتابخانه axios نصب خواهد شد

67. Http Request با axios ویدئو

10 دقیقه

در این جلسه یاد می گیرید که چجوری با استفاده از axios به سرور درخواست بفرستیم و از اطلاعات دریافتی استفاده کنیم

68. تغییر و دستکاری اطلاعات دریافتی از سرور ویدئو

6 دقیقه

گاهی اوقات نیاز پیدا می کنید که اطلاعات دریافتی از سرور رو دستکاری کنید و تغییر دهید.در این جلسه این مورد رو یاد خواهید گرفت

69. http request برای ویرایش اطلاعات دانش آموزان ویدئو

8دقیقه

در این جلسه یاد خواهید گرفت چطوری یک درخواست برای ویرایش اطلاعات به سرور بفرستیم

70. post request با axios ویدئو

5 دقیقه

در این جلسه یاد خواهید گرفت چطوری post request با axios بزنید

71. delete request با axios ویدئو

10 دقیقه

در این جلسه یاد خواهید گرفت چطوری delete request با axios بزنید

72. مدیریت error ها با axios ویدئو

8 دقیقه

در این جلسه یاد خواهید گرفت چطوری Error هایی که در ازتباط با سرور بهش برمیخورید به صورت local مدیریت کنید

73. مدیریت error ها به صورت global با axios ویدئو

10 دقیقه

در این جلسه یاد خواهید گرفت چطوری Error هایی که در ازتباط با سرور بهش برمیخورید به صورت global مدیریت کنید

74. مشخص کردن تنظیمات پیش فرض برای ارتباط با سرور ویدئو

5 دقیقه

در این جلسه یاد خواهید گرفت چطوری یک سری config ها رو به صورت پیش فرض قرار دهید تا برای هر درخواست مجبور به set کردن اون نباشید

75. ایجاد کامپوننت Spinner ویدئو

4 دقیقه

در این جلسه یاد خواهید گرفت چطوریک کامپوننت Spinner ایجاد کنید تا زمانی که نتیجه از سرور برمی گردد به کاربر یک loader نمایش داده شود

76. ایجاد Higher Order Component برای مدیریت کردن Error ها ویدئو

16 دقیقه

در این جلسه یاد خواهید گرفت چطور یک Higher Order Component برای مدیریت کردن Error ها ایجاد کنید تا با ایجاد هر error یک پیغام مناسب به کاربر نمایش داده شود

77. instance در axios ویدئو

5 دقیقه

در این جلسه یاد خواهید گرفت چطور از ویژگی باحال instance در axios استفاده کنید. در واقع با استفاده از instance شما میتونید برای یک سری از درخواست های یک config داشته باشید و برای بقیه یک config دیگه

فصل هفتم : نوشتن API

78.معرفی فصل هفتم ویدئو

2 دقیقه

79.ایجاد دیتابیس ویدئو

3 دقیقه

در این جلسه یاد میگیرید که چجوری دیتابیس رو در mySql ایجاد کنید

80.اتصال به دیتابیس ویدئو

11 دقیقه

در این جلسه یاد میگیرید که چجوری به دیتابیس متصل بشید و API مربوط به ورود مدیر رو بنویسید

81.ایجاد جدول اطلاعات دانش آموزان در دیتابیس ویدئو

3 دقیقه

در این جلسه یاد میگیرید که چجوری یک جدول در دیتابیس ایجاد کنیم

82.نوشتن API مربوط به اضافه کردن دانش آموز جدید ویدئو

8 دقیقه

در این جلسه یاد میگیرید که چجوری API مربوط به اضافه کردن دانش آموز جدید رو با استفاده از زبان PHP بنویسید

83.نوشتن API مربوط به نمایش اطلاعات دانش آموزان ویدئو

4 دقیقه

در این جلسه یاد میگیرید که چجوری API مربوط به نمایش اطلاعات دانش آموز رو با استفاده از زبان PHP بنویسید

84.نوشتن API مربوط به ویرایش اطلاعات دانش آموزان ویدئو

8 دقیقه

در این جلسه یاد میگیرید که چجوری API مربوط به ویرایش اطلاعات دانش آموزان رو با استفاده از زبان PHP بنویسید

85.نوشتن API مربوط به حذف اطلاعات دانش آموزان ویدئو

5 دقیقه

در این جلسه یاد میگیرید که چجوری API مربوط به حذف اطلاعات دانش آموزان رو با استفاده از زبان PHP بنویسید

فصل هشتم : کار با Context Api

86.معرفی فصل هشتم ویدئو

6 دقیقه

87.پیاده سازی captcha ویدئو

18 دقیقه

در این جلسه یاد می گیرید که چجوری کدامنیتی یا همون captcha رو در react پیاده سازی کنید تا از حملات brute force جلوگیری کنید و تفاوت بین انسان و ربات مشخص شود

88.validate کردن فرم ها ویدئو

12 دقیقه

در این جلسه یاد می گیرید که چجوری فرم هایی که دارید رو Validate کنید تا کاربر اطلاعات رو اشتباه وارد نکنه یا یک فیلد رو به صورت خالی رها کنه و باعث به وجود اومدن مشکلاتی در برنامه بشه

89.ورود به حساب کاربری ویدئو

14 دقیقه

در این جلسه یاد می گیرید که چجوری یک http request برای login به Api که در فصل قبل نوشتیم بزنیم

90.چه زمانی نیاز به Context Api داریم ویدئو

9 دقیقه

در این جلسه یاد می گیرید که چه زمانی نیاز دارید که از Context Api یا state manager ها در پروژه های React استفاده کنید و اینکه Context Api چه مزایای داره و چقدر کار ما رو راحت کرده

91.نحوه کار با Context Api ویدئو

10 دقیقه

در این جلسه یاد می گیرید که چجوری کار با Context Api رو شروع و از اون در React استفاده کنید

92.بروزرسانی data های موجود در Context ویدئو

7 دقیقه

در این جلسه یاد می گیرید که چجوری data های موجود در Context رو بروزرسانی و مقادیر اون رو تغییر بدید

93.مشخص کردن سطح دسترسی کاربران ویدئو

11 دقیقه

در این جلسه یاد می گیرید که چجوری با استفاده از datat ذخیره شده در context برای بررسی ورود کاربر، اجازه دسترسی به صفحات رو به اون بدید

94.پیاده سازی حالت night mode و light mode با استفاده از Context ویدئو

14 دقیقه

در این جلسه یاد می گیرید که چجوری با استفاده از context api حالت night mode و light mode رو به راحتی پیاده سازی کنید

95.کار با useReducer ویدئو

14 دقیقه

در این جلسه یاد می گیرید که چجوری با useReducer کار کنید

96.کار با localStorage ویدئو

14 دقیقه

در این جلسه یاد می گیرید که چجوری با localStorage کار کنید و اطلاعات مربوط به کاربر login شده رو در localStorage ذخیره کنید

97.نمایش اطلاعات دانش آموزان با Context Api ویدئو

17 دقیقه

در این جلسه یاد می گیرید که چجوری با استفاده از Context Api اطلاعات دانش آموزان رو نمایش بدید

98.حذف اطلاعات دانش آموزان از دیتابیس با Context Api ویدئو

8 دقیقه

در این جلسه یاد می گیرید که چجوری با استفاده از Context Api اطلاعات دانش آموزان رو از دیتابیس حذف کنید

99.ویرایش اطلاعات دانش آموزان ویدئو

19 دقیقه

در این جلسه یاد می گیرید که چجوری اطلاعات دانش آموزان رو ویرایش کنید

100.اضافه کردن اطلاعات دانش آموزان به دیتابیس ویدئو

8 دقیقه

در این جلسه یاد می گیرید که چجوری با استفاده از Api اطلاعات یک دانش آموز جدید رو به دیتابیس اضافه کنید

فصل نهم : کار با انیمیشن ها در React

101.معرفی فصل نهم ویدئو

4 دقیقه

102. کار با css transition ویدئو

13 دقیقه

در این جلسه یاد میگیرید که چجوری با استفاده از css transition در React js انیمیشن ایجاد کنید

103. کار با css animation ویدئو

12 دقیقه

در این جلسه یاد میگیرید که چجوری با استفاده از css animation در React js انیمیشن ایجاد کنید

104. ترکیب css trnasion و react js ویدئو

16 دقیقه

در این جلسه یاد میگیرید که چجوری با ترکیب css transition و React js کار کنید.

105. ترکیب css animation و react js ویدئو

13 دقیقه

در این جلسه یاد میگیرید که چجوری با ترکیب css animation و React js کار کنید.

فصل دهم: نوشتن تست در React

106. اهمیت تست نویسی ویدئو

8 دقیقه

در این جلسه در مورد اهمیت تست نویسی صحبت میکنیم و انواع نوشتن تست و مزایا و معایب هر کدوم رو بیان میکنیم

107. معرفی jest ویدئو

10 دقیقه

در این جلسه به طور کامل jest رو معرفی میکنیم و با استفاده از اون یک تست خیلی کوچیک در جهت آشنایی با نحوه تست نوشتن می نویسیم

108. نصب Enzyme و نوشتن تست برای کامپوننت students ویدئو

15 دقیقه

در این جلسه ابتدا Enzyme رو نصب میکنیم و با نحوه کار با اون آشنا می شویم و سپس برای کامپوننت Students تست می نویسیم

109. استفاده از sinon ویدئو

8 دقیقه

در این جلسه با استفاده از کتابخونه sinon یک fake function ایجاد می کنیم

110. نوشتن تست برای کامپوننت Backdrop ویدئو

10 دقیقه

در این جلسه برای کامپوننت Backdrop تست می نویسیم و با توجه به props که این کامپوننت دریافت میکنه برای هر وضعیت تست رو انجام میدیم

111. استفاده از react-testing-library برای نوشتن تست ویدئو

16 دقیقه

در این جلسه ابتدا کتابخونه react-testing-library رو نصب می کنیم و با استفاده از این کتابخونه تست می نویسیم

112. نوشتن تست برای توابع asynchronous ویدئو

16 دقیقه

در این جلسه برای توابعی که به صورت asynchronous هستند، تست می نویسیم

113. نوشتن تست برای CallAPI ویدئو

18 دقیقه

در این جلسه برای کامپوننت های که در اون http request داریم، تست می نویسیم

فصل یازدهم: deploy پروژه های React بر روی سرور و سرویس لیارا

114. deploy بر روی سرور ویدئو

8 دقیقه

در این جلسه در ابتدا در مورد تنظیمات مورد نیاز برای react router و همچنین تغییرات در فایل package.json صحبت میکنیم سپس از پروژه build میگیرم و در سرور آپلود میکنیم.

115. deploy بر روی لیارا ویدئو

6 دقیقه

در این جلسه در ابتدا در مورد سرویس لیارا و ویژگی های اون صحبت می کنیم.سپس پروژه رو بر روی سرویس لیارا deploy میکنیم.

فصل دوازدهم : SSR پروژه های react

116. تفاوت بین CSR و SSR ویدئو

8دقیقه

در این جلسه در مورد تفاوت بین CSR و SSR صحبت میکنیم و تاثیر هر کدوم بر مبحث سئو را مورد برررسی قرار می دهیم.همچنین در پایان نتیجه میگیریم که که CSR و SSR مناسب چه پروژه هایی هستند

117. ایجاد یک پروژه SSR در React با استفاده از Razzle ویدئو

16دقیقه

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

118.تبدیل پروژه CSR به SSR با استفاده از فریمورک Razzle ویدئو

14دقیقه

در این جلسه پروژه ای که از ابتدای دوره با هم پیش می بردیم رو با استفاده از Razzle تبدیل به SSR میکنیم

فصل سیزدهم : مینی پروژه وب سایت گردشگری

119. معرفی فصل سیزدهم ویدئو

4دقیقه

پیش نمایش

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

صحبت می کنیم

120.ایجاد پروژه ویدئو

5دقیقه

121.نصب کتابخانه react-router-dom ویدئو

7دقیقه

122.ایجاد navbar ویدئو

9دقیقه

123.نمایش logo درون navbar ویدئو

8دقیقه

124.نمایش آیتم های navbar ویدئو

8دقیقه

125.ایجاد کامپوننت Button ویدئو

12دقیقه

126.ایجاد کامپوننت HeroSection ویدئو

10دقیقه

127.نمایش Cards ویدئو

16دقیقه

128. ایجاد کامپوننت Footer ویدئو

6دقیقه

129. طراحی کامپوننت Footer ویدئو

19دقیقه

130. ایجاد صفحه Tourism ویدئو

8دقیقه

131. تکمیل صفحه Tourism ویدئو

19دقیقه

132. ایجاد صفحه Tour ویدئو

16دقیقه

134. ایجاد صفحه ثبت نام ویدئو

14دقیقه

133. نمایش Tour ها ویدئو

11دقیقه

برچسب: آموزش react آموزش React js آموزش ری اکت جی اس آموزش فارسی react دوره آموزش ReactJs

دوره های مرتبط

آموزش ES6

آموزش ES6 دوره ای است که در آن ویژگی های معرفی شده در EcmaScript 2015 و اضافه شده به جاوا…

2,214

رایگان!

انیمیشن در react native

در این سری از آموزش های رایگان react native نحوه کار و پیاده سازی انیمیشن های(animations) مختلف در قالب مثال…

473

رایگان!

ارسال نوتیفیکیشن در React Native

در این سری از آموزش های رایگان react native یاد میگیریم که چطور نوتیفیکیشن در react native (ری اکت نیتیو)…

672

رایگان!

نظرات

وحید
اکتبر 18, 2019
پاسخ
از مدیریت خواهشمندیم تخفیف که گذاشته بودید تمدید کنید تا دانشجوهای بیشتری بتونن ثبت نام کنن منتظر هستیم
باتشکر
- علیرضا(مدیریت)
  اکتبر 18, 2019
  پاسخ
  سلام وحید عزیز
  خسته نباشید
  ببینید طرح تخفیف یک هفته فعال بوده تا همه دوستان استفاده کنند اما در حال حاضر به پایان رسیده
  البته ایرادی نداره با ایدی تلگرام alirezabakamal و یا ایمیل سایت در ارتباط باشید تا در مورد تخفیف راهنماییتون کنیم .
  شاد باشید
behnam.rahmani8
اکتبر 17, 2019
پاسخ
سلام تخفیف دوره رو برداشتید ؟ چرا اینقدر زود آخه
- علیرضا(مدیریت)
  اکتبر 17, 2019
  پاسخ
  سلام بهنام عزیز
  یه هفته هست که تخفیف رو بخاطر شما عزیزان تمدید کردیم و اطلاع رسانی کردیم تا همه دوستانمون بتونند استفاده کنند
  براتون آرزوی موفقیت داریم
  - npb
    اکتبر 18, 2019
    پاسخ
    سلام
    کد تخفیف رو لطف بگین من می خوام دوره رو خریداری کنم چطور تخفیف بهش اعمال میشه؟
    - علیرضا(مدیریت)
      اکتبر 18, 2019
      پاسخ
      سلام به شما
      خسته نباشید
      ببینید طرح تخفیف یک هفته فعال بوده تا همه دوستان استفاده کنند اما در حال حاضر به پایان رسیده
      البته ایرادی نداره با ایدی تلگرام alirezabakamal و یا ایمیل سایت در ارتباط باشید تا در مورد تخفیف راهنماییتون کنیم .
      شاد باشید
parsapoor
اکتبر 16, 2019
پاسخ
سلام
من دیروز دوره را خریداری کردم و در اداره خواستم دانلود کنم دیدم حجمش زیاده و کنسل کردم از خانه خواستم دانلود کنم دیدم میگه شما قبلا دانلود کردید امروز که آمدم اداره باز نتونستم دانلودش کنم نمیدونم چی کار کنم
- مهدی(مدیریت)
  اکتبر 16, 2019
  پاسخ
  سلام وقتتون بخیر.
  ایمیل شما صبح پاسخ داده شد لطفا بررسی کنید.اگر همچنان مشکل دارید از طریق ایمیل با ما در ارتباط باشید
امیرحسین
اکتبر 15, 2019
پاسخ
ممنون از پاسختون. تو قسمت دانلود ها هم چیزی برام نمیاره اما تو صفحه دوره میزنه که دانشجوی دوره هستید.
- مهدی(مدیریت)
  اکتبر 15, 2019
  پاسخ
  مجدد چک بفرمایید.اگر باز هم مشکل داشتید از طریق ایمیل با ما در ارتباط باشیدreactapp.ir@gmail.com
  - امیرحسین
    اکتبر 15, 2019
    پاسخ
    ممنون از شما. مشکل حل شد.
امیرحسین
اکتبر 15, 2019
پاسخ
سلام. خسته نباشید.
من دیروز دوره رو خریداری کردم ولی تو حساب کاربریم چیزی نیومده و امکان دانلود برام فراهم نیست. ممنون میشم مشکل رو رفع کنید.
- مهدی(مدیریت)
  اکتبر 15, 2019
  پاسخ
  سلام امیر حسین عزیز.سلامت باشید
  در حساب کاربری به قسمت دانلودها برید اونجا لینک های دانلود در دسترس است.اگر باز هم مشکل داشتید با ما در ارتباط باشید تا در اسرع وقت مشکلتون حل بشه
Reza borhani
اکتبر 15, 2019
پاسخ
سلام
من قبلا دوره ری اکت نیتیو شمارو خریدم حالا خواستم ری اکت کار کنم و ویدئو های پیش تمایش دوره شماروهم دیدم چند تا سوال داشتم
یکی اینکه از بوتسترپ هم استفاده کردید داخل ری اکت؟
دومین سوالم اینه که ویدئو های بعد چه زمانی اماده میشن؟ قطعا اگه مدت زمانش طولانی باشه برای ما کاربردی نداره که دوره رو تهیه کنیم پس باید زمانش رو بدونیم!
ممنون از شما یه مورد دیگه رو هم بگم واقعا فکر میکنم بهتر بود کمی ویدئو ری اکت چیست رو جذاب تر ضبط میکردین، از سایتی مثل شما بعید بود واقعا
فقط یه سری اسلاید جابهجا میشن به نظرم میشد که جذاب تر باشه
البته جسارت نشه من از کاربران قدیمی شما هستم و واقعا از اموزش ها و محتوای دوره ها تون استفاده کردم
خواستم در صفحه تماس با ما نظر خودمو بگم که ارسال نمیشد متاسفانه
با تشکر از سایت خوبتون
- مهدی(مدیریت)
  اکتبر 15, 2019
  پاسخ
  سلام رضا عزیز.
  در این دوره از بوتسترپ استفاده نشده ولی نحوه ریسپانسیو کردن پروژه با استفاده از media query کامل گفته شده تا نیاز به کتابخونه جانبی نداشته باشید.
  ویدئو ها 8 فصل ابتدایی الان آماده است و بر روی سایت بارگذاری شده. فقط 4 فصل پایانی مونده که نهایتا تا دو ماه دیگه آماده میشه.
  در ویدئو ری اکت چیست سعی کردم که به صورت کامل مواردی که برای درک اینکه react چیست در قالب اسلاید به صورت کامل بیان کنم و بیشتر تمرکز رو بر روی متن گذاشتم تا جلوه بصری ویدئو.اگر نظری دارید که میشه جذابترش کرد بیان کنید حتما استفاده خواهیم کرد از نظرتون.
  متاسفانه صفحه تماس با ما مشکل داره که در حال رفع اون هستیم.
  .خیلی خوشحالیم که محتوای دوره ها برات مفید و کاربردی بوده
حمید
اکتبر 13, 2019
پاسخ
سلام تو این دوره مبحث Redux هم هست؟
- علیرضا(مدیریت)
  اکتبر 13, 2019
  پاسخ
  سلام حمید عزیز
  مبحث redux آموزش داده نشده ولی Context Api که همون کار ریداکس رو انجام میده و خیلی درک اون و کار باهاش راحته به صورت کامل آموزش داده میشه.
آرش
اکتبر 13, 2019
پاسخ
سلام خسته نباشید
فصل های بعدی تا کی اماده میشن؟
راستش من فقط بخاطر فصل آخر (ssr) میخوام دوره بخرم 🙂
- علیرضا(مدیریت)
  اکتبر 13, 2019
  پاسخ
  سلام آرش عزیز.سلامت باشید
  اگر مشکل خاصی پیش نیاد تا 2 ماه دیگه تمامی فصل ها آموزش داده میشه
حسینی
اکتبر 13, 2019
پاسخ
تشکر از دوره خوبتون
فقط لینک دانلود پارت سوم خرابه ممنون میشم بررسی کنید
- علیرضا(مدیریت)
  اکتبر 13, 2019
  پاسخ
  سلام
  ممنون از شما
  بررسی شد مشکلی وجود نداشت، لطفا مجددا تست کنید
  اگر مشکلی داشتید حتما با ما در ارتباط باشید تا سریعا مساله بررسی و حل بشه.
مژگان
اکتبر 13, 2019
پاسخ
سلام خسته نباشید
تشکر میکنم بابت دوره های خوب سایت و واقعا به نسبت دوستان دیگه ای که میبیتم قیمت های مناسب
اما چند تا نکته و سوال داشتم ممنونم منو اگه راهنمایی کنید
من بین ری اکت و ویو موندم کدومو انتخاب کنم؟ قبلا ری اکا نیتیو کار میکردم دوره های شمارو هم دیدم اما الان میخوام بیام سمت سایت
یکی هم اینکه الان این دوره کاملا پروژه رو میزنید؟ همه مباحث گفته میشه؟
- مهدی(مدیریت)
  اکتبر 13, 2019
  پاسخ
  سلام سلامت باشید
  خواهش میکنم.ببینید چون قبلا شما ری اکت نیتیو کار میکردید کارکردن با react میتونه خیلی براتون راحت باشه و سریع مباحث رو پیش ببرید.
  در این دوره تمامی مباحث گفته میشه و از ابتدای دوره در قالب پروژه مدیریت دانش آموزان تمامی مباحث بیان و آموزش داده میشه.
محمد
اکتبر 13, 2019
پاسخ
سلام من می خواهم این دوره را خریداری کنم چون توی توضیحات که دیدم و شنیدم، کامل بود. و میخواستم بدونم احراز هویت یا کلا از این جور چیزا توی آموزش هست؟
- مهدی(مدیریت)
  اکتبر 13, 2019
  پاسخ
  سلام محمد عزیز
  سرفصل های این دوره کامل است و مباحث مربوط به احراز هویت نیز بیان شده است.
فاطمه عبدللی
اکتبر 12, 2019
پاسخ
خسته نباشید ممنون بابت این دوره
هوک هم در این دوره گفته شده و بررسیی شده ؟
نیست که
- مهدی(مدیریت)
  اکتبر 12, 2019
  پاسخ
  سلام سلامت باشید
  بله این دوره مطابق با اخرین نسخه react هست و مباحث مربوط به hooks به صورت کامل بیان شده
  مباحثی مثل useState وuseEffect و useReducer و useContext مربوط به هوک هستند که سرفصل ها ی دوره آموزش داده شده
مهران
اکتبر 12, 2019
پاسخ
سلام
تو این دوره جامع, مباحث react-native هم تدریس شده ؟
- علیرضا(مدیریت)
  اکتبر 12, 2019
  پاسخ
  سلام مهران عزیز
  این دوره مربوط به Reactjs هست و جدیدترین مباحث ری اکت جی اس به صورت کامل تدریس شده، اگر علاقه مند به یادگیری React Native هستید میتونید دوره جامع ری اکت نیتیو رو تهیه کنید.
الکترون
اکتبر 12, 2019
پاسخ
سلام
من آموزش پروژه محور nodejs همین سایت رو تهیه کردم اما چون فایلهای هر درس همراه ویدئو نبود و فایل نهایی در دسترس بود، متاسفانه نتونستم همراه با هر درس پیش برم، آیا در این آموزش هم فایلهای مورد نیاز یکجا و در آخر قرار داده شده یا همراه با ویدئوی مربوطه است؟
- علیرضا(مدیریت)
  اکتبر 12, 2019
  پاسخ
  سلام
  خسته نباشید
  ببینید دوره ها باهم متفاوت هستند طبیعتا، البته پاسخ شما در مورد دوره نود جی اس کاملا در کامنت های خود اون دوره پاسخ داده شده
  اما در مورد این دوره بله فایل های هر فصل همراه اون فصل اپلود شده که شما میتونید همراه دوره پیش برید و ری اکت رو به خوبی یادبگیرید
  موفق و پیروز باشید
حسینی پور
اکتبر 12, 2019
پاسخ
چه عجب خدایی!!!!!
خسته نباشید و تبریک میگم تولو سایت رو
- مهدی(مدیریت)
  اکتبر 12, 2019
  پاسخ
  خودمون هم شگفت زده هستیم تا بعد از مدت ها تونستیم این دوره رو منتشر کنیم.
  سلامت باشید و ممنون از لطفتون
- بهنام
  اکتبر 12, 2019
  پاسخ
  سلام یه سوال من الان امکان ثبت نام ندارم و چند روز دیگه ثبت نام میکنم . تا اون موقع از بحث عقب میمونم و پشتیبانی و تالار گفتگو و … طبق زمان بندی جلو میره؟یا هر وقت بخوام میتونم شروع کنم؟
  - مهدی(مدیریت)
    اکتبر 13, 2019
    پاسخ
    سلام بهنام عزیز
    هر وقت که تونستی میتونی دوره رو شروع کنی و اگر سوالی داشتی یا به مشکل برخوردی میتونی در تالار گقتمان بیانش کنی