Andrew Rota andrewrota

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 {

2015-01-29 Unofficial Relay FAQ

Compilation of questions and answers about Relay from React.js Conf.

Disclaimer: I work on Relay at Facebook. Relay is a complex system on which we're iterating aggressively. I'll do my best here to provide accurate, useful answers, but the details are subject to change. I may also be wrong. Feedback and additional questions are welcome.

What is Relay?

Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).

Auto-deploying built products to gh-pages with GitHub Actions

This is a set up for projects which want to check in only their source files, but have their gh-pages branch automatically updated with some compiled output every time they push.

A file below this one contains the steps for doing this with Travis CI. However, these days I recommend GitHub Actions, for the following reasons:

It is much easier and requires less steps, because you are already authenticated with GitHub, so you don't need to share secret keys across services like you do when coordinate Travis CI and GitHub.
It is free, with no quotas.
Anecdotally, builds are much faster with GitHub Actions than with Travis CI, especially in terms of time spent waiting for a builder.

Lower Case JSX Convention

All lower case JSX tags will now be treated as HTML/SVG elements. They will no longer be treated as custom components in scope.

The React element produced by JSX can be either a React class that exists in the local scope or a global scope HTML/SVG element depending on a convention.

Previous Behavior

Currently, when you use React JSX to define a HTML element you can use any known HTML tag. E.g:

http://stackoverflow.com/questions/24380159/corebluetooth-and-wifi-interference

http://lists.apple.com/archives/bluetooth-dev/2013/Aug/msg00023.html

This is a well known issue, and it has a solution that is confirmed to work for the Mac side.

sudo defaults write /Library/Preferences/com.apple.airport.bt.plist bluetoothCoexMgmt Hybrid

After you run this script, the issue will go away and BT connections will remain stable.

ES7 Class Properties

**~~ NOTE: This is a Stage 0 proposal. ~~**

This proposal has been moved to https://github.com/jeffmo/es-class-properties.

Please direct all future feedback to that repo in the form of directed issues.

	import { Component } from "React";

	export var Enhance = ComposedComponent => class extends Component {
	constructor() {
	this.state = { data: null };
	}
	componentDidMount() {
	this.setState({ data: 'Hello' });
	}
	render() {

	// Exploring using "expose React component tree as data" @swannodette
	// (https://www.youtube.com/watch?v=5hGHdETNteE#t=1559)
	// for routing and fetching data ("react-router-mega-demo" @ryanflorence)
	// (https://github.com/rackt/react-router-mega-demo/blob/master/app/utils/fetchData.js)

	var appState = {
	route: '/contacts',
	contacts: [],
	messages: []
	};

	function makeStyle(defaults, tagName) {
	tagName = tagName \|\| 'div';
	var Style = React.createClass({
	getDefaultProps: function() {
	return assign({}, defaults);
	},

	render: function() {
	var style = assign({}, this.props);
	delete style.children;

	/**
	*
	* PATCH to make React work with custom attributes.
	*
	*/
	HTMLDOMPropertyConfig.isCustomAttribute = function(attr) {
	// Strip off custom attributes React puts for its working.
	if ({children: 1}[attr]) { return false; }

	// Take any attribute (with correct syntax) as custom attribute.