00:00 / 00:00
1.8x
1.4x
1.0x
0.7x
HD SD
HD
SD
ثبت‌نام رایگان
  • دسترسی به 5 جلسه نمونه از دوره
  • دسترسی به 5 جلسه نمونه از دوره
  • عضویت در تالار گفت‌وگوی دوره
  • اضافه شدن دوره به پروفایل
دوره کامل
  • دسترسی به تمام قابلیت‌های دوره
  • دسترسی کامل و نامحدود به محتوا
    +
  • گواهی‌نامه دانشگاه صنعتی شریف
  • پروژه محور
  • تمرین و آزمون
  • تالار گفتگو
  • تسهیل استخدام
339,000 تومان
امکان پرداخت ارزی ‎
00:00 / 00:00
1.8x
1.4x
1.0x
0.7x
HD SD
HD
SD
دانشگاه صنعتی شریف دانشگاه صنعتی شریف

دوره آموزش React

دوره‌های مکتب‌پلاس
46 ساعت
87٪ (339 رای)

فرض کنید یکی از دوستان شما عکسی را در اینستاگرام پست کرده است. حالا شما اگر بروید و تصویر را لایک کنیدکرده و سپس نظرات را بررسی کنید، در حالی که نظرات را بررسی می‌کنید، می‌بینید که تعداد لایک ها 100 عدد از زمانی که شما پست را لایک کردید، افزایش یافته است، بدون اینکه شما صفحه را رفرش کنید. این دقیقاً همان کاری است که React انجام می‌دهد. هدف از دوره آموزش React آموزش اصول این کتاب خانه جاوا اسکریپت است که به‌صورت کامل و جامع به آن مپردازد. قبل از اینکهدر ادامه ما دوره آموزش React را معرفی کنیمخواهیم کرد و در ادامه در قسمت توضیاحت بیشتر با React بیشتر آشنا خواهیم شد.  ابتدا اجازه دهید که کمی با ری اکت و جنبه‌های مختلف آن آشنا شویم.

دوره آموزش React و معرفی آن

در این بخش می‌خواهیم به معرفی دور آموزش فریمورک React JS بپردازیم به این صورت که شما در مکتب خونه می‌توانید با پرداخت کمترین هزینه این درس و آموزش را بیاموزید. مهم‌ترین نکته‌ای که در اینجا وجود دارد این است که بعد از اینکه این درس را آموختید می‌توانید برای خود کسب و کار دیجیتالی راه بیندازید که امروزه درآمد مفید و خوبی دارد.

ابتدا اجازه دهید شما را با سرفصل‌های دوره آموزشReact آشنا کنیم:

  • سرفصل اول: در فصل اول با خود React و کاربردهای آن آشنا می‌شویم.
  • سرفصل دوم: در فصل دوم تمامی ابزارهای مورد نیاز کار را روی یک نصب جدید از Windows 10 نصب می‌کنیم.
  • سرفصل سوم: در فصل سوم با قابلیت‌های ES6 آشنا می‌شویم و یک مرور کوتاه بر HTML و CSS هم خواهیم داشت.
  • سرفصل چهارم: در فصل چهارم شما با ضروریات و ملزومات لازم برای استفاده از React آشنا می‌شوید و آماده به نوشتن برنامه‌ با React خواهید شد و همچنین اولین برنامه React خود را می‌نویسید.
  • سرفصل پنجم: شما در فصل پنجم ساخت یا برنامه react آشنا می‌شوید. همچنین با ابزار JSX آشنا می‌شوید که به شما این قابلیت را می‌دهد که در javascript، دستورات HTMl را استفاده کنید. در ادامه‌ی سرفصل پنجم Component‌ها و نحوه استفاده از آن‌ها در برنامه و در نهایت prop ها و تست‌زنی در React را آموزش می‌بینید.
  • سرفصل ششم: در این فصل ششم شما با نوشتن یک سایت Resume با استقاده از React آشنا خواهید شد و در نهایت قسمتی از این سایت به عنوان پروژه شما خواهد بود.
  • سرفصل هفتم: در این قسمت قرار است با استفاده از React یک سایتی که برای شما کار To Do لیست را انجام می‌دهد بنویسید. این To Do List قابلیت‌های جذابی دارد که با نوشتن آن نسبت به مبحث Front end و البته React مسلط‌تر خواهید شد.

