Awesome React Framer X

This is an awesome list with links to courses, tutorials & videos to learn everything about React, ES6 & Framer X.

What is Framer X?

Framer X is a powerful Interaction Design tool. Please read the Official Documentation.

Framer X comes with a variety of features and capabilities like a Design Store of reusable UI components (powered by NPM). On the store, you will find a collection of interactive design & code components such as maps, random image generators, video and audio players, Design System Kits (iOS & Android) and more.

React components on Framer X can be written in TypeScript and/or ES6.

Getting started with React

• React Docs - Make sure to check out the new React Docs. It's an overview of the most useful resources, including the Intro to React tutorial.
• ES6 / React Cheatsheet by Koen Bok, founder of Framer, made a super useful intro to ES6 & React for designers, covering all the essential parts [variables, functions, components, CSS, JSX and more].

For advanced React & Framer X users

• Checkout the paper doc An (Advanced) Guide to Code Components by Steve Ruiz.

Table of Contents

• Courses
  • Framer X Courses
  • Free React Courses
  • Paid React Courses
  • ES6 Courses
• Articles
  • Framer X Articles ✨
  • React & TypeScript Articles
• Tools
• Code Editors
• Tutorials
• Framer X Components, Tools & Tips
• Community
• 🔜 Video tutorials about Framer X and React

Courses

Framer X Courses

• 🆓Design + Code Free Framer X Course - Meng To & Team created an awesome 10 part crash course to learn all about the design & code parts of Framer X, including layouts, design components, stacks, code components, code overrides, using data on a code component and more.
• 🆓UI Interactions in Framer Playgrounds - Meng To & Team show how to build interactions and UI animations from scratch using React Hooks, the Framer X in-app editor, Overrides, Property Controls, Shared Colors, Variants and a whole lot more.
• Framer X + React - Linton Ye, from learnreact.design created a 5 part course to learn all about Framer X and React. The course covers the Framer X design capabilities such as frames, stacks, images, graphics, design components. The last 2 parts of the course include code overrides for animations and creating your first React components for Framer X.
• Design & Development Workflow with Framer X - Emmanuel Henri on Lynda.com. A deep dive into the designer to developer workflow, going over how React relates to Framer X and prototyping, as well as the proper guidelines to follow when creating designs for the web and mobile devices.
• The Framer X Book – Tes Mat put together a complete resource to teach designers two of the main aspects of Framer X, Code Components, and Overrides. He describes how Code Components work and how to customize existing components from the store, then explain how to use Overrides, one of the ways to quickly make elements on your canvas interactive.

Free React Courses

• Codecademy - React 101 - Develop a strong understanding of React's most essential concepts.
• Egghead.io: Start Learning React - Explore the basic fundamentals of React to get you started, by @joemaddalone.
• Egghead.io: The Beginner's Guide to React - For React newbies and those looking to get a better understanding of React fundamentals, by @kentcdodds.
• React Crash Course 2018 - Learn React - React Tutorial with examples, by @moshhamedani
• ReactJS Crash Course - Learn the fundamentals of React.js, by @traversymedia - Source Code.
• React JS Tutorials - Get quickly up to pace with React.js development by LearnCode.academy.
• React Armory Learn React by Itself - Learn React without the buzzwords, by @james_k_nelson.
• Free React boot camp - All of the recordings, links, and assignments from the "Free React.js Bootcamp", streamed live and recorded on during April 2018 by @tylermcginnis.
• React Rapid Course - This React Course will help you get quickly up to pace with React.js development - Source Code.
• React for Designers, made by @meng_to, a comprehensive guide intended for designers, covering everything from CSS styling to deploying your first React application.

Paid React Courses

