React 101

Learn React from the beginning. Style components yourself!

Enroll Now

React 101
3.5 hours, 31 lessons
$99
$49
Joshua Ulm
Group Vice President of Design, Oracle
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

  • 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