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