• React for Designers - A 6-hour React course for designers, by designers. React for Designers is a free update, with a Design+Code account.
• Learn React - Unleash Your Design Superpowers with this straightforward, with just enough JS, focused on UI design, layouts, styles, and animations, by @lintonye.
• React For Beginners - Source Code - Learn React.js in just a couple of afternoons, by @wesbos.
• Essential React 2018 - A crash course for doers, moving fast from "Hello World" to advanced component composition, by @chantastic. Some sections of this course are free.
• Udemy: The Complete React Web Developer Course (with Redux) - Learn how to build and launch React web applications using React v16.
• Udemy: Modern React with Redux - Fundamentals of React, Redux, React Router, Webpack, and ES6, by @ste_grider
• Treehouse: Learn React: - Get up and running with React, a JavaScript library for building user interfaces, by @jimrhoskins.
• Frontend Masters: Complete Intro to React, v3 (feat. Redux, Router & Flow) - Learn how to build real-world applications with React with Brian Holt.

ES6 Courses

• Learn ES6 - This course takes a look at some of the new features of ES6, by @johnlindquist.
• ES6 for Everyone - Improve your core JavaScript skills and master all that ES6 has to offer, by @wesbos.
• Introduction to ES6+ - Learn modern JavaScript through 23 screencasts, by Per Harald Borgen - Article.

TypeScript Refrences

• Learn TypeScript - Main documentation for TypeScript.
• TypeScript Cheatsheet - A TypeScript cheatsheet by [@swyx] and [@islamAttrash]
• React + TypeScript Example - An example React + TypeScript project.

Articles

Framer X Articles

• Making things happen in Framer X - A very detailed answer to this recurring question on the Framer Slack Channel. “How do I make user interaction with one component produce a change in a different component?” – by Framer Design Educator Steve Ruiz. - Jul 05, 2019.
• Going from Framer to Framer X — A simple guide for designers getting started with React and Framer X by Max Steitle - Apr 8, 2019
• Build fast 3D map prototypes with Mapbox + Framer X - Amy Lee Walton - Apr 3, 2019
• Create an app from scratch using FramerX - Pavel Laptev - March 30, 2019
• Framer X: What Are Code Overrides? - by Stefanos Kofopoulos - March 28, 2019
• Framer released Playground (Beta) and things just got real - Addison Schultz - March 27, 2019
• How to Preview and Share Framer X Prototypes - Brett Bertola - March 20, 2019
• How to pass text input to another screen in Framer X - Adam Lindfors - March 19, 2019
• Wide-Gamut Colors in Framer X - Henrique Gusso - March 18, 2019
• Framer X: Prototype with Accelerometer, Gyroscope and No Code - by Stefanos Kofopoulos - March 8, 2019
• React for Web Designers - Koen Bok - Feb 27, 2019
• Simulate Media Query in Framer X - Poyi Chen - Feb 23, 2019
• Framer X: TechCrunch Mobile Site Prototype with No Code - by Stefanos Kofopoulos - Feb 18, 2019
• Creating my first Framer X code component - Louis Moody - Feb 14, 2019
• Prototyping Advanced Scroll Interactions in Framer X - Linton Ye - Feb 8, 2019
• Framer X: Using local JSON data to populate design components - Chris Robinson - Feb 7, 2019
• Framer X: Conditional rendering for design & code components - Chris Robinson - Feb 6, 2019
• Icon Property Controls in Framer X - Secret codes for spicier components. - by Steve Ruiz. - Jan 10, 2019.
• The design team wants you to use Framer X, now what? The missing guide for developers - Michael Katz explains Framer X from a developer standpoint, his experience after being asked to develop some prototyping tools for his design team. - by Michael Katz. - Jan 3, 2019.
• Share data between code components in Framer X - Simon Franzen, software developer at zauberware, gives a step-by-step explanation of how to share data between code components., Jan 4, 2019.
• How to use custom fonts with Framer X - Designer Pavel Laptev describes a simple but efficient technique to embed web fonts on your FramerX project. - Dec 19, 2018.
• Professor Spot and inputs validation in Framer X - Another super comprehensive (and illustrated) article by Pavel Laptev about form validation with React in Framer X. - Nov 12, 2018.
• How to create a styled-component in Framer X - Simon Franzen, software developer at zauberware, shows how to install styled-components for a Framer X project and how to create a basic button component., Oct 20, 2018.
• Building a working chat bot in Framer X - Designer Ryan Barry shows how to build a chat bot with Framer X. - Oct 12, 2018.
• Interactive maps in Framer X - Prototype location experiences with no code required, by Amy Lee Walton - Oct 11, 2018
• How to use real data in Framer X - Designer Pavel Laptev shows how you can load and use real data on your Framer X prototypes. - Oct 6, 2018.
• Property Controls in Framer X - A complete guide that covers all about property controls, from images to fused numbers, by Framer Designer, Benjamin den Boer - Sep 29, 2018.
• Designing with real data - If you work on a product that has an internal API, Dropbox Designer @zach__johnston will show you how to learn some techniques to start designing with real data. - Sep 18, 2018.
• Framer X Beta overview and examples - A comprehensive guide of everything you need to know about Framer X from setting up the code editor, debuging with the inspector, some basics about React, how a code component structure looks like, setting up external NPM modules, using Styled Components on a code component and more. Article by Pavel Laptev. - Sep 17, 2018.
• An intro to {props.children} in Framer X - A quick intro to the React's props.children concept applied in Framer X by Seb Bailey - Sep 16, 2018.
• Setting Props in Framer X - This is a super handy, four-part article about Props in React, in Framer X, how to set Property Controls on your own code component and which Property Control Types are available on Framer X Beta 3 by Designer/Developer, Steve Ruiz. - Sep 10, 2018.
• How to create a simple prototype with Code Overrides in Framer X - A thorough guide to code overrides, one of the new features of Framer X Beta 2 by Framer Designer, Benjamin den Boer. Sep 9, 2018.
• Bringing Design System Components from Production into Framer X - A super comprehensive guide for reusing Design Systems components inside Framer X by Ivan Cruz, Product Designer at Datadog. Check out the source code, a build system to transpile and sync a production code component with Framer X. Aug 31, 2018.
• ‪Framer X Beta: My first week‬ - Web & motion designer Athanasia Lykoudi shares her first impressions using Framer X. Aug 12, 2018.
• The Future of UI  —  Framer X - Product Designer, Antoine Plu does a detailed review of the capabilities of this new tool. The article includes a screencast video, a speeded-up 3-hour stress test of Framer X.
• Framer X: the hype, the powers, the challenges and the grand vision - Linton Ye speculates about the future of Framer X and how this release defines Framer as the most ambitious Design Tool of 2018. - Jun 22, 2018.
• Building a Design System Ui Component Using Framer X - ruucm wrote a simple article about how to make Design System Component using Framer X. - Jun 1, 2019.

