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.
![](/_next/static/media/facebook.040d07ba3e3b3e3e3b1e92961fb4dc84.png)
![](/_next/static/media/google.5a5f3d4af34d77d145182bb57ee5be62.png)
![](/_next/static/media/amazon.1edc1e9596376faeac6cfa76abb97557.png)
![](/_next/static/media/twitter.80271d0cc1ec1d60a1b71debcd60105f.png)
![](/_next/static/media/uber.0e128187d3570c125607124c3e0d1477.png)
![](/_next/static/media/IDEO.1c7845ade595860c2b2a8f41506ad45d.png)
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