آیا مدرک شرکت در دوره آموزش React به کاربران اعطا می‌شود؟

در آخر وقتی شما این درس را آموختید و کاملاً به فریم‌ورک React JS مسلط شدید مکتب خونه به شما مدرک معتبری را اهدا می‌کند. این دوره آموزش React یک دوره آموزش مقدماتی تا پیشرفته به‌حساب می‌آید و برای کسانی که می‌خواهند به صورت تئوری و عملی دانش خود را در جاوا اسکریپت بلا ببرند بسیار مفید است. در این دوره آموزش ری اکت نحوه پیاده‌سازی آن را برای پروژه‌های عملی یاد خواهیم گرفت و قادر خواهید بود برنامه‌های کاربردی مد نظر خود را با آن توسعه دهید.

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

معرفی مدرس دوره آموزشReact 

مدرس دوره آموزش React استاد سورنا سلیمانی است که ایشان تحصیلات دانشگاهی در زمینه مهندسی نرم‌افزار ندارند بلکه خودشان با تلاش و پشتکار و تمرین‌های زیاد توانستند در حوزه برنامه‌نویسی مهارت کسب کنند. ایشان در حال حاضر در بخش فرانت‌اند (front-end) در شرکت اسکیما (Schema) مشغول به کار هستند.

سرفصل‌های دوره دوره آموزش React

فصل اول - معرفی دوره
00:19 ساعت
00:19
Combined Shape Created with Sketch. 3 جلسه
بارم:
0%
نمایش جلسات فصل  

در این فصل با خود React و کاربردهای آن آشنا می شویم. همچنین می‌بینیم که در طول دوره چه مطالبی به عزیزان تدریس می‌شود.

How to watch Course Videos
"09:29
Why React
"07:09
Course Overview
"03:09
فصل دوم - نصب ابزارهای مورد نیاز
00:31 ساعت
00:28
Combined Shape Created with Sketch. 6 جلسه
بارم:
5%
نمایش جلسات فصل  

در این فصل تمامی ابزارهای مورد نیاز کار را روی یک نصب جدید از Windows 10 نصب میکنیم. ابزارهایی مثل Google Chrome، Node ، Yarn و ...

chrome installation
"03:45
node installation
"06:45
yarn installation
"03:03
vs code installation
"06:26
git
"08:31
quiz
100.0%
     
"03:00
فصل سوم - یاداوری پیش نیازها
01:26 ساعت
01:25
Combined Shape Created with Sketch. 2 جلسه
بارم:
5%
نمایش جلسات فصل  

در این بخش با قابلیتهای ES6 آشنا می‌شویم و یک مرور کوتاه بر HTML و CSS هم خواهیم داشت.

rom js to ES6
"85:02
js to es6
100.0%
     
"01:00
فصل چهارم - شروع برنامه نویسی React.js
00:16 ساعت
00:12
Combined Shape Created with Sketch. 4 جلسه
بارم:
5%
نمایش جلسات فصل  

در این فصل شما با ضروریات و ملزومات لازم برای استفاده از React آشنا می‌شوید و اماده به نوشتن برنامه‌ با React خواهید شد و همچنین اولین برنامه React خود را می‌نویسید.

introduction
"00:57
adding script tags
"06:15
writing first react component
"05:04
Quiz - Introduction to ReactJS
100.0%
     
"04:00
فصل پنجم - اساس React.js
02:44 ساعت
02:36
Combined Shape Created with Sketch. 12 جلسه
بارم:
5%
نمایش جلسات فصل  

شما در این فصل ساخت یا برنامه ریکت آشنا می‌شوید. همچنین با ابزار JSX آشنا می‌شوید که به شما این قابلیت را می‌دهد که در جاوا اسکریپ، دستورات HTMl را استفاده کنید. در ادامه‌ی فصل Component ها و نحوه استفاده از آن‌‌ها در برنامه و در نهایت prop ها و تست زنی در ریکت را آموزش می‌بینید.

create react app
"13:18
CRA structure
"21:27
Ejecting react
"17:21
jsx
"24:12
React components
"16:28
Props
"06:53
Different Outputs from Single Component
"04:32
State and Lifecycle
"21:28
Event Handling
"04:02
Prop Type
"08:33
Testing in React
"18:12
Quiz - ReactJS Basis
100.0%
     