React & TypeScript Articles

• All React Conditional Rendering Techniques - 8 techniques to performa a conditional rendering with React - by @rwieruch. - Sep 21, 2018
• 10 TypeScript Pro Tips / Patterns - 10 TypeScript Pro tips/patterns with (or without) React - by Martin Hochel. - Oct 29, 2018
• Ultimate React Component Patterns with Typescript 2.8 - Ultimate React Component Patterns with Typescript 2.8 - Stateful, Stateless, Default Props, Render Callbacks, Component Injection, Generic Components, High Order Components, Controlled Components - by Martin Hochel. - Feb 28, 2018
• How to learn React.js in 2019 - a comprehensive overview of how to approach learning React without getting distracted or overwhelmed. - by @rwieruch. - Jan 1, 2019
• React Semantic UI Tutorial for Beginners - A tutorial to guide you through styling your React application with Semantic UI - by @rwieruch. - Jan 6, 2019
• JavaScript fundamentals before learning React - "Often I find myself explaining more JS than React when teaching React in a workshop/online. That's why I have put all the important JS fundamentals (for React) in one extensive article" - by @rwieruch.
• How to Learn React: A Five-Step Plan - These five steps, which should take a dedicated student about a week, will provide the foundation you need to get started, by @__jhannah.
• Learn React.js in 5 minutes - A quick introduction to the popular JavaScript library, by Per Harald Borgen.
• Learning React.js is easier than you think - Learn the fundamentals of React.js in one Medium article.
• 9 things every React.js beginner should know - A list of tips to help you get a better foundation with React by @thecamjackson.
• Every UI Designer needs to learn React - Why we need to transition from a screen-based approach to a component-based approach and how React can help. Article by @shesho. – 8 React conditional rendering methods - JS de veloper, @eh3rrera covers 8 conditional rendering methods in React and concludes that the ternary operator isn’t always the way to go.

