Just Enough JS
Focused On UI
Illustrated Explanations
- Masood Sadri, Product Designer
WHAT YOU WILL BUILD
HD Video Tutorials
Practical Course Projects
Private Slack Channel
- Kaitlyn Vu, User Experience Designer
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
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
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
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
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.
- Lachezar Petkov, UX designer
LEARN WITH FELLOW DESIGNERS
This whole react.js thing is amazing. I’ve been learning and playing like crazy. Thanks @lintonye ! Now I’m hoping to take my new skills into framerX and potentially taking over the world.
— Tony Sciantarelli (@TSciant) September 21, 2018
Loving the #FramerX course by @lintonye I love Mr Skinny ❤️ The course is really funny, there is some real tricks that can save you a lot of time and have full power of this new #FramerX. It works great on mobile, a good substitute of Netflix 😘. https://t.co/MQBD2YGnKe pic.twitter.com/mtMEBiwC2e
— Yin-Ho Chong @FramerLoupe (@yinhochong) September 26, 2018
Basically obsessed with the https://t.co/8YjYbwzVxX explanations of all things @reactjs ...all of the doodles @lintonye
— Hailey Pobanz (@HaileyTheGinger) June 22, 2018
Just started with @lintonye 's 'React For Designers' course to make myself ready for @framer X. https://t.co/xvUbKUthTq
— Wart Burggraaf (@WartBurggraaf) June 15, 2018
What is React? Brilliant explanation for designers (make sure to switch "Domo's" hat 🤠) https://t.co/CF5Csuhi4L #react #design
— Domain7 (@domain7) June 12, 2017
What a fun way for us newbies to learn about #React! => "What is React? React terms in plain English and doodles" https://t.co/UZ9mtx3Z6K
— Tiffany Du (@dusign) June 15, 2017
- Patrick Multani, Product Designer
ENROLL NOW!
Want to buy 3+ licenses? Ask me about team discount or site licenses
100% RISK-FREE INVESTMENT
If you are not completely satisfied with the courses, you can get 100% refund within 30 days of your purchase. No hard feelings!
- 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
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!
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?
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?
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?
I have other questions!
© 2018 jimu Labs, Inc.