Skip to content

Instantly share code, notes, and snippets.

View jcobb's full-sized avatar

John jcobb

39 followers · 27 following
  • Australia
View GitHub Profile
@jcobb
jcobb / gist:a510b50dd57235ceac06
Last active August 1, 2017 18:42
An opinionated guide to React.js best practices and conventions

An opinionated guide to React.js best practices and conventions

I've been using React.js for a little while now, both in my 9 to 5 job and for my own projects, and during that time I have started evolving my own set of 'best practices'.

The following guidelines mostly focus on component structure and JSX. However, they are not hard and fast rules, but more of an opinionated set of guidelines I choose to adhere to that make my code more readable, more robust and easily maintainable.

Note: This article does not provide explanations of the React paradigms or idioms mentioned here or used in the examples, that is best left to the excellent documentation provided by the React team.

Component organisation

@jcobb
jcobb / react-anim.md
Created February 5, 2015 05:30
react animation post

Creating an interface component to apply React.js CSS transitions on initial render

ReactCSSTransitionGroup is an addon component for React.js which allows you to perform CSS transitions and animations when a React component enters or leaves the DOM.

When a new item is added to ReactCSSTransitionGroup it will get the .transitionName-enter CSS class and the .transitionName-enter-active CSS class. Conversely, when an item is removed, it will receive the .transitionName-leave and .transitionName-active CSS classes.

This allows you to apply whatever CSS transitions you want to elements as they enter and leave the DOM.

The problem