React based design tools, online tools and REPLs

• Framer Next - A technical showcase of the Framer API Examples implemented within a production React application environment. Created by @nataliemarleny.
• Transform - Tool to transform JS objects to get something useful [CSS-to-JS, CSS-to-Emotion, HTML-to-JSX and many more]. Source.
• Guppy - A friendly application manager and task runner for React.js.
• Iso - Build and prototype with pure JSX – no build setup or command line required.
• Alva - Alva is a React based Design Tool (in beta).
• React for Designers - A friendly guide to start learning React. Created by @zach__johnston. Source.
• HTMLtoJSX - A web-based tool that converts HTML to JSX compatible with React (v15).
• SVG2JSX - A web-based tool that converts SVG to valid JSX.
• React Patterns - A comprehensive collection of 17 React patterns and practices, by @chantastic.
• React Cheat Sheet - An interactive documentation tool for the latest React API, by @chantastic.
• React.js Cheatsheet - A complete reference of components, properties and states, life cycle methods and more.

Code Editors

Framer X will not have a code editor. Good news is that you can install and customize your code editor. Here are the most popular ones.

• Visual Studio Code - VS Code is a fast, lightweight, code editor developed by Microsoft. Is open source, comes with built-in support for JavaScript, TypeScript and Node.
  • Framer X Code Snippets. - A collection of snippets for Framer X using React with versions on plain ES6 & TypeScript, made by @pixelbeat.
  • Extensions for Visual Studio Code.
  • Framer VS Code Theme.
  • Awesome VS Code List.
• Sublime Text 3 - ST3 is a super fast and feature-packed code editor. Checkout Package Control, the Sublime Text package manager. It includes a list of over 4,500 packages ready to install.
• Atom - Atom is the code editor developed by Github. Ultra hackable, with tons of packages created by the community.
  • Framer Atom Theme.
• Codesandbox - CodeSandbox is an online editor that helps you create web applications, from prototype to deployment.

Tutorials

• How to learn React.js in 2019 - How to learn React is high on the agenda for plenty of JavaScript developers for this year. The recent State of JS survey has shown that many developers are content with React for creating modern web applications. - Article by Robin Wieruch. Jan 1, 2018.
• Tutorial: Intro to React - Build a game. Master the fundamentals to create a React app.
• What Is React? - React terms in plain English and doodles.
• Build with React - Tutorial - Learn React quickly with this interactive tutorial.
• React Tutorial for Beginners - This React tutorial will explain everything in simple terms and plain English so you don’t feel overwhelmed or frustrated while learning React, by @ihatetomatoes.
• React Tutorial - A Comprehensive Guide to learning React.js in 2018, by @tylermcginnis.

Framer X Components, Tools & Tips

Tools

• Framer Tools - Create code components for your Framer X file right from the command line, created by Steve Ruiz.
• Framer X Build System - A build system to transpile React components for use in Framer X - Check out the (intro blog post).

Tips

• Framer X Tips - A compilation of Framer X tricks and hidden gems, +50 so far and ground. Made by Linton Ye. New tips are welcomed, you can add yours using this form!

Other lists, communities, meetups and more.

• Awesome React - A collection of awesome things regarding React ecosystem.
• Discussion forum at discuss.reactjs.org - This forum is a great place for discussion about best practices and application architecture as well as the future of React.
• React.js meetup groups: A great way to learn React.js is to get involved with their amazing community. There are more than 500 meetups around the world. Join!
• spectrum.chat/react - A community of developers, designers and others who love React.js.
• spectrum.chat/framer - Another channel to share your prototypes and ask questions about Framer.
• Framer X Slack Channel - Share your work, ask questions and help other Framer X enthusiasts!
• Framer React Slack Channel - If you have questions, resources or just want to share something, join us!