Wei Chih Tsai iambigd

You are probably here because you got the following error messages:

addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded.

This usually means one of two things:

You are trying to add a ref to an element that is being created outside of a component's render() function.
You have multiple (conflicting) copies of React loaded (eg. due to a miss-configured NPM dependency)

Invalid Refs

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

	/* HOC fundamentally is just a function that accepts a Component and returns a Component:
	(component) => {return componentOnSteroids; } or just component => componentOnSteroids;
	Let's assume we want to wrap our components in another component that is used for debugging purposes,
	it just wraps them in a DIV with "debug class on it".
	Below ComponentToDebug is a React component.
	*/

	//HOC using Class
	//it's a function that accepts ComponentToDebug and implicitly returns a Class
	let DebugComponent = ComponentToDebug => class extends Component {

	//
	// RestClient.swift
	// USJ-R Mobile
	//
	// Created by keithics on 10/7/15.
	// Copyright © 2015 Web Ninja Technologies. All rights reserved.
	//

	import Foundation
	import Alamofire


	/*
	##Device = Desktops
	##Screen = 1281px to higher resolution desktops
	*/

	@media (min-width: 1281px) {

	/* CSS */

	// the main app file
	import express from "express";
	import loadDb from "./loadDb"; // dummy middleware to load db (sets request.db)
	import authenticate from "./authentication"; // middleware for doing authentication
	import permit from "./authorization"; // middleware for checking if user's role is permitted to make request

	const app = express(),
	api = express.Router();

	// first middleware will setup db connection

	/**
	* Summernote PasteClean
	*
	* This is a plugin for Summernote (www.summernote.org) WYSIWYG editor.
	* It will clean up the content your editors may paste in for unknown sources
	* into your CMS. It strips Word special characters, style attributes, script
	* tags, and other annoyances so that the content can be clean HTML with
	* no unknown hitchhiking scripts or styles.
	*
	* @author Jason Byrne, FloSports <jason.byrne@flosports.tv>

	/*
	:: Enhanced Version @extralam ::
	Allows for ajax requests to be run synchronously in a queue , remove queue

	Usage::
	var queue = new $.AjaxQueue();

	// add with tag name or not , both ok
	queue.add('test',{
	url: 'url',

	.bgimage {
	width:100%;
	height:500px;
	background: url('https://images.unsplash.com/photo-1438109491414-7198515b166b?q=80&fm=jpg&s=cbdabf7a79c087a0b060670a6d79726c');
	background-repeat: no-repeat;
	background-position: center;
	background-size:cover;
	background-attachment: fixed;
	}
	.bgimage h5 {

	// ------------
	// counterStore.js
	// ------------

	import {
	INCREMENT_COUNTER,
	DECREMENT_COUNTER
	} from '../constants/ActionTypes';

	const initialState = { counter: 0 };