React 101
Learn React from the beginning. Style components yourself!
Enroll Now
The closer a designer is to the actual customer experience the better. The learnreact.design videos are the perfect intro for designers looking to get a better understanding of React.






table of contents
Getting Started
- Welcome
- What is React?
- Components, Props and State
- React Components And Sketch Symbols
- Coding Exercises
Creating Your First Component
- The House Component
- JS Premier: ES6 Constants
- JS Premier: Arrow Functions
- JSX
- Magic
- JS Premier: Expressions
- Placeholders in JSX
- Rendering A List
- Conditional Rendering
- Fragments
Styling Components
- JS Premier: Import / Export
- JS Premier: Import Project Resources
- Style Components with CSS
- Inline Styles
- CSS-in-JS
- styled-components
Making Components Interactive
- Blue Roof, Red Roof - Props
- Props and styled-components
- React Developer Tool
- JS Premier: ES6 Class
- State and Class Components
- Open Sesame! - setState
- setState - How does it work?
- Sleepy cat - Props and State Re-explained
- Sleepy cat 2
- React Hooks - useState
Animations
- Ninja cat - CSS transitions
- Ninja cat - react-motion
- Many Ninja cats - CSSTransitionGroup
Putting All Together: Course Project
- create-react-app: Create a React project from scratch
- Intro to Course Project