دوره آموزش React JS

مدرس: فربد دیلمی

React چیست؟

یکی از اتفاقات خوبی که در سال ۲۰۱۳ رخ داد، open source شدن یک library بود. شاید در ابتدا فکر اینکه تنها یک library توانایی ایجاد تغییری بزرگ داشته باشد سخت بود. احتمالا قدرت فیسبوک را دست‌کم می‌گرفتیم!

کتابخانه‌ای که برای رفع نیازهای داخلی شرکت طراحی شده بود، اکنون به صورت open source در دسترس بود. همین کافی بود تا تنها در کمتر از چند سال React را نقل مباحث مربوط به Front-End کند. در حال حاضر برای ساخت اپلیکیشن‌های وب و حتی موبایل (و دسکتاپ) در بین گزینه‌های اولی که داریم، اسم React را می‌بینیم. (قدم بزرگی برای یک library به حساب می‌آید!)

reactjs role

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

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

چرا React؟

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

براساس این الگو کتابخانه‌ها و فریمورک‌های زیادی ساخته شدند که قدرت زیادی هم دارند. ولی React وارد شد تا این الگو را تغییر دهد => منطق برنامه رو مشخص کن، هرجایی نیاز داشتی توی صفحه اطلاعات نشون بده.
بر اساس این الگو به طور کامل جاوااسکریپت داریم و هر وقت خواستیم html به صفحه اضافه می‌کنیم. این کار راه را برای بهتر شدن ساختار برنامه باز می‌کند همچنین performance صفحات را به طرز قابل توجهی بالا می‌برد.

why react

React برای اینکه از این پتانسیل ایجاد شده برای ساختار بهتر برنامه استفاده کند، به طور کامل براساس کامپوننت شکل گرفت. یعنی برای هر بخش از صفحه یک کامپوننت میسازیم و استفاده می‌کنیم. مثلا می‌توانیم برای Header, Footer, Card, Notification و هر قسمت دیگری که نیاز داریم یک کامپوننت مجزا بسازیم. کامپوننت بندی صفحه کمک می‌کند که برنامه را از پیچیده شدن نجات دهیم.

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

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

بازار کار React

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

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

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

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

در ادامه سرفصل‌های کلی دوره که ۱۱ مورد هستند را می‌بینید:

۰۱ - آشنایی
۰۲ - نصب ابزارهای مورد نیاز
۰۳ - شروع کار با React
۰۴ - کامپوننت‌ها
۰۵ - ساختار دایرکتوری
۰۶ - state و props
۰۷ - بررسی lifeCycle کامپوننت
۰۸ - کار با درخواست‌های HTTP
۰۹ - دسترسی مستقیم به المنت (با استفاده از Ref)
۱۰ - جابجایی بین صفحات (Navigation)
۱۱ - استفاده از Webpack

** هر کدام از این فصل‌ها شامل چندین اپیزود می‌باشند.

پیش‌نیازهای دوره

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

پیش‌نیازها:

  • جاوااسکریپت (سطح پایه): React کتابخانه‌ای برای جاوااسکریپت است. برای استفاده از آن نیاز داریم تا سینتکس جاوااسکریپت را بلد باشیم.
  • جاوااسکریپت (سطح متوسط): React برای استفاده‌ی بهتر از جاوااسکریپت خلق شد؛ به همین خاطر نیاز داریم تا اول بعضی از چالش‌های استفاده از جاوااسکریپت را حس کنیم و بعد به دنبال راه‌حل آن‌ها در React بگردیم.
  • (+2015) EcmaScript: ویژگی‌های جدیدی که به جاوااسکریپت می‌آیند، در قالب اسم EcmaScript شناخته می‌شوند. EcmaScript کار را ساده‌تر می‌کند و قدرت بیشتری هم به ما می‌دهد. در بعضی موارد performance بیشتری هم دارد. نوشتن کد React بدون استفاده از EcmaScript پیچیده‌تر و سخت‌تر می‌شود. (دوره‌ی رایگان EcmaScript2015 یا همان ES6 در آرکادمی را می‌توانید از آرکادمی مشاهده‌ کنید.)

آشنایی با ES6

موارد کمکی:

  • Webpack: کدهایی که می‌نویسیم و فایل‌هایی که استفاده می‌کنیم معمولا نیاز دارند قبل از اجرای برنامه تغییراتی داشته باشند. برای مثال، نیاز داریم تا کدهایی که می‌نویسیم طبق استاندارد قدیمی‌تر باشند تا در بیشتر مرورگرها به طور صحیح قابل اجرا باشند. با استفاده از ابزارهایی مثل Webpack به جای استفاده از استاندارد قدیمی می‌توانیم از استاندارد جدید استفاده کنیم و در نهایت تبدیل استاندارد جدید به قدیمی را به این ابزار بسپاریم. موارد استفاده از این سبک ابزار خیلی زیاد است و برنامه‌نویسی وب را از همیشه راحت‌تر کرده‌اند. (برای بررسی بعضی از موارد استفاده از Webpack میتوانید این دوره در آرکادمی را مشاهده کنید.) البته React به طور پیش‌فرض ابزاری برای انجام این کار دارد ولی برای آزادی عمل بیشتر و انجام کارهای تخصصی‌تر می‌توانید با استفاده از Webpack ابزار خودتان را ایجاد کنید.