"08:00
فصل ششم - پروژه رزومه
19:40 ساعت
01:40
Combined Shape Created with Sketch. 7 جلسه
بارم:
40%
نمایش جلسات فصل  

در این فصل شما با نوشتن یک سایت Resume با استقاده از React اشنا خواهید شد و در نهایت قسمتی از این سایت به عنوان پروژه شما خواهد بود.

Starting Resume Project
"04:42
Adding Html And Css
"30:38
Adding Components
"30:32
Finishing Up
"24:47
Adding Your Resume To Github Pages
"07:43
Your Turn
"02:34
پروژه رزومه

 (الزامی)

100.0%
     
"1080:00
فصل هفتم ـ پروژه ToDo
20:55 ساعت
00:55
Combined Shape Created with Sketch. 6 جلسه
بارم:
40%
نمایش جلسات فصل  

در این فصل شما قرار است با استفاده از React یک سایتی که برای شما کار To Do لیست را انجام می دهد بنویسید این To Do List قابلیت های جذابی دارد که با نوشتن ان نسبت به مبحث Front end و البته React مسلط تر خواهید شد.

todoMVC - Mobx
"17:35
todo MVC Scaffolding todo mvc APP
"05:40
todoMVC - Adding Views
"06:30
todo MVC Adding interactivity With Mobx
"21:38
todoMVC - Your Turn
"03:59
پروژه To Do

 (الزامی)

100.0%
     
"1200:00

تالار گفت‌وگو

استاد دوره
سورنا سلیمانی سورنا سلیمانی

سورنا سلیمانی، در زمینه نرم‌افزار تحصیلات دانشگاهی ندارد و تمام اطلاعاتی را که در حوزه برنامه نویسی دارد را خودش به کمک ویدئو، مطالعه و تمرین کرده است.
سورنا خودش را یک هکر می‌شناسد و معتقد است که آدم هرکار بخواهد را با تلاش، مطالعه و سرچ در گوگل می‌تواند انجام دهد. او مهندس معمار از دانشگاه شهید بهشتی است و فارغ التحصیل کارشناسی ارشد مدیریت پروژه از دانشگاه تهران می‌باشد و در حال حاضر برای شرکت اسکیما (Schema) نقش‌های مختلفی از جمله عهده‌داری بخش فرانت اند، دارد.

اطلاعات بیشتر
درباره گواهینامه
دانشگاه صنعتی شریف دانشگاه صنعتی شریف (اطلاعات بیشتر)
حد نصاب قبولی در دوره:
75.0 نمره
فارغ‌التحصیل شدن در این دوره نیاز به ارسال تمرین‌ها و پروژه‌های الزامی دارد.

پیش‌نیاز‌های دوره دوره آموزش React

برای گذراندن این دوره نیاز به آشنایی اولیه با Javascript ،Html و CSS دارید.

 

آموزش طراحی وب سایت (Front-End)
اطلاعات بیشتر

ویژگی‌های دوره دوره آموزش React

Combined Shape1 Created with Sketch. گواهی‌نامه دانشگاه صنعتی شریف

در صورت قبولی در دوره، گواهی نامه معتبر دانشگاه صنعتی شریف(مشاهده نمونه گواهی دانشگاه صنعتی شریف) به اسم شما توسط دانشگاه صادر می شود و در اختیار شما قرار می گیرد.

خدمات منتورینگ

خدمات منتورینگ به معنای برخورداری دانشجو از راهنما یا پشتیبان علمی در طول گذراندن دوره می‌باشد. این خدمات شامل پاسخگویی به سوالات آموزشی(در قالب تیکتینگ)، تصحیح آزمون یا پروژه های دوره و ارائه باز خورد موثر به دانشجو می‌باشد.

پروژه محور

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

تمرین و آزمون

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

تالار گفتگو

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

تسهیل استخدام

در صورت قبولی در دوره، شما می‌توانید با وارد کردن اطلاعات آن در بخش دوره‌های آموزشی رزومه‌ساز «جاب ویژن»، تایید مهارت خود را در قالب اضافه شدن «مدال مهارت» به روزمه آنلاین خود دریافت نمایید. این مدال علاوه بر ایجاد تمایز در نمایش رزومه شما، باعث بالاتر قرار گرفتن آن در لیست انبوه رزومه‌های ارسالی به کارفرما شده و بدین ترتیب شانس شما را برای استخدام در سازمانهای موفق و پر متقاضی افزایش می‌دهد. 

 

