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

React for Web Designers

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: نیازی نیست که از ابتدا با React شروع کنید. این چارچوب فوق العاده محبوب جاوا اسکریپت می تواند وب سایت ها و برنامه های موجود شما را با سربار کم بسیار بهتر کند. در این دوره ، روشهای عملی برای ترکیب React در طراحی وب واقعی را بیاموزید. جو چلمن ، مربی ، سه پروژه کوچک را معرفی می کند که از React سود می برند: یک مدیر محصول که وضعیت React ، لوازم و رویدادها را به نمایش می گذارد. فهرست کارمندان و یک صفحه وضعیت که از React برای برقراری تماسهای API خارجی استفاده می کند. هر پروژه نشان می دهد که چه چیزی React را برای طراحان وب جالب و مفید می کند و راه حل هایی برای مقابله با چند چالش منحصر به فرد ارائه می دهد.
موضوعات شامل:
  • نصب React در سایت موجود
  • تفکر در مورد یک طرح از نظر ملفه ها
  • ایجاد اجزای عملکرد کاملاً برجسته با استفاده از Hooks
  • ذخیره و بازیابی داده ها از یک API خارجی RESTful
  • به کارگیری م componentsلفه های شخص ثالث برای انیمیشن CSS
  • استفاده از ارائه مشروط

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

مقدمه Introduction

  • React را به جعبه ابزار طراح وب خود اضافه کنید Add React to your web designer toolbox

  • آنچه باید بدانید What you should know

  • با استفاده از پرونده های تمرینی Using the exercise files

1. معرفی واکنش 1. Introducing React

  • React چیست و چه چیزی برای آن مفید است؟ What is React and what is it good for?

  • جعبه ابزار React: ES6 ، JSX و موارد دیگر React Toolbox: ES6, JSX, and more

  • واکنش به مفاهیم و ژارگون React concepts and jargon

  • همه چیز مؤلفه ها و عناصر است Everything is components and elements

  • روند ساخت واکنش ما Our React build process

  • React and CSS: یک رابطه خاص React and CSS: A special relationship

  • نصب ابزارهای React Developer Installing React Developer Tools

2. پروژه اول: Customizer 2. First Project: Customizer

  • نصب React در یک سایت موجود Installing React on an existing site

  • شناسایی مؤلفه ها و داده های خود Identifying your components and data

  • اولین مؤلفه ساده را تنظیم کنید Set up first simple component

  • استفاده از JSX را با کمک بابل شروع کنید Start using JSX with the help of Babel

  • اتصال به یک منبع داده Attaching a data source

  • یک جزء جدید با داده های آرایه ایجاد کنید Create a new component with array data

  • پیاده سازیها را اجرا کنید Implement props

  • دولت را با قلاب UseState پیاده سازی کنید Implement state with the useState hook

  • مؤلفه انتخاب رنگ را اضافه کنید Add the color selector component

  • گزینه ها را تغییر دهید ، واکنش ها را ببینید Change options, see reactions

  • چالش: انتخاب رنگ را فعال کنید Challenge: Activate the color selector

  • راه حل Solution

3. پروژه دوم: مرورگر دایرکتوری 3. Second Project: Directory Browser

  • از مدل استفاده کنید ، یک برنامه ریزی کنید Use the mockup, make a plan

  • اجزای اولیه داربست Scaffold initial components

  • اجزای عملکردی Functional components

  • فرم فیلترها را بسازید Build the filters form

  • اشکال در React: کنترل شده یا نه Forms in React: Controlled or not

  • فرم فیلترها را سیم کنید Wire up the filters form

  • به بروزرسانی فرم فرم پاسخ دهید Respond to filter form updates

  • متحرک سازی با ReactTransitionGroup Animating with ReactTransitionGroup

  • چالش: قابلیت استفاده بهتر و انیمیشن Challenge: Better usability and animation

  • راه حل: قابلیت استفاده بهتر و انیمیشن Solution: Better usability and animation

4. پروژه سوم: بروزرسانی وضعیت 4. Third Project: Status Updater

  • از داده های زنده از یک API RESTful استفاده کنید Use live data from a RESTful API

  • در حال بررسی کد شروع واکنش خود Inspecting your starting React code

  • اولین تماس API با قلاب UseEffect First API call with useEffect hook

  • با استفاده از رندر مشروط Using conditional rendering

  • زمینه های فرم را کنترل کنید Bring form fields under control

  • اجازه دهید فرم را به API ارسال کنید Let form post to the API

  • حالت بلند کردن برای مشاهده داده ها Lifting state for data visibility

  • تکمیل بروزرسانی وضعیت Completing the status updater

نتیجه Conclusion

  • مراحل بعدی: React ، React Native و JS Next steps: React, React Native, and JS

نمایش نظرات

آموزش برای طراحان وب واکنش نشان دهید
جزییات دوره
2h 52m
41
Linkedin (لینکدین) Linkedin (لینکدین)
(آخرین آپدیت)
42,433
- از 5
ندارد
دارد
دارد
Joe Chellman
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Joe Chellman Joe Chellman

طراح وب، نویسنده، مربی جو Chellman یک طراح وب، نویسنده و مربی در موضوعاتی مانند وردپرس، جاوا اسکریپت و جی کوئری است.

او یک طراح وب در اواخر دهه 90 است: یک متخصص فناوری که قادر به انجام همه ی وب سایت است نیاز به زندگی دارد از آنجایی که او شروع به بازی کردن با وب کرد، او برای ساخت ده ها تن از وب سایت ها برای هنرمندان، غیر انتفاعی و کسب و کارهای کوچک، به طور مستقل و همکاری با سایر سازمان های اطراف ایالات متحده و گاهی اوقات در سراسر جهان، تلاش کرده است. او در کنفرانس ها، ملاقات ها و کارگاه های آموزشی در سراسر زادگاه فعلی خود از لس آنجلس، در موضوعاتی مانند وردپرس، دروپال، جاوا اسکریپت، جی کوئری و غیره صحبت می کند. او می توانید در React.js Developer Web Web Design Web Development Web Foundations توسعه دهنده وب طراحی وب توسعه وب بنیادهای وب