توانایی شما پس از گذراندن این دوره

بعد از دیدن ویدیو‌‌هایی که در این ۱۱ فصل برای شما تدارک دیدیم:

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

کلیدواژه: جاوااسکریپت javascript react reactjs ری‌اکت

لیست قسمت های این دوره:
play_circle_filled
۰۰
معرفی
رایگان
play_circle_filled
۰۱۰۱
نگاه کلی به یک نمونه اپلیکیشن آماده‌ی React
رایگان
play_circle_filled
۰۱۰۲
نحوه استفاده از فایل‌های مربوط به این دوره
رایگان
play_circle_filled
۰۲۰۱
نصب node js
رایگان
play_circle_filled
۰۲۰۲
نگاهی کوتاه به npm
رایگان
play_circle_filled
۰۲۰۳
استفاده از create-react-app برای ساخت اپلیکیشن react
رایگان
play_circle_filled
۰۲۰۴
نگاهی کوتاه به npx
رایگان
play_circle_filled
۰۳۰۱
ساخت اولین صفحه با react
lock ویژه مشترکین
play_circle_filled
۰۳۰۲
فایل index.js چه کاری انجام می‌دهد ؟
lock ویژه مشترکین
play_circle_filled
۰۳۰۳
آشنایی با JSX - قسمت اول
lock ویژه مشترکین
play_circle_filled
۰۳۰۴
آشنایی با JSX - قسمت دوم
lock ویژه مشترکین
play_circle_filled
۰۳۰۵
استفاده از فایل‌های CSS در React
lock ویژه مشترکین
play_circle_filled
۰۳۰۶
استفاده از Style به صورت inline
lock ویژه مشترکین
play_circle_filled
۰۴۰۱
ساخت اولین کامپوننت React
lock ویژه مشترکین
play_circle_filled
۰۴۰۲
ساختن کاپوننتی به اسم Card
lock ویژه مشترکین
play_circle_filled
۰۴۰۳
جدا کردن فایل style کامپوننت ها
lock ویژه مشترکین
play_circle_filled
۰۴۰۴
تبدیل کامپوننت functional به class-based
lock ویژه مشترکین
play_circle_filled
۰۴۰۵
ایجاد مجموعه‌ای از کامپوننت‌ها از روی آرایه
lock ویژه مشترکین
play_circle_filled
۰۴۰۶
اضافه کردن key به کامپوننت‌ها هنگام استفاده به صورت آرایه
lock ویژه مشترکین
play_circle_filled
۰۴۰۷
درست کردن کامپوننت برای loading
lock ویژه مشترکین
play_circle_filled
۰۵۰۱
نگاه کلی به ساختار دایرکتوری پروژه React
lock ویژه مشترکین
play_circle_filled
۰۵۰۲
شروع ایجاد ساختار مناسب برای اپلیکیشن React
lock ویژه مشترکین
play_circle_filled
۰۵۰۳
تغییر نحوه‌ی import کردن فایل‌ها برای هماهنگی با ساختار برنامه
lock ویژه مشترکین
play_circle_filled
۰۶۰۱
کنترل کردن کامپوننت به‌وسیله‌ی State
lock ویژه مشترکین
play_circle_filled
۰۶۰۲
نحوه‌ی آپدیت کردن State
lock ویژه مشترکین
play_circle_filled
۰۶۰۳
محل نگهداری State
lock ویژه مشترکین
play_circle_filled
۰۶۰۴
مقایسه‌ی State و Props
lock ویژه مشترکین
play_circle_filled
۰۶۰۵
تعریف props برای کامپوننت
lock ویژه مشترکین
play_circle_filled
۰۶۰۶
کنترل input با استفاده از State
lock ویژه مشترکین
play_circle_filled
۰۶۰۷
ارسال State به کامپوننت‌های فرزند به شکل Props
lock ویژه مشترکین
play_circle_filled
۰۶۰۸
استفاده از propsی به اسم children
lock ویژه مشترکین
play_circle_filled
۰۶۰۹
استفاده از Hook
رایگان
play_circle_filled
۰۷۰۱
دکمه‌ی load more برای لیست
lock ویژه مشترکین
play_circle_filled
۰۷۰۲
متدهای lifecycle
lock ویژه مشترکین
play_circle_filled
۰۷۰۳
متد shouldComponentUpdate
lock ویژه مشترکین
play_circle_filled
۰۷۰۴
کجای برنامه event listener ها رو قرار بدیم ؟
lock ویژه مشترکین
play_circle_filled
۰۸۰۱
ساختار http request
lock ویژه مشترکین
play_circle_filled
۰۸۰۲
ارسال درخواست http با استفاده از کتابخانه‌ی axios
lock ویژه مشترکین
play_circle_filled
۰۸۰۳
استفاده از async/await در axios
lock ویژه مشترکین
play_circle_filled
۰۸۰۴
ساخت ماژول برای استفاده‌ی بهتر از axios
lock ویژه مشترکین
play_circle_filled
۰۹۰۱
دسترسی مستقیم به فرزندان یک کامپوننت
lock ویژه مشترکین
play_circle_filled
۰۹۰۲
استفاده از ref برای دسترسی به DOM
lock ویژه مشترکین
play_circle_filled
۰۹۰۳
نگاه عمیق‌تر به refهای مربوط به DOM
lock ویژه مشترکین
play_circle_filled
۰۹۰۴
استفاده از ref برای دسترسی به کامپوننت
lock ویژه مشترکین
play_circle_filled
۰۹۰۵
استفاده از متدهای کامپوننت فرزند
lock ویژه مشترکین
play_circle_filled
۰۹۰۶
چه زمانی ref مقداردهی می‌شود
lock ویژه مشترکین
play_circle_filled
۱۰۰۱
ساختن کامپوننت(صفحه) Blog
lock ویژه مشترکین
play_circle_filled
۱۰۰۲
ساخت صفحه‌های About و Home
lock ویژه مشترکین
play_circle_filled
۱۰۰۳
ساخت کامپوننت Router
lock ویژه مشترکین
play_circle_filled
۱۰۰۴
نمایش صفحه‌ها براساس URL
lock ویژه مشترکین
play_circle_filled
۱۰۰۵
استفاده از کتابخانه‌ی react-router-dom
lock ویژه مشترکین
play_circle_filled
۱۰۰۶
مقایسه‌ی کوتاه routing سمت سرور با کلاینت
lock ویژه مشترکین
play_circle_filled
۱۱۰۱
چرا Webpack ؟
lock ویژه مشترکین
play_circle_filled
۱۱۰۲
استفاده از Webpack - قسمت اول
lock ویژه مشترکین
play_circle_filled
۱۱۰۳
استفاده از Webpack - قسمت دوم
lock ویژه مشترکین
play_circle_filled
۱۱۰۴
استفاده از Webpack - قسمت سوم
lock ویژه مشترکین
دیدگاه ها:
۱ ماه قبل
reply
سلام من از سر فصل هایی که انتخاب کردی خوشم اومد ولی حتما میدونید که خیلی ناقصه چیزهای اساسی متل context و redux (هردو ) و HOC و ... نیاوردی شاید مصلحت دونستی ولی اگه ادامه داشته باشه و یک پروژه درست و حسابی مثل یک سایت کامل همراهش باشه عالی خواهد بود
۱ ماه قبل در پاسخ به a_bahoush
reply
سلام

