دوره آموزشی React برای طراحان وب

جزئیات دوره

لازم نیست با React از صفر شروع کنید. این چارچوب جاوا اسکریپت فوق‌العاده محبوب می‌تواند وب‌سایت‌ها و برنامه‌های موجود شما را حتی با هزینه بسیار کمی بهتر کند. در این دوره، روش های عملی برای گنجاندن React در طراحی های وب دنیای واقعی را بیاموزید. مربی جو چلمن سه پروژه کوچک را معرفی می کند که از React سود می برند: یک مدیر محصول که وضعیت، وسایل و رویدادهای React را به نمایش می گذارد. یک فهرست کارمند؛ و یک تابلوی وضعیت که از React برای برقراری تماس های API خارجی استفاده می کند. هر پروژه نشان می دهد که چه چیزی React را برای طراحان وب جالب و مفید می کند و راه حل هایی برای مقابله با چند چالش منحصر به فرد ارائه می دهد.

اهداف یادگیری
نصب React در سایت موجود
تفکر در مورد یک طرح از نظر اجزاء
ایجاد مولفه‌های عملکردی با ویژگی‌های کامل با استفاده از Hooks
ذخیره و بازیابی داده ها از یک RESTful API خارجی
استفاده از اجزای شخص ثالث برای انیمیشن CSS
استفاده از رندر شرطی

سرفصل ها

0. مقدمه

01 - React را به جعبه ابزار طراح وب خود اضافه کنید
02 - آنچه باید بدانید
03 - استفاده از فایل های تمرین

1. معرفی React

04 - React چیست و برای چه مفید است
05 - جعبه ابزار React - ES6، JSX و موارد دیگر
06 - مفاهیم و اصطلاحات تخصصی واکنش نشان دهید
07 - همه چیز اجزا و عناصر است
08 - فرآیند ساخت React ما
09 - React و CSS - یک رابطه خاص
10 - نصب React Developer Tools

2. پروژه اول - سفارشی ساز

11 - نصب React در سایت موجود
12 - شناسایی اجزا و داده های خود
13 - اولین جزء ساده را تنظیم کنید
14 - با کمک Babel شروع به استفاده از JSX کنید
15 - ضمیمه منبع داده
16 - یک جزء جدید با داده های آرایه ایجاد کنید
17 - لوازم را اجرا کنید
18 - با قلاب useState حالت را پیاده سازی کنید
19 - جزء انتخابگر رنگ را اضافه کنید
20 - گزینه ها را تغییر دهید، واکنش ها را ببینید
21 - چالش - انتخابگر رنگ را فعال کنید
22 - راه حل

3. پروژه دوم - مرورگر دایرکتوری

23 - از ماکت استفاده کنید، برنامه ریزی کنید
24 - اجزای اولیه داربست
25 - اجزای عملکردی
26 - فرم فیلترها را بسازید
27 - Forms in React - کنترل شده یا نه
28 - فرم فیلترها را سیم کشی کنید
29 - به به روز رسانی فرم های فیلتر پاسخ دهید
30 - متحرک سازی با ReactTransitionGroup
31 - چالش - قابلیت استفاده و انیمیشن بهتر
32 - راه حل - قابلیت استفاده و انیمیشن بهتر

4. پروژه سوم - به روز رسانی وضعیت

33 - از داده های زنده از یک API RESTful استفاده کنید
34 - کد شروع React خود را بررسی کنید
35 - اولین تماس API با قلاب useEffect
36 - استفاده از رندر شرطی
37 - فیلدهای فرم را تحت کنترل درآورید
38 - اجازه دهید فرم به API ارسال شود
39 - حالت بلند شدن برای مشاهده داده ها
40 - تکمیل به روز رسانی وضعیت

نتیجه

41 - مراحل بعدی - React، React Native و JS

دوره آموزشی React برای طراحان وب

مدرسین

Joe Chellman