React Newsletter #36

React gotchas, imperative vs declarative programming, and an oyssey to find a sustainable icon system with SVGs in React

Hi friends,

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 Gotchas

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.

Imperative vs Declarative Programming

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.


An odyssey to find a sustainable icon system with SVGs in React

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.

Functional Components with React stateless functions and Ramda

Mirko Mariani

Composing functional React components with Ramda



Gestalt lets you use the GraphQL schema language and a small set of directives to define a GraphQL API with a PostgreSQL backend declaratively and with a really tiny amount of code. To create an API, you just write a schema using the schema language and run the server. As you work on your app, you can make changes quickly and drop down to javascript without friction whenever you need to do something more complex than read values from the database.

React-Fela: React bindings for Fela

Fela is a fast and modular library to handle styling in JavaScript. It is dynamic by design, framework-agnostic and tiny (only 2kb gzipped). It works especially well with React using react-fela bindings.

React-Islands Components Library

A set of react components implementing Yandex's islands design.

React Native TextInput Effects

Text inputs with custom animations for iOS and android. Built by react native and inspired by Codrops.

React Reformed

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.


React + Redux Screencasts

Here is a great collection of free React + Redux screencasts.

made with ❤️ by