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

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

مقدمه 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