React gotchas, imperative vs declarative programming, and an oyssey to find a sustainable icon system with SVGs in React
ICYMI there were two really great articles on the React blog this week. First is Mixins Considered Harmful which I recommend to those of you still using Mixins. The second is Design Principles which I recommend to everyone. Both written by Dan Abramov."
React is an intuitive library, for the most part. Draw boxes around your UI designs and you’ve basically got your component structure laid out. JSX is nice to write and keeps the boilerplate down.
But there are a few stumbling points where I’ve seen people get stuck (and gotten stuck myself). Internalize these few rules and you’ll avoid some strange errors.
At this point you’ve undoubtedly heard about imperative programming vs declarative programming. You might have even searched for what those terms actually mean. Sadly, you probably encountered a definition similar to this, “You know, imperative programming is like “how” you do something, and declarative programming is more like “what” you do, or something.” In this post Tyler demystifies what it actually means to be Declarative.
A practical guide on migrating from icon fonts to SVGs in React. With a focus on automation, this guide hopes to provide a clear system for managing icons on larger projects.
Composing functional React components with Ramda
A set of react components implementing Yandex's islands design.
Text inputs with custom animations for iOS and android. Built by react native and inspired by Codrops.
Tiny form bindings for React so you can stop storing your form data in local component state. This higher-order component wraps your component and, through props, injects form data (a model) and simple bindings to update that model, giving you the opportunity to utilize composition in a middleware-like approach to accomplish more advanced functionality without bloating the form component itself.
Here is a great collection of free React + Redux screencasts.