مشاهده اطلاعات بیشتر

نظرات  (10 نظر)

علی مرتضی
10:55 - 1401/01/28
فارغ‌التحصیل دوره
در یک کلمه افتضاح بود و ارزش خریدن رو نداشت. من فقطه فقط به خاطر مدرک صنعت شریفش این دوره رو تهیه کردم که اونم 5 ماهه که قراره به دستم برسه ولی هنوز نرسیده
بهرام
14:53 - 1400/01/26
دانشجوی دوره
بسیار مبتدی و بی استفاده
پشتیبانی مکتب‌خونه
بهرام عزیز؛ از اینکه نظر خود را با ما در میان گذاشتید صمیمانه سپاسگزاریم. لطفا در صورت امکان با ارسال جزییات بیشتر ما را در ارتقا سطح کیفی خدمات یاری رسانید. info@maktabkhooneh.org
علی
18:46 - 1399/12/24
دانشجوی دوره
دوره فقط در حد آشنایی اولیه با ری اکت خوبه و خیلی از موارد و مباحث جدید توی دوره مطرح نشده. اگه میشد دوره ها آپدیت بشن ارزش خرید داشت ولی الان اصلا ارزش خرید نداره و دوره های خیلی بهتر با هزینه های خیلی کمتر هستش که بروز هستن و در حال آپدیت.
پشتیبانی مکتب‌خونه
علی عزیز؛ از اینکه نظر خود را با ما در میان گذاشتید صمیمانه سپاسگزاریم. پیام شما جهت بررسی به بخش مربوطه ارسال شد.
عرفان
09:38 - 1399/07/10
دانشجوی دوره
مفاهیم دوره خیلی قدیمی هستند و با توجه به آپدیت های خود فریمورک ری اکت (hook , NextJs) عملا کاربردی در پروژه های بروز ندارد. با تشکر
پشتیبانی مکتب‌خونه
عرفان عزیز؛ از اینکه نظر خود را با ما در میان گذاشتید صمیمانه سپاسگزاریم. موارد مطرح شده جهت بررسی بیشتر به بخش مربوطه ارسال شد. در صورت نیاز به پیگیری بیشتر با شما در ارتباط خواهیم بود.
پرستو
00:49 - 1399/07/08
فارغ‌التحصیل دوره
برای آشنایی با ری اکت و راه افتادن دوره خوبی بود. اما درخواست دارم که دوره رو اپدیت کنید چون قدیمی بودن دوره‌ها به شخصه اذیت کنندس و این باعث میشه دستوراتی که قبلا کاربرد داشتند، الان در پروژه عملاً بی فایده باشند و با خطاهای مختلف روبرو بشیم. همین سرعت کار رو به طرز قابل توجی کاهش میده. مباحث دیگری مثل hook و سمت سرور هم به دوره اضافه بشه عالیه . تشکر
میلاد
13:56 - 1399/07/06
فارغ‌التحصیل دوره
به‌نظرم این دوره فقط برای یه آشنایی خیلی کوچیک با React مناسبه. مواردی که توضیح داده شده خیلی خیلی سطحیه و برای ورود به بازار کار اصلا کافی نیست. پروژه "رزومه" فقط مبحث ui رو پوشش میده و خیلی مربوط به مفاهیم عمیق‌تر نمیشه. پروژه "todo" هم بهتر بود با Redux یا Context می‌بود چون بیشتر استفاده میشن. مبحث hook ها اصلا تدریس نشد که فکر میکنم به این خاطر بود که دوره قدیمیه. چیزی راجع‌به ارتباط با سرور یا حتی Router گفته نشد. بهتر بود که تعداد پروژه‌ها بیشتر و خود پروژه‌ها هم منسجم‌تر و کامل‌تر می‌بود. به‌نظرم اگه زمان یا تعداد ویدیوها بیشتر بشه تا کیفیت تدریس بالاتر بره اصلا اشکالی نداره. در کل برای آشنایی با اینکه React چیه دوره بدی نبود ولی به‌نظرم با این دوره نمیشه به درک نسبتا عمیقی از React رسید و ارزش پرداخت این مبلغ رو نداشت با تشکر از تیم پشتیبانی خسته‌نباشید :)
امیر
13:38 - 1399/07/05
دانشجوی دوره
خداییش ناقص بود بعد این که آموزش قدیمی بود حیف پول!
هورمزد
19:13 - 1399/07/04
دانشجوی دوره
آموزش بسیار ضعیفی هست. این همه فرانت اند کار خوب در ایران داریم، واقعاً نمی شد دوره بهتری رو ارائه داد؟ چهار فصل اول که کلاً بسیار بی ربط و بی ارزش هستند. تو یکی از فصل ها نصب گوگل کروم آموزش داده می شه!!! فصل پنجم هم ضعیف بود. فصل ششم و هفتم صرفاً برای آشنایی با ری اکت خوب هستند و نه بیشتر. خرید دوره رو اصلاً پیشنهاد نمی کنم.
پشتیبانی مکتب‌خونه
هورمزد عزیز؛ با تشکر از همراهی شما.متاسفیم که این دوره نتواسته نظر شما را جلب کند. نظرات شما به واحد مربوطه ارجاع داده خواهد شد.
حسن
18:43 - 1399/06/25
فارغ‌التحصیل دوره
خیلی اموزش ناقصی هست و در حد اشنایی با ری اکت هست مثلا دوره مقدماتی
ایمان
12:50 - 1399/03/30
فارغ‌التحصیل دوره
باید بروز رسانی بشه و کامل ارزش این هزینه رو نداشت

