James Friend jsdf

## shallowRender.js
import React from 'react/addons';

export default function shallowRender(element) {
  const shallowRenderer = React.addons.TestUtils.createRenderer();
  shallowRenderer.render(element);
  return shallowRenderer.getRenderOutput();
}

## this.js
// A useful way of thinking about how the value of 'this' is bound in Javascript
// functions is to imagine that Function.prototype.call is being used
// implicitly at the call site to set the 'context' (the 'this' value). eg.

// assuming in each case
var o = {}
var o2 = {}
var fn = function(){}

// 1. bare function call

## UsernameField.js
let UsernameField = (() => {
  const _username = Symbol();
  const _handleNameChange = Symbol();

  return class UsernameField extends React.Component {
    state = {
      [_username]: 'DefaultUser',
    }

    [_handleNameChange] = (e) => {

## hn-collapse.js
(function() {
  // attach all comment disclosers
  $('.comment').forEach(function(comment) {
    var commentRoot = closest(comment, '.athing')
    CommentDiscloser(commentRoot)
  })

  function CommentDiscloser(root) {
    // initial state
    var state = {open: true}

## coffee-react-browser-script-tag.html
<!DOCTYPE html>
<html>
<head>
  <title>CJSX in a script tag</title>
  <script src="https://fb.me/react-0.13.2.js"></script>
  <script type="text/javascript" src="https://wzrd.in/standalone/coffee-react-browser"></script>
  <script type="text/cjsx">
    # defining a component
    class Clock extends React.Component
      @defaultProps = interval: 2000

## ReactNativeRefreshableListView.js
// for an updated version see https://github.com/jsdf/react-native-refreshable-listview

var React = require('react-native')
var {
  ListView,
  ActivityIndicatorIOS,
  StyleSheet,
  View,
  Text,
} = React

## ReactNativeFaye.js
// make sure you npm install 'url' (the browserify port of the node api url module)
var url = require('url')
var Faye = require('faye/browser/faye-browser')

var API_URL = 'http://localhost:8000/faye'

// initialise fake window.location - same origin as api host
// required to use some faye transports which expect to deal with same-origin policy.
// url.parse return value looks kind of like window.location, if you squint just right
window.location = url.parse(API_URL)

## ReactNativeHTML.js
var React = require('react-native')
var {
  View,
  Text,
  LinkingIOS,
  StyleSheet,
} = React

// you might want to compile these two as standalone umd bundles
// using `browserify --standalone` and `derequire`

## Isomorphic React.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                jsdf
                / Isomorphic React.md
            
            
              Last active
              August 29, 2015 14:16
            
              
                Isomorphic React notes
              
          
    Isomorphic React

What is it


same code on the client and server
usable by non-JS clients (crawlers etc)
initially render app on the server, then run client side
'portable' Javascript

Why do it


SEO


## node-sprockets
#!/usr/bin/env node

var crypto = require('crypto')
var path = require('path')
var fs = require('fs')

function hash(input, algorithm, encoding) {
  return crypto
    .createHash(algorithm || 'md5')
    .update(input, 'utf8')
	import React from 'react/addons';

	export default function shallowRender(element) {
	const shallowRenderer = React.addons.TestUtils.createRenderer();
	shallowRenderer.render(element);
	return shallowRenderer.getRenderOutput();
	}
	// A useful way of thinking about how the value of 'this' is bound in Javascript
	// functions is to imagine that Function.prototype.call is being used
	// implicitly at the call site to set the 'context' (the 'this' value). eg.

	// assuming in each case
	var o = {}
	var o2 = {}
	var fn = function(){}

	// 1. bare function call
	let UsernameField = (() => {
	const _username = Symbol();
	const _handleNameChange = Symbol();

	return class UsernameField extends React.Component {
	state = {
	[_username]: 'DefaultUser',
	}

	[_handleNameChange] = (e) => {
	(function() {
	// attach all comment disclosers
	$('.comment').forEach(function(comment) {
	var commentRoot = closest(comment, '.athing')
	CommentDiscloser(commentRoot)
	})

	function CommentDiscloser(root) {
	// initial state
	var state = {open: true}
	<!DOCTYPE html>
	<html>
	<head>
	<title>CJSX in a script tag</title>
	<script src="https://fb.me/react-0.13.2.js"></script>
	<script type="text/javascript" src="https://wzrd.in/standalone/coffee-react-browser"></script>
	<script type="text/cjsx">
	# defining a component
	class Clock extends React.Component
	@defaultProps = interval: 2000
	// for an updated version see https://github.com/jsdf/react-native-refreshable-listview

	var React = require('react-native')
	var {
	ListView,
	ActivityIndicatorIOS,
	StyleSheet,
	View,
	Text,
	} = React
	// make sure you npm install 'url' (the browserify port of the node api url module)
	var url = require('url')
	var Faye = require('faye/browser/faye-browser')

	var API_URL = 'http://localhost:8000/faye'

	// initialise fake window.location - same origin as api host
	// required to use some faye transports which expect to deal with same-origin policy.
	// url.parse return value looks kind of like window.location, if you squint just right
	window.location = url.parse(API_URL)
	#!/usr/bin/env node

	var crypto = require('crypto')
	var path = require('path')
	var fs = require('fs')

	function hash(input, algorithm, encoding) {
	return crypto
	.createHash(algorithm \|\| 'md5')
	.update(input, 'utf8')