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. A Beta Program started on August 1st to try and give feedback to the team. Please read the Official Documentation.
The team recently opened up a Facebook group Framer X Beta to consolidate bug reports, feedback, ideas and questions.
Beta I comes with a new 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 Beta 1 will only support TypeScript. ES6 support is expected for the final release.
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.
What we know so far
-
CoffeeScriptwill not be supported on Framer X. - Code based components will support
Typescripton Beta 1.ES6will be supported on the final release. -
Framer.jswill be ported into a set ofReacthelpers for animation, gestures and interpolation. It will be open source. - React offers a variety of methods to add CSS to a code component, some of this methods are supported on Beta I.
- Framer X will not include a code editor like Framer Studio. Learn more about how to setup and customize a code editor.
- To publish packages on the new Design Store is recommended to edit a
readme.mdfile. Github has a comprehensive Intro toMarkdown.
Expand ToC
- 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.
- 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
- 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.
- Framer X Slack Channel - Share your work, questions or resources here!
- Framer React Slack Channel - If you have questions, resources or just want to share something, join us!