React 101 For Designers

Learn React from the beginning. Style components yourself!

Or buy now if you are already convinced!
Good pace, lots of examples and layman explanations helped me finally understand React. Thank you Linton!
Aida Paul
Product Designer
πŸ‘‰ More testimonials


  1. Getting Started
    • Welcome
    • What is React?
    • Components, Props and State
    • Environment Setup
  2. Creating Your First Component
    • The House Component
    • JS Premier: ES6 Constants
    • JS Premier: Arrow Functions
    • JSX
    • Magic
    • JS Premier: Expressions
    • Placeholders in JSX
  3. Styling Components
    • JS Premier: Import / Export
    • JS Premier: Import Project Resources
    • Style Components with CSS
    • Inline Styles
    • CSS-in-JS
    • styled-components
  4. 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
  5. Animations
    • Ninja cat - CSS transitions
    • Ninja cat - react-motion
    • Many Ninja cats - CSSTransitionGroup
  6. Putting All Together: Course Project
    • create-react-app: Create a React project from scratch
    • Intro to Course Project


This course is great at explaining React concepts with visuals.
Patrick Multani
Product Designer
πŸ‘‰ More testimonials


Why should a designer learn coding?

I encourage you to check out this post to hear other designers’ opinions.

Learning to code will help you become better at design. Armed with a better understanding of how things work, you will find the communication with developers much more efficient. Your design ideas would be more convincing and more respected. You can even design with code.

New skills you learn will open new doors. Trust me, it will be a new world of creativity!

What are the prerequisites of the course?

This course requires knowledge of JavaScript. If you are new to programming, check out Framer X + React and this page.

What if I am not satisfied?

If you are not completely satisfied with the courses, you can get 100% refund within 30 days of your purchase. No hard feelings!

I have other questions!

Feel free to email me, or tweet at me, anytime!
Hi! I'm Linton!

Super excited to create these courses to help you become a better designer!

I'm a full-stack developer who's learning design. I have 10+ years of experience in mobile, development/design tools and web development. I've been working on React Native since 2015, and building Android apps since 2007 before the first Android phone, HTC G1, was even available. I also contribute to React Navigation project, and write a blog about React.

I love teaching. I've authored a few courses at Treehouse and Lynda. My dark little secret: 😈 creating this course is also my special way to learn all things about design and React -- trying to explain things clearly has taken my understanding of the concepts to a whole new level.

Thrilled to be on this journey with you!

Hey! I'm Beebee!

I'm a designer and animator. I draw inspiration from my dream diaries.

In my dreams, I saw mammoths chasing little bears on a circus. I managed to turn missiles launched from North Korea into splendid firework shows. I convinced the Emperor of Qing Dynasty to stop killing. I chatted with Prince Edwards in Chinese. I was left in awe by the weirdly breathtaking scenes made up of lily pads, lotus, water grass and pale dead fish...

What's in your dreams?

Β© 2018 jimu Labs, Inc.