سوالات پرتکرار

React چییست؟
Reactjs یک کتابخانه متن باز جاوا اسکریپت است که برای طراحی رابط کاربرس سایت ها به ویژه اپلیکیشن های تک صحه ای (SPA) مورد استفاده قرار می‌گیرد.از این فریمورک می‌توان برای توسعه وب سایت و موبایل بهره برد. از مهمترین ویژگی های react قابلیت استفاده مجدد از component های ایجاد شده است.
چرا بهتر است از react استفاده کنیم؟
React این قابلیت رو دارد که هر نوع ظاهری (view) که برای ساخت یک وب سایت یا اپلیکیشن موبایل لازم است را ایجاد کند.همچنین امکان استفاده مجدد از المان های ایجاد شده در برنامه را برای برنامه نویس مهیا می‌کند.از مهم ‌ترین امتیازات React به نسبت سایر فریمورک ها می‌توان به سرعت بالاتر، سادگی و scalable بودن است.
چه شرکت هایی از react استفاده می‌کنند؟
این فریمورک اولین بار توسط تیم شرکت FACEBOOK ایجاد شده و توسعه پیدا کرد. Netflix ، New York Times، Yahoo! Mail.، Khan Academy و Dropbox از بزرگ ترین شرکتهایی است که برای توسعه محصولات خود از react استفاده می‌کند
آیا در صورت خرید دوره، گواهی نامه آن به من تعلق می گیرد؟
خیر؛ شما با خرید دوره می توانید در آن دوره شرکت کنید و به محتوای آن دسترسی خواهید داشت. در صورتی که در زمان تعیین شده دوره را با نمره قبولی بگذرانید، گواهی نامه دوره به نام شما صادر خواهد شد.
آیا گواهی‌نامه‌های دانشگاهی به صورت رسمی و توسط دانشگاه مربوطه صادر می‌شود؟
بله؛ گواهی نامه ها توسط دانشگاه مربوطه و با امضای رئیس دانشگاه یا مسئول مربوطه که حق امضای گواهی نامه ها را دارد صادر می شود و گواهی نامه معتبر دانشگاه است که به اسم هر فرد صادر می شود.
حداقل و حداکثر زمانی که می توانم یک دوره را بگذرانم چقدر است؟
برای گذراندن دوره حداقل زمانی وجود ندارد و شما می توانید در هر زمانی که مایل هستید فعالیت های مربوطه را انجام دهید. برای هر دوره یک حداکثر زمان تعیین شده است که در صفحه معرفی دوره می توانید مشاهده کنید که از زمان خرید دوره توسط شما تنها در آن مدت شما از ویژگی های تصحیح پروژه ها توسط پشتیبان و دریافت گواهی نامه بهره مند خواهید بود.
در صورت قبولی در دوره، آیا امکان دریافت نسخه فیزیکی گواهی نامه دوره را دارم؟
خیر، به دلیل مسائل زیست محیطی و کاهش قطع درختان، فقط نسخه الکترونیکی گواهی‌نامه در اختیار شما قرار می‌گیرد
پس از سپری شدن زمان دوره، به محتوای دوره دسترسی خواهم داشت؟
بله؛ پس از سپری شدن مدت زمان دوره شما به محتوای دوره دسترسی خواهید داشت و می توانید از ویدئوها، تمارین، پروژه و دیگر محتوای دوره در صورت وجود استفاده کنید ولی امکان تصحیح تمارین توسط پشتیبان و دریافت گواهی نامه برای شما وجود نخواهد داشت.
صدور گواهی‌نامه از سوی دانشگاه شریف چقدر زمان می‌برد؟
صدور گواهی‌نامه‌ی رسمی از سوی دانشگاه شریف با توجه به پروسه‌های اداری، دورکاری پرسنل دانشگاه و زمانبر بودن فرآیند امضا توسط اساتید دانشگاه حداقل 4 ماه زمان خواهد برد. مکتب‌خونه به محض صدور گواهی‌نامه از سوی دانشگاه، آن را برای شما ارسال خواهد کرد. در صورت نیاز فوری، می‌توانید گواهی موقت پایان دوره را با ارسال درخواست به ایمیل info@maktabkhooneh.org دریافت نمایید.

