Draft.js – Rich Text Editor Framework for React

Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences. Draft.js makes it easy to build any type of rich text input, whether you’re just looking to support a few inline text styles or building a complex text editor for composing long-form articles. The […]

Redux DevTools Chrome Extension

A Chrome DevTools Extension, wrapping around Redux DevTools: The Redux DevTools themselves are a live-editing time travel environment for Redux: Lets you inspect every state and action payload Lets you go back in time by “cancelling” actions If you change the reducer code, each “staged” action will be re-evaluated If the reducers throw, you will […]

Motion Design in React.js with “React Motion”

import {Motion, spring} from 'react-motion'; // In your render: <Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> {value => <div>{value.x}</div>} </Motion> This library provides an alternative, more powerful API for React’s TransitionGroup. For 95% of use-cases of animating components, we don’t have to resort to using hard-coded easing curves and duration. Set up a stiffness and damping for […]

Motion Design in React.js: UI Animations with CSSTransitionGroup and TransitionGroup

React Interface without (left) and with (right) animations In this article, I am going to use the official components from React.js addons. There are other components/libraries that are better for the job but at the end of the article you will get a good amount of React.js animation practice to better understand these other components. […]

Setting up React for ES6 ES2015 with Webpack and Babel

This resource came in quite handy when setting up React in combination with ES6 ES2015, Webpack and Babel. Installing all the required dependencies: # Install Webpack npm install –save-dev webpack # Install the Babel Loader, for use with Webpack npm install –save-dev babel-loader # Install the es2015 and react presets, for use with Babel npm […]

ReactiveElements: Convert React.js components into Web Components

Create your component as you normally would, and then register it on the document using document.registerReact(…) /* @jsx React.DOM */ MyComponent = React.createClass({ render: function() { console.log(this.props.items); // passed as HTML tag`s argument console.log(this.props.children); // original tag children return <ul><li>React content</li></ul>; } }); document.registerReact('my-react-component', MyComponent); You can then use it as follows: <body> <my-react-component items="{window.someArray}"></my-react-component> […]

Sending/Getting messages to/from a React Native Webview

Enter react-native-webview-bridge, a JavaScript bridge between your React Native app and a WebView contained inside it: var WebViewBridge = require('react-native-webview-bridge'); const injectScript = ` (function () { if (WebViewBridge) { WebViewBridge.onMessage = function (message) { if (message === "hello from react-native") { WebViewBridge.send("got the message inside webview"); } }; WebViewBridge.send("hello from webview"); } }()); `; […]

Facebook: Mobile @Scale London recap

Less than three years ago, engineers from Twitter, LinkedIn, Dropbox, Pinterest, and Facebook — including two from the then brand-new Facebook London office — met at Mobile @Scale in Menlo Park to talk about the challenges of building mobile software at large scale. Last Wednesday, the first Mobile @Scale London showed how far mobile development […]