پیشنهاد فرادرس

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

دسته بندی ها: آموزش جاوااسکریپت (Javascript) ، آموزش React.js ، آموزش طراحی وب ، آموزش های لیندا (Lynda)

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

مباحث دوره:

  • جعبه ابزار React
  • نصب ابزارهای توسعه دهنده React
  • استقرار props و states
  • مدیریت رویدادها
  • ساختن فرم ها
  • پاسخ به به روز رسانی های فرم
  • متحرک سازی
  • گنجاندن داده live با REST APIs

سرفصل ها:

  • مقدمه
  • آنچه که باید بدانید
  • استفاده از فایل های تمرینی
  • معرفی React
  • React چیست و برای چه کاری مفید است؟
  • جعبه ابزار React: ES6، JSX و غیره
  • React، داده را مدیریت می کند و نمایش می دهد
  • همه چیز، کامپوننت ها و عناصر هستند
  • روند ساخت React
  • React و CSS: یک رابطه ویژه
  • نصب ابزار های توسعه دهنده React
  • پروژه اول: Customizer
  • نصب React در یک سایت
  • شناسایی کامپوننت ها و داده ی
  • تنظیم اولین کامپوننت ساده
  • شروع به استفاده از JSX با Babel Help
  • ایجاد کامپوننت جدید با داده ی آرایه
  • پیاده سازی props
  • پیاده سازی state
  • افزودن انتخابگر رنگ
  • تغییر گزینه ها و مشاهده ی واکنش ها
  • چالش: فعال سازی انتخابگر رنگ
  • راه حل : فعال سازی انتخابگر رنگ
  • پروژه دوم: مرورگر دایرکتوری
  • ساختن یک طرح
  • کامپوننت های اولیه Scaffold
  • کامپوننت های عملکردی
  • ساخت فرم فیلترها
  • فرم ها در React: کنترل شده یا نشده
  • تکمیل فرم فیلترها
  • پاسخ به روز رسانی فرم فیلتر
  • متحرک سازی با React Transition Group
  • چالش: قابلیت استفاده و انیمیشن بهتر
  • راه حل: قابلیت استفاده و انیمیشن بهتر
  • سومین پروژه: به روز رسان وضعیت
  • گنجاندن داده live از طریق REST APIs
  • اولین تماس API در یک متد چرخه عمر
  • افزودن یک بارگذار با استفاده از رندرکردن شرطی
  • Hook up فرم برای ارسال یک به روز رسانی
  • "Lifting state" برای شفافیت وضعیت
  • تکمیل به روز رسان وضعیت
  • نتایج
  • مراحل بعدی: موارد بیشتر درمورد React
React for Web Designers Publisher:Lynda Author:Joe Chellman Duration:3h 6m Level:Intermediate

Learn how to incorporate React in real-world web designs: to manage real-time data, build forms and animation, and interact with external APIs.
Released: 4/20/2018
You don't have to start from scratch with React. This super popular JavaScript framework can make your existing websites and apps even better, with very little overhead. Learn practical ways to incorporate React in real-world web designs, in this course with Joe Chellman. Joe introduces three small projects that benefit from React: a product manager that showcases React state, props, and events; an employee directory using React forms and animation; and a status board that uses React to make external API calls. Each project demonstrates what makes React most interesting and useful to web designers and provides solutions for dealing with the few unique challenges, such as working without a build tool.
Topics include:
The React Toolbox
Installing React Developer Tools
Creating new components
Implementing props and states
Handling events
Building forms
Responding to form updates
Animating
Incorporating live data with REST APIs
Introduction
Welcome
1m 10s
What you should know
43s
Using the exercise files
1m 2s
1. Introducing React
What is React and what is it good for?
3m 3s
React Toolbox: ES6, JSX, and more
2m 35s
React manages and displays data
3m 9s
Everything is components and elements
2m
Our React build process
47s
React and CSS: A special relationship
1m 58s
Installing React Developer Tools
2m 53s
2. First Project: Customizer
Installing React in an existing site
8m 7s
Identifying our components and data
3m 27s
Set up first simple component
5m 31s
Start using JSX with Babel Help
7m 55s
Create new component with array data
10m 7s
Implement props
4m 28s
Implement states
6m 43s
Add the color selector
3m 39s
Change options, see reactions
10m 22s
Challenge: Activate the color selector
1m 54s
Solution: Activate the color selector
3m 55s
3. Second Project: Directory Browser
Make a plan
6m 9s
Scaffold initial components
5m 58s
Functional components
6m 37s
Build the filters form
5m 41s
Forms in React: Controlled or not
2m 53s
Wire up the filters form
10m 57s
Respond to filter form updates
5m 33s
Animating with ReactTransitionGroup
8m 21s
Challenge: Better usability and animation
3m 7s
Solution: Better usability and animation
4m 55s
4. Third Project: Status Updater
Incorporating live data via REST APIs
4m 40s
Inspecting our starting code
7m
First API call in a lifecycle method
6m 1s
Add a loader using conditional rendering
5m 8s
Hooking up the form to post an update
8m 30s
"Lifting state" for state visibility
3m 31s
Completing the status updater
3m 45s
Conclusion
Next steps: Lots more React
2m 37s

پیشنهاد فرادرس

لینک های دانلود حجم فایل: 577.0MB همراه با زیرنویس انگلیسی Lynda React for Web Designers_git.ir.rar