اطلاعات بیشتر

React چیست؟

React یک کتابخانه جاوا اسکریپت، کارآمد و منعطف برای ساخت رابط کاربری است. در واقع و به صورت پیشفرض ReactJS یک کتابخانه فرانت‌اند منبع باز و مبتنی بر استفاده از کامپوننت است که مسئول لایه نمایش و استایل دهی برنامه به‌حساب می‌آید . این کتاب خانه توسط فیس‌بوک یا کمپانی متا فعلی نگهداری می‌شود.

یک برنامه React از چندین مؤلفه یا کامپوننت تشکیل شده است که هر کدام وظیفه ارائه یک قطعه کوچک و قابل استفاده مجدد از HTML را بر عهده دارند. کامپوننت ها را می‌توان در اجزای دیگر تو در تو قرار داد تا به برنامه‌های پیچیده اجازه دهد که از بلوک‌های ساختمانی ساده ساخته شوند.

توجه: React یک چارچوب نیست. این فقط یک کتابخانه است که توسط فیس‌بوک برای حل برخی از مشکلاتی که قبلاً با آن روبرو بودیم توسعه یافته است.

React چگونه کار می‌کند؟

در حین ساخت برنامه‌های سمت مشتری، تیمی از توسعه‌دهندگان فیس‌بوک متوجه شدند که DOM کند است. DOM یک رابط برنامه نویسی کاربردی (API) برای اسناد HTML و XML به‌حساب می‌آید. برای سریع‌تر کردن آن، React یک DOM مجازی را پیاده‌سازی می‌کند که اساساً یک نمایش درختی DOM در جاوا اسکریپت است؛ بنابراین هنگامی‌که نیاز به خواندن یا نوشتن در DOM دارد، از نمایش مجازی آن استفاده می‌کند. سپس DOM مجازی سعی خواهد کرد کارآمدترین راه را برای به‌روزرسانی DOM مرورگر بیابد.

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

ویژگی‌های ری اکت جی اس

 ویژگی‌های منحصربه‌فردی در React موجود است که عبارت‌اند از:

  • سریع: ری اکت جی اس سریع‌تر از جاوا اسکریپت معمولی است زیرا هنگام ترجمه به جاوا اسکریپت معمولی بهینه‌سازی را انجام می‌دهد.
  • Virtual DOM: Virtual DOM برای ری اکت مانند یک کپی سبک از DOM واقعی است؛ بنابراین برای هر شی که در DOM اصلی وجود دارد، یک شی برای آن در React Virtual DOM وجود دارد. دست‌کاری DOM کند ولی دست‌کاری Virtual DOM سریع است زیرا چیزی روی صفحه‌نمایش داده نمی‌شود.
  • ویژگی Data Binding: این ویژگی به شما امکان کنترل بهتری به برنامه خود می‌دهد.
  • کامپوننت: کامپوننت یکی از بلوک‌های اصلی سازنده React است. به‌عبارت‌دیگر می‌توان گفت که هر اپلیکیشنی که در React توسعه می‌دهید از قطعاتی به نام کامپوننت تشکیل شده است. کامپوننت‌ها کار ساخت رابط‌های کاربری را بسیار ساده‌تر می‌کنند. شما می‌توانید یک UI را به چند بخش جداگانه به نام کامپوننت تقسیم کنید و به طور مستقل روی آن‌ها کار کنید و همه آن‌ها را در یک جزء والد که UI نهایی شما خواهد بود ادغام کنید.
  • عملکرد: React.js به دلیل استفاده از JSX در مقایسه با جاوا اسکریپت و  html و css معمولی سریع‌تر است.

