Régis Hanol ZogStriP

TLDR: a React component should either manage its own state, or expose a callback so that its parent can. But never both.

Sometimes our first impulse is for a component to entirely manage its own state. Consider this simple theater seating picker that has a letter for a row, and a number for a seat. Clicking the buttons to increment each value is hardly the height of user-interface design, but never mind - that's how it works:

/* @flow */
var React = require('react');

var Letter: React.ReactClass = React.createClass({
  getInitialState: function(): any {

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

This post is also on my blog, since Gist doesn't support @ notifications.

Components are taking center stage in Ember 2.0. Here are some things you can do today to make the transition as smooth as possible:

Use Ember CLI
In general, replace views + controllers with components
Only use controllers at the top-level for receiving data from the route, and use Ember.Controller instead of Ember.ArrayController or Ember.ObjectController
Fetch data in your route, and set it as normal properties on your top-level controller. Export an Ember.Controller, otherwise a proxy will be generated. You can use Ember.RSVP.hash to simulate setting normal props on your controller.

Open Atom
Click the Atom > Open Your Stylesheet menu item
Paste code below

.editor .markup.underline.link.hyperlink {
  color: #F9EE98;
  text-decoration: underline;
}

Data Down / Actions Up
- http://emberjs.jsbin.com/nayaho/edit?html,js - Interdependent select boxes. No observers.
- http://ember-twiddle.com/2d7246875098d0dbb4a4 - One Way Input
Plain JSBin's
- http://rwjblue.jsbin.com/pixeki/edit?html,js,output
Ember Version Base JSBin's
- 1.0 - http://emberjs.jsbin.com/juluje/edit?html,js,output
1.1 - http://emberjs.jsbin.com/cofufo/edit?html,js,output

	import Ember from 'ember';
	import _ from 'lodash';

	export default Ember.Route.extend({

	lastTransition: null,
	readyToTransition: false,

	transitionend: 'transitionend oTransitionEnd webkitTransitionEnd',
	animationend: 'animationend',

	# Hello, and welcome to makefile basics.
	#
	# You will learn why `make` is so great, and why, despite its "weird" syntax,
	# it is actually a highly expressive, efficient, and powerful way to build
	# programs.
	#
	# Once you're done here, go to
	# http://www.gnu.org/software/make/manual/make.html
	# to learn SOOOO much more.

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html>
	<head>
	<title>Movie Folder Parser</title>
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
	<style>
	html, body {

	require 'nokogiri'

	class Html2Md
	class Link < Struct.new(:href, :title)
	end

	class Format < Struct.new(:name, :head, :body, :opened)
	end

	WIDTH = 80

	module DiscourseUsersMerger

	class Merger
	def merge(target_username, source_username)
	raise "User to merge and target user can't be the same" if target_username == source_username
	target_user = User.find_by_username!(target_username)
	source_user = User.find_by_username!(source_username)
	puts "About to merge #{source_username} (#{source_user.email}) into #{target_username} (#{target_user.email})"
	puts "#{source_user.topics.count} topics with #{source_user.posts.count} posts will be moved. Ok to continue? (y/n)"
	continue = STDIN.gets.chomp.downcase == 'y'