A collection of awesome links to learn React, ES6 & Framer X
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
code-of-conduct.md Initial commit. Readme, contributing and more. Jul 11, 2018
contributing.md Initial commit. Readme, contributing and more. Jul 11, 2018
readme.md Adding new React/TypeScript articles, fixing anchors. Jan 31, 2019

readme.md

Awesome React Framer X Awesome

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

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 for Framer X could be written in TypeScript or ES6.

If you want to get started with React:

Table of Contents

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.
  • 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 includes code overrides for animations and creating your first React components for Framer X.

Free React Courses

Paid React Courses

ES6 Courses

TypeScript Refrences

React based design tools, online tools and REPLs

  • 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.

Tutorials

Articles

Framer X Articles

React & TypeScript Articles

Framer X Components, Tools & Tips

Tools

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.