Autoplay
Autocomplete
Previous Lesson
Complete and Continue
React 101 For Designers
1. Getting Started
1.1 Welcome (1:34)
1.2 What is React?
1.3 Components, Props and State (9:46)
1.4 React Components And Sketch Symbols (3:15)
1.5 Coding Exercises (4:16)
2. Creating Your First Component
2.1 The House Component (8:06)
2.2 JS Primer: ES6 Constants (3:57)
2.3 JS Primer: Arrow Functions (7:07)
2.4 JSX (7:05)
2.5 Magic (4:35)
2.6 JS Primer: Expressions (5:31)
2.7 Placeholders in JSX (3:53)
2.8 Rendering A List (10:28)
2.9 Conditional Rendering (6:26)
2.10 Fragments (9:19)
3. Styling Components
3.1 JS Primer: Import and Export (10:26)
3.2 Import project resources (2:55)
3.3 Style components with CSS (4:41)
3.4 Inline Style (5:35)
3.5 CSS-in-JS (5:28)
3.6 styled-components (7:07)
4. Making Components Interactive
4.1 Blue Roof, Red Roof - Props (6:27)
4.2 Props and styled-components (5:17)
4.3 React Developer Tools (1:24)
4.4 JS Primer: ES6 Class (12:51)
4.5 State and class components (9:51)
4.6 Open Sesame! - setState (7:42)
4.7 setState - how it works (4:48)
4.8 Sleepy cat - Props and State Re-explained (7:45)
4.9 Sleepy cat 2 (6:18)
4.10 React Hooks - useState (8:54)
5. Animations
5.1 Ninja cat - CSS Transitions (4:41)
5.2 Ninja cat - react-motion (12:39)
5.3 Many cats - CSS Transition Group (9:23)
6. Putting All Together: Course Project
6.1 Environment Setup for Course Project (4:57)
6.2 create-react-app: Create a React Project From Scratch (6:02)
6.3 Intro to Course Project (3:42)
6.4 Project Hint 1- Where To Start? (4:04)
6.5 Project Hint 2- How To Break UI Into Components? (13:32)
6.6 Project Hint 3 - How to add icons?
1.4 React Components And Sketch Symbols
Download
Complete and Continue