Bring your animations to life with physics

Improve your user’s experience with animations. Learn about CSS and Javascript animations and when to use them.

Is There a React Equivalent for Angular’s ng-repeat?

If you’re familiar with AngularJS you already understand many of the principles necessary to get started with React. In this post, I’ll demonstrate how to write the equivalent of an ngRepeat inside a React component.

An Angular Developer's Guide to Their First React Component

I’ve been using Angular in my web apps for the last four years, but I recently became interested in React so I started the learning process. As usual, I dove in blindly, fumbled around with various tutorials until I felt comfortable enough to build something useful. With a few React apps under my belt now, I want to share what I’ve learned with other Angular developers who may be trying out React for the first time. In this post, I’ll start from scratch assuming you know nothing about React. I will try to help correlate Angular concepts with their React counterparts so you can start to build a mental model based on something you already know.

The Pain and the Joy of creating isomorphic apps in ReactJS

This post is not a tutorial. There are enough of them on the Internet. It is always more interesting to look at a real production app. A lot of tutorials and boilerplates show how to write isomorphic ReactJS applications, but they do not cover a lot of real-life problems we’ve faced in production (styling, data-fetching, vendor-prefixes, configutation etc). So we decided to share our experience at github and develop the app in a public repo. The post describes all the issues and howto to deal with them.

Using and Testing the Facebook API with React and Flux

For giving us React and Flux, I’ve seen relatively little about integrating Facebook’s own Graph API with their development tools. The tools are so new that there’s precious little instruction out there about how to answer questions that are easier to answer with other architectures, like:

Using GraphQL with MongoDB

With the Mongoose adapter for Graffiti, you can use your existing Mongoose schema for developing a GraphQL application.

We are going to cover the following topics:

  • Introduction to Graffiti
  • The Mongoose adapter
  • Relay & GraphQL
  • Getting started with Graffiti
  • Graffiti TodoMVC - a Relay example

Building a React-based Application

Building a frontend application is hard. Compared to building backend applications, you have way too much mutable state to manage and in the end your whole code base is so complex that nobody wants to touch anything.

We already know how to build backend applications - generating html, sending it to the browser, repeat - without it ending in a nightmare of complexity, but building frontend stuff is very complicated. Backend is easy, frontend is hard. So, why don’t we just build the frontend like the backend?

How to Structure a React Project?

Programming is a bit like gardening. While trying to keep the bugs out, we prefer to keep everything neat and organized lest we want to end up in the jungle. A poor structure just slows us down and makes it easier for bugs to crawl into the system.

There are multiple ways to structure your project. I believe it is far better to evolve the structure as you go rather than to stick with some dogma. I will go through some basic approaches next to provide some food for thought.

Your First Immutable React & Redux App

I’ve been back from Nodevember for two days now. I took a coworker with me who hasn’t used javascript in years. After the conference he’s been asking me non-stop on how to get started with React. This is aimed at people who understand javascript but have never used node. Even if you’ve used React quite a bit, this will help you understand Redux and give you a taste of ImmutableJS

Testing Components, The Easy Way

You may have seen Darin’s post on testing in React last month. We work together at the same company. In the past couple of weeks I’ve realized that I really hate how annoying it is to setup and write tests for components.