آره توی ورژن‌های جدید react یه سری قابلیت خیلی خوب داریم.
برای اینکه توی این دوره صحبتی ازشون نکردم دو تا دلیل داشتم:
- یک اینکه قابلیت‌های جدیدی که اومدن، اکثرشون ساختاری که وجود داره رو اصلاح میکنن و تمیزترش میکنن. به نظرم برای استفاده ازشون باید اول ساختار پایه رو بلد باشیم تا بعدش توانایی این رو داشته باشیم که به طور صحیح ازشون استفاده کنیم.
- دوم اینکه این قابلیت‌ها هنوز جای کار دارن و باید فرصت بدیم تا جاشون رو توی ساختار برنامه‌های react پیدا کنن. (همچنین یه سری از best practiceهاشون هم در دسترس باشن)
- البته یه سری دلایل کوچکتر دیگه‌ای هم وجود داشت.

در مجموع تصمیم این شد که
۱- اول react رو به صورت یه مقدار پایه‌ای تر بررسی کنیم. (همین دوره)
۲- بعد سراغ redux بریم.
۳- بعد از این که این دوتا دوره رو تموم کردیم فرصت خوبیه که مفاهیم یه مقدار پیچیده‌تر react رو بررسی کنیم.
۴- تا زمانی که این دوره‌ها آماده بشن به احتمال خیلی زیاد مفاهیمی مثل context و hook چیزایی مثل اینا جا افتادن و میشه روش درست استفاده از هرکدوم رو توضیح داد؛ و فرصت مناسبیه واسه اینکه دوره‌ی react پایه‌ای رو با این مفاهیم آپدیت کنیم.

ممنون از همراهیتون.
اگر پیشنهاد دیگه‌ای هم دارین خوشحال میشیم باهامون در میون بذارین.
ارسال دیدگاه:
برای ارسال دیگاه باید به سیستم وارد شوید و یا ثبت نام کنید. ثبت نام چند لحظه بیشتر زمان شما را نمیگیرد.