آموزش پروژه محور React

اگه حوصله نداری متن بخونی، میتونی کل اطلاعات این صفحه رو داخل ویدئو بالا ببینی

هیولای React js شو!

آموزش پروژه محور React دومین دوره از سری دوره های هیولاشو و پروژه محور در وبسایت megajs است. در این دوره پروژه محور React js تمرکز ما روی پروژه های واقعی مثل وبسایت مشابه دی جی کالا و وبسایت دیوار هست. این دوره پروژه محور React، از صفر مطلق شروع میشه و در ۱۰ هفته روی پلتفرم اسپات پلیر برگذار میشه. در این دوره از مرور جاوااسکریپت شروع میکنیم و موارد مورد نیاز از جاوااسکریپت رو مرور میکنیم و در هر هفته مطالب جدید یاد میگیرید و ۴ پروژه حرفه ای و کاربردی با React و Redux طراحی میکنیم. این دوره به صورت ترمی و ۴ بار در سال برگذار میشه که هفته اول هر فصل ثبت نام باز میشه و همین یک هفته در فصل فقط ثبت نام دارید!

داستان دوره هیولای React چیه؟

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

برنامه نویسی فرانت با React یکی از اون مهارت های برنامه نویسیه که دیگه نگران بازار کارش نیستی چرا که الان قوی ترین و پردآمد ترین بازار کار طراحی سایت برای React هست،داکیومنت قوی و ساده ای داره، نگران کامینویتی نیستی چون خیلی محبوب و معروفه هم در ایران هم در سطح جهانی، وخیلی پرکاربرد و کاربرپسند میشه اپلیکیشن ها و وبسایت هایی که با React طراحی میشن. پس اگه React بلد نباشی همیشه یه جای کار میلنگه مخصوصا اگه برنامه نویس فرانت اند (Front-end) باشی و React بلد نباشی، نمیتونی اسم خودتو بذاری برنامه نویس حرفه ای ری اکت.

دوره هیولای React مناسب تو هست اگه…

• اگه میخوای Front-end دولوپر بشی و به عنوان برنامه نویس فرانت استخدام بشی.
• اگه میخوای UI و رابط کاربری جذاب تر و حرفه ای تر و کاربرپسندتر بسازی.
• اگه میخوای از جاوااسکریپت درآمد بالا داشته باشی.
• اگه میخوای ارتقا شغلی پیدا کنی و مهارت به روز یاد بگیری.
• اگه میخوای خیلی راحت پروژه بگیری و شبکه سازی کنی.
• اگه میخوای با بهترین حقوق استخدام بشی.

دوره هیولای React مناسب تو نیست اگه…

• اگه جاوااسکریپت بلد نیستی.
• اگه به برنامه نویسی علاقه نداری.
• اگه نمیخوای چالش داشته باشی.
• اگه نمیخوای به درآمد بالا برسی.
• اگه نمیخوای برنامه نویس حرفه ای بشی.
• اگه نمیخوای در زمینه Front-end حرفی برای گفتن داشته باشی.

سرفصل های دوره هیولای Reactjs

در ادامه میتونید ببینید که در هر هفته (۳ تا ۴ ساعت ویدئو در هر هفته) چه موضوع کلی و مبحثی تدریس شده و برای کسب اطلاعات درباره جزئیات و زیر فصل های دوره میتونید به انتهای همین صفحه مراجعه کنید.

• هفته صفر هیولای React: مرور موضوعات مهم جاوااسکریپتی و ضروری برای شروع React

• هفته اول هیولای React: مقدمات و فاندامنتال React از نصب تا سینتکس و نحوه کار React

• هفته دوم هیولای React: کامپوننت های تابعی و کلاسی و هرچیزی درباره state و props

• هفته سوم هیولای React: پروژه (وبسایت تک صفحه ای با کامپوننت های تابعی و کلاسی)

• هفته چهارم هیولای React: تغییر آدرس url با React router و ارتباط با back-end و API

• هفته پنجم هیولای React: کار با فرم ها و اعتبار سنجی مقادیر ورودی

• هفته ششم هیولای React: پروژه (وبسایت آگهی مشابه دیوار)

• هفته هفتم هیولای React: کار با Redux

• هفته هشتم هیولای React: پروژه (وبسایت با Redux)

• هفته نهم هیولای React: پروژه (وبسایت فروشگاهی مشابه دیجی کالا)

• هفته دهم هیولای React: نکات تکمیلی و خروجی گرفتن پروژه ها و قدم بعدی

• وبینار پایانی: ساخت نمونه کار و روزمه واقعی و شبکه سازی و مهندسی اجتماعی و هرچیزی که برای ورود به بازار کار نیازه

در پایان دوره هیولای React چی میشه؟

در پایان ۱۰ هفته (یک ترم) از دوره و تکمیل تمرین ها و آزمون هایی که در پنلتون قرار میگیره شما تبدیل به برنامه نویس فرانت اند میشید و توانایی پیاده سازی هر قالب سایتی با React رو پیدا میکنید. در این آموزش پروژه محور ری اکت که از صفر شروع میشه شما نیاز به هیچ پیش زمینه ری اکتی ندارید و کافیه قدم به قدم با من جلو بیای که بعد از این دوره استخدام و دریافت پروژه به عنوان یک برنامه نویس front-end مثل آب خوردن میشه چون در هفته آخر دوره بهتون یاد میدم که چجوری روزمه و نمونه کار حرفه اب بسازی تا هیچ کارفرمایی نتونه شمارو رد کنه، چه مدیر شرکت باشه چه صاحب کسب و کاری که از شما سایت میخواد و وبینار رایگانی که آخر هر ترم برگذار میشه تجربیات ۵ ساله فریلنسری، کارمندی و تجربه مدیریتی خودم به عنوان کارفرما رو بهت یاد میدم که چجوری پروژه بگیری؟ چجوری مشتری خوب پیدا کنی؟ انواع مشتری سمی رو بشناسی و باهاشون کار نکنی و چجوری با مهندسی اجتماعی با افراد حرفه ای ارتباط بسازی و یه شبکه سازی و قوی داشته باشی. از همه مهم تر اینه که چجوری خودتو پرزنت کنی و رسانه داشته باشی تا انقدر سرت شلوغ بشه و خوب پول دربیاری که وقت سر خاروندن نداشته باشی.

نحوه برگذاری دوره پروژه محور هیولای ری اکت

دوره هیولای Reactjs در پلتفرم اسپات پلیر (spotplayer) برگذار میشه و درپایان هر هفته آزمون و تمرینن دارید و تمرین هارو برای پشتیبان ارسال میکنید و آزمون هارو که حل کردید و نمره قبولی گرفتید محتوای هفته بعد براتون باز میشه و به همین ترتیب میتونید ۱۰ هفته رو پشت سر بذارید. پس هر ترم شامل ۱۰ هفته میشه و هر هفته آزمون و تمرین مربوط به محتوای همون هفته رو دارید و بعد از ارسال تمرین و ثبت آزمون در پنل میتونید هفته بعد رو مشاهده کنید که این کار تضمین میکنه شما در انتهای دوره ضعف فنی نخواهید داشت. در ضمن یک مشاور هفتگی دارید که هر هفته با شما تماس میگیره و چک میکنه که شما در مسیر درستی باشید که در انتهای ترم (بعد از ۳ ماه) نتیجه مطلوب و مدنظر ما و خودتون رو گرفته باشید و برید تو دل بازار کار.

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

پیشنیاز این دوره حرفه ای reactjs، دوره هیولای جاوااسکریپت که میتونید ازاین لینک تهیه کنید (خرید دوره هیولای جاوااسکریپت). حالا چرا دوره هیولای جاوااسکریپت خودمو پیشنهاد میکنم؟ ببینید در کل شما نیاز به دانش جاوااسکریپتی در سطح متوسطی دارید تا بتونید به خوبی Reactjs رو درک کنید و از طرفی نیار به یک زبان مشترک داریم که من از توضیحات و اصطلاحاتی که دراین دوره استفاده میکنم ارجاع میدم به دوره هیولای جاوااسکریپت، چرا که اون یه دوره کامل و پروژه محور جاوااسکریپت از صفر تا صد هستش. حالا هرچی جاوااسکریپت قوی تری داشته باشی، React رو بهتر درک میکنی ونتیجه بهتری میگیری. پس همین الان برو دوره هیولای جاوااسکریپت رو شروع کن. البته که تازه شروع کردی من هفته صفر دوره هیولای Reactjs رو به جاوااسکریپت اختصاص دادم و موارد مورد نیاز رو خیلی سریع مرور کردم. پس میتونی این دوره رو همین الان استارت بزنی به شرطی که قول بدی به صورت موازی دوره هیولای جاوااسکریپت هم ادامه بدی. و اگه الان دانش مقدماتی از جاوااسکریپت داری (فصل Fundamental دوره هیولای جاوااسکریپت) مانعی برای شروع React نداری.

پشتیبانی دوره پروژه محور هیولای React js

در طول هر ترم (۳ماه) شما ۲تا پشتیان دارید. پشتیبان فنی که یه برنامه نویس حرفه ای ری اکت هست که ۵ سال کدنویسی Reactjs کرده و هر سوال فنی و مشکل و ابهامی درباره React داشته باشید براتون رفع میکنه و یه پشتیان هفتگی که میتونید در واتساپ باهاش درارتباط باشید و هفته ای ۱ بار هم باهاتون تماس میگیره.

پشتیبانی فنی دوره React وبسایت megajs به چه صورته؟

اگه در طول ترم (۳ماه) نیاز به کمک علمی و فنی داشتی، مبحثی رو درست متوجه نشدی یا موقع انجام تمرین ها و آزمون ها مشکل داشتی میتونی از پشتیبان حرفه ای تیم megajs بپرسی و در کمترین زمان ممکن به جواب برسی. خلاصه که در طول ترم حواسمون بهت هست و نمیذاریم بابت مشکل یا باگ خاصی کلا بیخیال برنامه نویسی و Reactjs بشی. پس میتونی از طریق تیکتینگ سایت سوالتو بپرسی و از طریق ایمیل یا پنل همین سایت منتظر جواب پشتیبان باشی.

منظور ار پشتیبان هفتگی چیه؟

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

چرا این دوره هر ۳ماه یکبار برگذار میشه؟

چون تمرکز و هدف اصلی ما نتیجه گرفتن شماست و کیفیت رو بر کمیت ترجیح دادیم و برای بالانگه داشتن کیفیت دوره و حفظ کیفیت پشتیبانی این دوره هر ۳ بار یکبار ثبت نامی میگیره و ظرفیت محدود ۱۰۰ نفره داره. پس میتونید با تخفیف ویژه همین الان به پشتیبانی پیام بدبد و برای ترم بعدی رزرو کنید تا ظرفیت تکمیل نشده.

React چیه؟

react کتابخونه ای که سال ۲۰۱۳ توسط شرکت قدرتمند facebook ساخته شده و به تعبیر وبسایت رسمی react یعنی reactjs.org ری اکت یه کتابخونه جاوااسکریپتی برای ساخت ظاهر و Interface وبسایت ها و اپلیکیشن ها استفاده میشه. البته بحاطر بزرگی و امکانات منحصر به فرد این کتابخونه خیلی از وبسایت ها ایرانی و خارجی بهش فریمورک هم میگن و همیشه با فریمورک های Angular و Vue مقایسه میشه در ادامه دربارش صحبت کنیم چرا به reactjs فریمورک میگن. پس اگه جایی شنیدید که من یا دوستان به ‌react میگیم فریمورک تعجب نکنید چون امکانات React خیلی خیلی فراتر از یه کتابخونه سادس. حالا فاز اصلی react چیه؟ react یه کتابحونه Component base هست. حالا کامپوننت (component) چیه؟ شما در نظر بگیرید که هر سایت یه سری قسمت مختلف داره مثل کل سایت، هدر، فوتر، کامنت و… . هر کدوم از قسمت ها میشه یه کامپوننت. پس ما یه کامپوننت اصلی داریم که خودش از کامپوننت های دیگه تشکیل شده مثل کامپوننت کامنت و خود کامپوننت کامنت از یه سری کامپوننت کوچیک تر به اسم کامنت هر کاربر تشکیل شده است که در ادامه تو ویدئوهای کامل  توضیح دادم با مثال که داستان چیه و اصلا نگران نباشید و گیچ نشید.

چرا React یاد بگیریم؟

کتابخونه React  یکی از سه کتابخونه و فریمورک معروف جاوااسکریپت برای front-end محسوب میشه، یعنی از بین React و Vue و Angular در حال حاضر بیشترین محبوبیت جهانی و بهترین بازارکار در ایران رو داره. و برای اثباتش کافیه یکی از وبسایت های استخدامی برنامه نویسی رو باز کنید و کلمه React رو سرچ کنید، میبینید که ماهانه بیشتر از ۳۰۰ آگهی فعال داره که این تعداد آگهی فعال حتی از زبان های برنامه نویسی دیگه هم بیشتره که واقعا یه مزیت محسوب میشه برای جاوااسکریپت.

در واقع یکی از کتابخونه های جاوااسکریپت ۳۰۰ تا آگهی شغلی فعال داره که حالا بقیه فریمورک ها و تکنولوژی های جاوااسکریپتی رو در نظر بگیرید بیشتر از ۱۰۰۰ موقعیت شغلی فعال داره. یعنی شما با یادگیری یک زبان جاوااسکریپت متونید این همه آپشن و انتخاب داشته باشید. یعنی یه صندلی تو هر شرکتی و هر پروژه ای منتظر شماست! در ادامه تعداد آگهی های کلی جاوااسکریپت رو براتون میذارم که مربوط به دی ماه ۱۴۰۰ میشه.

درآمد و رنج حقوقی برنامه نویسان React

درحال حاضر React پرطرفدارترین و پردرآمد ترین کتابخونه و فریمورک برنامه نویسی وب محسوب میشه که بازه حقوقی از ۵ میلیون تا ۵۰ میلیون تومان را در حال حاضر داره که البته این مبلغ برای حقوق کارمندی هست که اگه شما تبدیل به یک فریلنسر حرفه ای شوید به عدد خیلی بالاتر از این مبالغ میرسید. که برای مثال چند آگهی تصادفی در دی ماه ۱۴۰۰ برای کتابخونه ری اکت میذارم. این حقوق هارو نسبت به وزارت کار مقایسه کنید و میبینید که مبالغ جذابی میشه به نسبت حقوق کارمندی!

مزیت اصلی Reactjs

به نظر مزیت اصلی و جالب React که سبب محبوبیتش شده ساخت وبسایت های Single Page Application یا SPA هست. یعنی چی؟ به زبان ساده بگم React برای ما DOM مجازی میسازه و برای تغییر صفحات و المان های صفحه فقط View مد نظر و عوض میکنه و دیگه کل سایت از اول Render نمیشه و فقط کامپوننت مورد نظر تغییر میکنه. برای درک بهتر این موضوع میتونید به سایت رسمی Reactjs.org مراجعه کنید. میبینید که با کلیک روی هر منو بدون اینکه صفحه Reload بشه، فقط اون قسمت ها که لازم باشه تغییر میکنه و قسمت های دیگه مثل هدر سایت یا ساید بار تغییر نمیکنه و همین قضیه باعث میشه سرعت سایت ما به شدت افزایش پیدا کنه. برای مثال ایرانیش هم میتونید به سایت divar.ir مراجعه کنید که میبینید بعد از کلیک روی هر آگهی بدون اینکه صفحه  و رفرش بشه و شما منتظر لود شدن سایت بشید، به سرعت آگهی مدنظر به شما نمایش داده میشه و خبری از لود شدن صفحه نیست.

به بهشت React خوش آمدید!

چرا باید فریمورک یا کتابخونه یاد بگیریم؟

از موقعی که با css آشنا شدید قطعا اسم bootstrap به گوشتون خورده و تو همه آگهی های استخدام front-end شما میبینید باید یه کتابخونه مثل bootstrap بلد باشید. خب ممکنه بگید من همون ویژگی های bootstrap رو با css pure پیاده سازی میکنیم. اما وقتی با کتابخونه کار میکنید اول از همه سرعت کدنویسی شما جند برابر میشه و نیازی به نوشتن کلاس های اولیه نیست و نکته مهم تر کدهای شما طبق معماری کتابحونه توسعه داده میشه و نفر بعد شما یا در تیم شما کامل از کدها و کلاس های شما سر در میاره و نباید بشینه دونه دونه کلاس های شمارو بخونه و همین دلیل باعث میشه شرکت ها اصرار به کار روی کتابخونه ها دارن. React هم دقیقا همینه و در ۸۰ درصد آگهی های استخدامی javascript در شرکت ها و تیم ها میبینید که شما باید از کتابخونه ای مثل React بلد باشید. پس برای استخدام به عنوان برنامه نویس جاوااسکریپت باید React یاد بگیرید!

مباحث گفته شده در دوره هیولای Reactjs

در این دوره از صفر و مقدمات و نصب React شروع میکنیم تا مباحث پیشرفته و ۴ پروژه عملی و کاربردی و بازارکار محور. در ادامه مواردی که در این دوره پروژه محور Reactjs با موارد زیر آشنا میشیم. (ترتیب لحاظ نشده)

مرور اجمالی پیشنیازها (جاوااسکریپت)

• Objects
• This keyword
• Arrow Functions
• Exports and Imports
• Understanding Classes
• Destructuring
• The Spread & Rest Operator
• Modules

سرفصل های مقدماتی (Fundamental)

• Create React app
• Function Components
• Class Components
• JSX
• Props
• State
• Filtering State
• Attributes
• useState and useEffect Hooks
• Conditional Rendering
• Lists and Keys
• Building Simple Forms
• Composition and Inheritance
• React and ReactDOM

سرفصل های پیش رفته (Advanced)

درخواست های HTTP

• GET Request
• async / await
• Handling Loading & Data States
• Sending a POST Request

هوک ها (Hooks)

• Custom Hooks
• Building a Custom Http Hook

مدیریت State

• How Redux Works
• Redux vs React Context
• Redux Concepts
• Using Redux Data
• Selectors in Redux
• mapDispatchToProps

مسیرها (Routing)

• React Router
• Redirecting
• Switch
• Link
• Adding Routes

استایل دهی

• Dynamic Inline Styles
• CSS Classes Dynamically
• Styled Components
• Dynamic Props
• Dynamic Styles

فرم ها

• Refs
• Errors
• Joi
• Dealing With Form
• Basic Validation
• Custom Input