wincent

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

coodoo

# 內容
	
	# repo 位置
		- https://github.com/facebook/react
		- https://github.com/facebook/flux

	# 官網

		- React
			* http://facebook.github.io/react/

max-mapper

<div><a href="http://jsforcats.com/">JS for cats</a></div>
<div><a href="https://github.com/maxogden/art-of-node#the-art-of-node">Art of Node</a></div>
<div><a href="http://github.com/substack/node-browserify"><img src="talk/browserify.png"></a></div>
<div>javascript should run everywhere</div>
<div><img src="talk/require.png"></div>
<div><img src="talk/venn.png"></div>
<div>browserify + npm = ♥</div>
<div>npm = client side + server side modules in one registry</div>
<div><a href="http://github.com/substack/browserify-handbook">browserify-handbook</a></div>
<div><a href="http://npmjs.org/browserify-adventure">browserify-adventure</a></div>

sebmarkbage

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

addyosmani

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

sebmarkbage

React Element Factories and JSX

You probably came here because your code is calling your component as a plain function call. This is now deprecated:

var MyComponent = require('MyComponent');

function render() {
 return MyComponent({ foo: 'bar' }); // WARNING

staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

danharper

@usingPerRow(4)

@foreach ($images as $image)
	@incrementPerRow()

	@whenStartOfRow
		<tr>
	@closeStartOfRow

	<td><img src="{{ $image->url }}"></td>

branneman

Better local require() paths for Node.js

Problem

When the directory structure of your Node.js application (not library!) has some depth, you end up with a lot of annoying relative paths in your require calls like:

const Article = require('../../../../app/models/article');

Those suck for maintenance and they're ugly.

Possible solutions

bomberstudios

NOTE: the list has moved to https://github.com/sketchplugins/plugin-directory

Sketch Plugins

A list of Sketch plugins hosted at GitHub, in no particular order.

• brandonbeecroft/Lorem-Ipsum-Plugin-for-Sketch This is a plugin for quickly creating Lorem Ipsum text in Sketch
• sebj/Sketch Templates and Plugins for Sketch by Bohemian Coding
• FredericJacobs/crop_Artboard A script to export the Sketch App artboards to the clipboard
• almonk/SketchGit A simple Git client built right into Sketch.