Mike Chau mikechau

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

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

Here's something to think about the next time you're twiddling your thumbs waiting for a bundle install or gem push command to finish running. Why did that take so long? Often we think of issues of speed solely in terms of the quality of our network connection and pay less attention to actual file sizes. I don't think anyone will argue, though, that given the same network speed, a 10MB file takes longer to download than a 100KB one. And if both did the exact same thing and you needed to download it and dozens of cousins like it, say, several times per week, wouldn't you prefer smaller?

Most of the gems we use on a daily basis weigh in at 2 - 36 times more than they need to. That's because, by default, they include a very important set of files for development that are unnecessary dead weight in a packaged gem — your tests. This issue filed by @sferik on the bundler gem does an excellent job of summing this up.

Fortunately, th

React (Virtual) DOM Terminology

In React's terminology, there are five core types that are important to distinguish:

ReactElement / ReactElement Factory
ReactNode
ReactComponent / ReactComponent Class

React Elements

	import React from 'react/addons';
	import {RouteHandler,Navigation,Link, State} from 'react-router';
	import {AuthenticationMixin} from '../mixins/authentication';

	import {IntlMixin} from 'react-intl';

	import SessionStore from '../stores/session_store';
	import NavBarHeader from '../components/Navbar';

	export default React.createClass({

	import {alt} from 'data/alt' // Alt instance

	let {PropTypes:Types, Component}= React // or require( 'react')

	export class Controller extends Component {
	// With babel 'playground' enabled, you can do this:
	// static propTypes= {
	// source: Types.any.isRequired,
	// provide: React.PropTypes.oneOfType([
	// React.PropTypes.object,

	.
	├── actions
	├── stores
	├── views
	│ ├── Anonymous
	│ │ ├── __tests__
	│ │ ├── views
	│ │ │ ├── Home
	│ │ │ │ ├── __tests__
	│ │ │ │ └── Handler.js

	/eslint-env browser/
	/**
	* Cribbed from:
	* github.com/facebook/react/blob/master/src/addons/ReactRAFBatchingStrategy.js
	* github.com/petehunt/react-raf-batching/blob/master/ReactRAFBatching.js
	*/

	var ReactUpdates = require('react/lib/ReactUpdates');

	var ReactRAFBatchingStrategy = {

	The MIT License (MIT)

	Copyright (c) 2014 Tomas Kafka

	Permission is hereby granted, free of charge, to any person obtaining a copy
	of this software and associated documentation files (the "Software"), to deal
	in the Software without restriction, including without limitation the rights
	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	copies of the Software, and to permit persons to whom the Software is
	furnished to do so, subject to the following conditions: