Andrew Rota andrewrota

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:

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.

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).

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 {

React makes compositing components easy. However testing them can get ugly if you are not careful. Consider this example:

var ChildA = React.createClass({
    displayName: "ChildA",
    render: function(){
        return (<div>A in the house</div>);
    }
});

React-Core Meeting Notes 2015-03-20

Note: This is the first time we're sharing meeting notes publicly. The primary reason we haven't shared these is because we often mix public discussions with matters that are Facebook specific and should not be public. We're really trying to be more open about our development process and what's happening inside the project so moving forward, we'll be sharing meeting notes. While most of us do work at Facebook, we're committed to this being an open project - for now we'll filter out the private notes from the public notes. Hopefully we can make it possible for these meetings to be open to any who wish to attend.

Attendees:

@zpao
@sebmarkbage
@spicyj
@jeffmo

	/**
	*
	* 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.

	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;

	// 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: []
	};

	import { Component } from "React";

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