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 🆕
- Tools 🆕
- Community
- 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.
- 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.
- 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 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.
- 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 Product Designer, Steve Ruiz.
- 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.
- 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.
- Framer X Beta: My first week - Web & motion designer Athanasia Lykoudi shares her first impressions using Framer X.
- 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.
- 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.
- 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).
- 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!