This is an awesome list with links to courses, tutorials & videos to learn everything about React and ES6.
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:
- 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.
- React for Designers, made by @zach__johnston, a quick guide to help you avoid the option paralysis.
- Framer X Courses
- Free React Courses
- Paid React Courses
- ES6 Courses
- Tools
- Code Editors
- Tutorials
- Articles
- Framer X Components, Tools & Tips
- Community
- 🔜 Video tutorials about Framer X and React
- 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.
- 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 - 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.
- 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.
- Learn TypeScript - Main documentation for TypeScript.
- TypeScript Cheatsheet - A TypeScript cheatsheet by [@swyx] and [@islamAttrash]
- React + TypeScript Example - An example React + TypeScript project.
- 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.
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,TypeScriptandNode. - 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.
- Codesandbox - CodeSandbox is an online editor that helps you create web applications, from prototype to deployment.
- 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.
- Icon Property Controls in Framer X - Secret codes for spicier components. - by Steve Ruiz. - Jan 10, 2019.
- The design team wants you to use FramerX, 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 how to share data between code components., Jan 4, 2019.
- The design team wants you to use FramerX, now what? - Michael Katz, a frontend developer wrote a guide for developers describing the advantages and limits of FramerX. - Jan 3, 2019.
- How to use custom fonts with FramerX - Designer Pavel Laptev describes a simple but efficient technique to embed webfonts 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 Mapbox - 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 — FramerX - 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, Creator of learnreact.design speculates about the future of Framer X and how this release defines Framer as the most ambitious Design Tool of 2018. - Jun 22, 2018.
- 10++ TypeScript Pro tips/patterns with (or without) React - 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.
- 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).
- 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!
- 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!