Plotly Academy: State Management with Redux

Learn how to handle application state in a centralized store with Redux, the most popular unidirectional data flow library! Wow, wish I had stumbled upon this magnificent tutorial when I was just getting started with Redux. Well written, with a very good example. State Management with Redux → This article forms a good addition to …

ES6 ES2015 and React snippets for Sublime Text

babel-sublime-snippets contains a set of shorthands for Sublime Text to working more easily with ES2015 and React. With it, for example, you can just type cdup followed by a TAB and you’ll end up with componentDidUpdate(prevProps, prevState) {…}. Find it as Babel Snippets through Package Control. babel-sublime-snippets →

Jest – Painless JavaScript Testing

I’ve been hearing great things about Jest lately. It’s worth checking it out: Jest is a JavaScript testing framework, used by Facebook to test all JavaScript code including React applications. Install Jest using npm (along with some extra Babel presets if you’re writing ES2015 – Don’t forget to configure Babel using .babelrc to use the …

Electrode – Universal React and Node.js Application Platform

From the folks at Walmart: Electrode is a platform for building universal React/Node.js applications with standardized structure, best practices, and modern technologies baked in. It’s powering Walmart.com. And, now developers can use Electrode Platform as a whole or take its pieces, as appropriate. Electrode focuses on performance, component reusability, and simple deployment to multiple cloud …

You Might Not Need Redux

I like this post by Dan Abramov, the author of Redux, on how you might not need Redux: If you’re working on an extensible terminal, a JavaScript debugger, or some kinds of webapps, it might be worth giving Redux a try, or at least considering some of its ideas. However, if you’re just learning React, …

React + The Shadow DOM = ReactShadow

By using ReactShadow you have all the benefits of Shadow DOM in React. import ShadowDOM from 'react-shadow'; export default props => { return ( <ShadowDOM include={['css/core/calendar.css', props.theme]}> <h1>Calendar for {props.date}</h1> </ShadowDOM> ); } Installation per npm, of course: npm i react-shadow –save ReactShadow (GitHub) →ReactShadow Demo →

react-music — Make beats with React!

The past few days Ken Wheeler has been tweeting some sneak peeks of what he’s been up to, after having heard that Akai was discontinuing its standalone hardware MPC drum machine offering: I did what any geek that writes React code all day long would do: I wrote a library so that I can make …

React Binding Patterns: 5 Approaches for Handling this

Cory House: There are at least five ways to handle the this context in React. Let’s consider the merits of each approach. Use React.createClass Bind in Render Use Arrow Function in Render Bind in Constructor Use Arrow Function in Class Property Currently I’m mostly using Approach 4 (“Bind in Constructor”), but Approach 5 (“Arrow Function …