readme.md

Awesome React Framer X

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. A Beta Program started on August 1st to try and give feedback to the team. Please read the Official Documentation.

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.

From Framer Studio to Framer X

• CoffeeScript will not be supported on Framer X.
• Code based components will support Typescript on Beta 1. Plain ES6 will be supported on the final release.
• Framer.js will be ported into a set of React helpers 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.md file. Github has a comprehensive Intro to Markdown.

Table of Contents

• Framer X Official Docs
• Free React Courses
• Paid React Courses
• ES6 Courses
• Tools
• Code Editors
• Tutorials
• Articles
• Meetups

Framer X Docs

Courses

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

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.

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.

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 radically new digital design tool built for cross-functional product teams (React based Design Tool, in beta).
• React for Designers - A friendly guide to start learning React. Created by @zach__johnston. [Source].(https://github.com/zachj0hnston/reactfordesignersdotcom).
• HTMLtoJSX - A web based tool that converts HTML to JSX compatible with React (v15).
• 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.

• 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.
• 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.
  • Extensions for Visual Studio Code.
  • Framer VS Code Theme.
  • Awesome VS Code List.
• 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

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

Articles

React Articles

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

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.
• Framer React Slack Channel - If you have questions, resources or just want to share something, join us!