در دوره آموزش React با ویژگی‌های بیشتری از این چارچوب محبوب در قالب عملی و تئوری آشنا خواهیم شد.

React Native در مقابل React.js و React Router

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

از طرفی React Router یک کتابخانه استاندارد برای مسیریابی در React است. این کتابخانه امکان پیمایش در بین نماهای اجزای مختلف در یک React Application را فراهم می‌کند و اجازه می‌دهد URL مرورگر را تغییر دهید و رابط کاربری را با URL همگام نگه می‌دارد.

چرا از React.js برای توسعه وب استفاده کنیم؟

به عنوان بخشی از زبان جاوا اسکریپت، استفاده از React مزایای زیادی را به همراه دارد. محصولاتی که با React ساخته می‌شوند مقیاس‌پذیر هستند. در واقع ری اکت به عنوان یک چارچوب واحد بهره‌وری فوق‌العاده را به ارمغان می‌آورد که در آن الگوهای گردش کار برای کار تیمی راحت است و کد UI قابل خواندن و نگهداری است. شرکت‌های پیشرو جهان از React و سایر فناوری‌های JS در برخی از محصولات برتر بازار استفاده کرده‌اند (اینستاگرام، ردیت و فیسبوک واضح‌ترین نمونه‌ها هستند).

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

گردش کار ساده برای درک

یکی از دلایل اصلی برای موراد استفاده قرار دادن React.js برای توسعه وب، رابط توسعه و زبان برنامه نویسی بهینه‌سازی شده کتابخانه است؛ بنابراین، API سبک وزن React با ظرفیت‌های عملکرد سریع برای دستیابی به گردش کار توسعه سریع و بدون دردسر به ما کمک می‌کند. کامپوننت‌ها و مفاهیم React واقعاً ساده هستند و یادگیری آن آسان است. با استفاده از دوره آموزش React کاربران به راحتی قادر خواهند بود مفاهیم ری اکت و چرخه حیات کامپوننت را به خوبی درک کنند.

انعطاف‌پذیری و سازگاری نهایی

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

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

قابلیت استفاده مجدد

هنگامی‌که یک عنصر برنامه وب React.js را ایجاد کردید، یک شی منحصربه‌فرد دریافت می‌کنید که می‌تواند به هر پروژه دیگری که با کد مبتنی بر React سازگار است اضافه شود و این React را قابل استفاده مجدد می‌کند.

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

عملکرد بالا توسط DOM  مجازی

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

تغییرات DOM باعث کندی سیستم می‌شود و با مجازی سازی DOM، این تغییرات به روشی هوشمند به حداقل رسیده و بهینه می‌شوند. تمام دستکاری‌های DOM مجازی در بک‌اند اتفاق می‌افتند، یعنی به‌صورت داخلی و مستقل که همچنین به میزان قابل توجهی در مصرف منابع سخت‌افزاری صرفه‌جویی می‌کند.

مجموعه ابزار گسترده

React Developer Tools به همراه Redux Development Tools به عنوان ابزارهای React ظرفیت‌های بسیار مناسبی را برای توسعه‌دهندگان ارائه می‌دهند. از این ابزراها می‌توان به راحتی به عنوان افزونه‌های معمولی Chrome نصب و استفاده کرد. به طور خاص، با کمک آن‌ها، می‌توان مؤلفه‌های سلسله مراتبی مبتنی بر React را به طور مؤثر بررسی کرد و کار توسعه با React را به‌صورت آنی و در لحظه نمایش داد.

جامعه وسیع

React با داشتن یکی از 5 مخزن برتر در GitHub، توسط برخی از گسترده‌ترین انجمن‌های موجود در بازار ارائه می‌شود و توسط تعدادی از شرکت‌های Fortune 500 (از جمله Netflix، Uber، Amazon و Airbnb) ترجیح داده می‌شود.

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

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

×

ثبت نظر

به این دوره از ۱ تا ۵ چه امتیازی می‌دهید؟

