Learn React
Unleash Your Design Superpowers
Aww! The details! All the details are lost! ☹️ You know how much time I've spent on designing this?
Sometimes I feel like the developers hate me. 😢
Take it easy!
Do you want better collaboration with engineers?
Of course! I don't want to be the really annoying designer asking for tweak after tweak.
I want to be able to go into the script and tweak those details myself.
Do you want to take full control of the experiences you design?
I want to learn React to implement my designs the way I envision them.
I need to learn React so I could create and edit perfect design of components by myself, not asking for devs to “move text label on a button by 2 points higher” for instance.
Looks like you need a React course.
Have you done any coding before?
As a lot of designers these days, I use Sketch to design user interfaces. I have enough HTML/ CSS knowledge. I recently started learning javascript after I learned it's the foundation for react.
React Essentials For Designers is a course tailored for designers just like you!
😃

Just Enough JS

I will cover just enough JavaScript concepts to get you started. If you are not familiar with HTML, CSS or JavaScript, check out this page.

Focused On UI

We'll spend a lot of time on learning layouts, styles, animations, design tools and process etc.

Illustrated Explanations

As much as possible, I'll use simple English and illustrations to introduce new concepts and terms.
I read so many articles about ReactJS, but yours is very understandable because of your simple language.

- Masood Sadri, Product Designer

WHAT YOU WILL BUILD

Current Time 0:00
/
Duration Time 0:00
Progress: NaN%

HD Video Tutorials

Practical Course Projects

Private Slack Channel

COURSE MODULES

Four course modules teach you every aspect of React: the fundamentals, capabilities, limitations and how they relate to design.

Module 1: React 101 For Designers

Available Now

What is React? What are props and state? When to use props and when to use state? How to style a component with CSS, JS and CSS-in-JS? How to create an interactive component? How to create animations?

React101 covers the basics of React and lays a solid foundation for the more advanced modules.

Module 2: React Native 101 For Designers

Available 2018

What is React Native? Why is it a big deal? What is a "native" app? How to layout and style components on iOS and Android? How to create native animations with Animated or Lottie? How to manage touch gestures?

RN101 teaches you the basics of React Native, and helps you understand how to build modern, native user interfaces on iOS and Android.

Module 3: React-driven Design Process

Available 2018

Where does React fit in the design process? How to use real data in prototypes? How to use React Sketch.app to create a design system? How to hand off assets that your developers love? How to hand off components, not just assets?

This module explores how React can be used to streamline your design workflow, and improves your collaboration with engineers.

Module 4: Real World React

Available 2018

What is Redux? What is React Router? What is Webpack? How are they related in a project? What are life cycle methods of React? How to build and run an existing project? How to find and style components in it?

This module teaches some more advanced concepts of React, and shows you how to work with a project in a real world setting.

YOU ARE IN GREAT COMPANY

LEARNING GOALS

The main goal of this course is to help you establish a firm understanding of the fundamentals, capabilities and limitations of React and how they relate to design. Armed with a holistic view of how design and engineering interacts, you will become a better designer whom everyone loves to work with.

After finishing the course, you should become aware of how the UI could be structured and constructed in reality when designing the next mockup in Sketch. You should be able to discuss with your developers, with more confidence, on how to design a great UI that’s easy to implement, performant and easy to maintain. You should also be able to style the UI of an existing React project yourself – no more waiting for developers!

To break it down, here are a few verifiable goals to help you work along the course material. After completing the course, you should be able to:
  • explain the following at a concept level (or better yet, since you are a designer, draw diagrams / sketches!):
    • Why are React and React Native cool?
    • How does React fit together with other parts of an app (Redux, Mobx, React Router, Server API, etc.)?
    • What kind of apps is React Native good for, and otherwise?
    • What are components, props and states?
    • When to use props and when to use states?
    • Where does React fit in your design work flow?
  • create a simple component in two different ways and explain the differences
  • create a component that takes user input and update the UI accordingly
  • use React Developer Tool to analyze components in a ReactJS or React Native app
  • explain the pros and cons of the various ways of styling ReactJS and React Native components
  • layout/style an existing component take an existing project, run it, identify where the UI components are, update the layout and styles of specific elements in the app.
  • setup the environment for React Sketch.app and create simple components that render to image layers
If you are struggling with anything above even after completing all the videos and exercises, email me! I’ll try my best to help.

WE'LL RE-OPEN IN May 2018

Linton comes across like a really nice programmer that wants to help us designers.

- Lincoln Mitchell, Senior UX Architect

Here are just a few things you'll learn to bring your design to life, with your own hands!

FUNDAMENTALS

  • What are DOM, React and React Native?
  • Components, props and state
  • Making components interactive
  • Relevant ES6 features: constants, arrow functions, class, import/export etc.
  • Setting up a React project from scratch

DESIGN PROCESS WITH REACT IN MIND

  • Prototype with React
  • Use real data in prototypes
  • Asset handoff best practices
  • Build a design system with React Sketch.app

BUILDING MODERN UI

  • CSS, inline style and CSS-in-JS
  • Flexbox
  • styled-components
  • Animations and micro-interactions
  • Building Material and iOS UI with React Native

TOOLS

  • React Sketch.app
  • Storybook
  • Expo
  • React Developer Tools
Hi! I'm Linton Ye!

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!

FAQs

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?

Check out this page.

Why should you pre-order?

  • 50%+ off the regular price!
  • Zero risk – You can cancel your order anytime within 30 days. No hard feelings.
  • Start learning sooner – I’ll send you exclusive content updates while the courses are being created. You don’t have to wait until the launch date.
  • Learn what you want to learn – The courses are feedback driven. I’ll try my best to integrate your feedback into the course materials. It’s a good opportunity to have your influence on creating a great resource for the entire design community. Shoot me an email, I’m all ears!

In the spirit of transparency, I must share that I’ll use the number of pre-orders to gauge the potential of the idea. I’d really like to work on this full-time, but I need to be sure that my time is well spent – I want to create enough value that you are willing to pay for.

So, if you want a course to see the light of day, please pre-order. It’s risk free, and a great way to kickstart your journey of designing with React.

Thank you! I’d really appreciate your trust and support. I’ll do my best!

What if you are not satisfied?

If you are not 100% satisfied with the courses, you can cancel your order at any time before the launch of the course. After launch, you still have 30 days to get 100% refund. No hard feelings!

© 2018 jimu Labs, Inc.