دوره فریمورک ری اکت React برای طراحان

عنوان دوره : React for Designers by Design+Code

سطح : تمامی سطوح

زمان کل دوره : 6 ساعت

تعداد فایل های تصویری : 12

سال آموزش : 2020

فایل تمرینی : –

مربی دوره : –

نرم افزار : –

زیرنویس انگلیسی : ندارد

React for Designers by Design+Code

React is component-based, similar to how you use Components in Figma in order to reuse the elements in powerful ways. This in turn allows for better collaboration between teammates. With this course, you’ll learn how to build and animate your site from scratch. Create highly customizable components for your design system. A 6-hour course for designers, by designers.

Create your design components in React
Knowing how to code deeply influences the way I design.
So much time can be wasted when you don’t know your
constraints or your powers. – Meng To

Bridge the design tool and React
Design, code and collaborate using reusable components and design patterns in a structured and manageable way. This is quite similar to when we design in Figma. Components, Constraints and Data work the same way.

Don’t be afraid of React. You already have the same mindset as a developer.

Designing in Figma and coding in React is pretty much the same, right? And this is just one of the cool things about React! As long as you’re using the component-based design methodology, then React is suitable for you!

Build an entire site using
React in a day
React is a powerful JavaScript library ideal for building interactive, data-driven user interfaces. It’s used by some of the most successful brands in the world, including Facebook, Netflix and Airbnb.

Your design is just the beginning
The journey to learning React starts with building something. Learn by doing. This course is not about theory or complex functions. It’s about implementing your own design, creating cool interactions and animations with CSS and Grid, creating components that are reusable and powerful and use dynamic data to feed your app. You’ll even learn about payments!

1. React for Designers

Learn to design and code a Website using React

2. Basic Styling with CSS

Creating your first design using basic HTML and CSS

3. Adaptive Layouts with CSS Grid

Design a page that adapts to any screen size

4. Interactions and Animations

Timeline-based animation using keyframes

5. SVG Animation

Morph vector shapes using SVG code

6. Components and Props

Create a reusable layout element using React

7. States and Events

Add scroll interactions to your React site

8. Styled Components

Take your CSS to the next level

9. Static Data with JSON

Add basic data to your app

10. GraphQL with Contentful

Adding dynamic data that can be updated outside of the site

11. Publish to Netlify

Deploy your site for everyone to see

12. Payments with Stripe

Start selling your product easily and efficiently