فصل اول - معرفی دوره
00:19 ساعت
00:19
Combined Shape Created with Sketch. 3 جلسه
بارم:
0%
نمایش جلسات فصل  

در این فصل با خود React و کاربردهای آن آشنا می شویم. همچنین می‌بینیم که در طول دوره چه مطالبی به عزیزان تدریس می‌شود.

How to watch Course Videos
"09:29
Why React
"07:09
Course Overview
"03:09
فصل دوم - نصب ابزارهای مورد نیاز
00:31 ساعت
00:28
Combined Shape Created with Sketch. 6 جلسه
بارم:
5%
نمایش جلسات فصل  

در این فصل تمامی ابزارهای مورد نیاز کار را روی یک نصب جدید از Windows 10 نصب میکنیم. ابزارهایی مثل Google Chrome، Node ، Yarn و ...

chrome installation
"03:45
node installation
"06:45
yarn installation
"03:03
vs code installation
"06:26
git
"08:31
quiz
100.0%
     
"03:00
فصل سوم - یاداوری پیش نیازها
01:26 ساعت
01:25
Combined Shape Created with Sketch. 2 جلسه
بارم:
5%
نمایش جلسات فصل  

در این بخش با قابلیتهای ES6 آشنا می‌شویم و یک مرور کوتاه بر HTML و CSS هم خواهیم داشت.

rom js to ES6
"85:02
js to es6
100.0%
     
"01:00
فصل چهارم - شروع برنامه نویسی React.js
00:16 ساعت
00:12
Combined Shape Created with Sketch. 4 جلسه
بارم:
5%
نمایش جلسات فصل  

در این فصل شما با ضروریات و ملزومات لازم برای استفاده از React آشنا می‌شوید و اماده به نوشتن برنامه‌ با React خواهید شد و همچنین اولین برنامه React خود را می‌نویسید.

introduction
"00:57
adding script tags
"06:15
writing first react component
"05:04
Quiz - Introduction to ReactJS
100.0%
     
"04:00
فصل پنجم - اساس React.js
02:44 ساعت
02:36
Combined Shape Created with Sketch. 12 جلسه
بارم:
5%
نمایش جلسات فصل  

شما در این فصل ساخت یا برنامه ریکت آشنا می‌شوید. همچنین با ابزار JSX آشنا می‌شوید که به شما این قابلیت را می‌دهد که در جاوا اسکریپ، دستورات HTMl را استفاده کنید. در ادامه‌ی فصل Component ها و نحوه استفاده از آن‌‌ها در برنامه و در نهایت prop ها و تست زنی در ریکت را آموزش می‌بینید.

create react app
"13:18
CRA structure
"21:27
Ejecting react
"17:21
jsx
"24:12
React components
"16:28
Props
"06:53
Different Outputs from Single Component
"04:32
State and Lifecycle
"21:28
Event Handling
"04:02
Prop Type
"08:33
Testing in React
"18:12
Quiz - ReactJS Basis
100.0%
     
"08:00
فصل ششم - پروژه رزومه
19:40 ساعت
01:40
Combined Shape Created with Sketch. 7 جلسه
بارم:
40%
نمایش جلسات فصل  

در این فصل شما با نوشتن یک سایت Resume با استقاده از React اشنا خواهید شد و در نهایت قسمتی از این سایت به عنوان پروژه شما خواهد بود.

Starting Resume Project
"04:42
Adding Html And Css
"30:38
Adding Components
"30:32
Finishing Up
"24:47
Adding Your Resume To Github Pages
"07:43
Your Turn
"02:34
پروژه رزومه

 (الزامی)

100.0%
     
"1080:00
فصل هفتم ـ پروژه ToDo
20:55 ساعت
00:55
Combined Shape Created with Sketch. 6 جلسه
بارم:
40%
نمایش جلسات فصل  

در این فصل شما قرار است با استفاده از React یک سایتی که برای شما کار To Do لیست را انجام می دهد بنویسید این To Do List قابلیت های جذابی دارد که با نوشتن ان نسبت به مبحث Front end و البته React مسلط تر خواهید شد.

todoMVC - Mobx
"17:35
todo MVC Scaffolding todo mvc APP
"05:40
todoMVC - Adding Views
"06:30
todo MVC Adding interactivity With Mobx
"21:38
todoMVC - Your Turn
"03:59
پروژه To Do

 (الزامی)

100.0%
     
"1200:00