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.
Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).
var ParallaxManager, ParallaxPart; | |
ParallaxPart = (function() { | |
function ParallaxPart(el) { | |
this.el = el; | |
this.speed = parseFloat(this.el.getAttribute('data-parallax-speed')); | |
this.maxScroll = parseInt(this.el.getAttribute('data-max-scroll')); | |
} | |
ParallaxPart.prototype.update = function(scrollY) { |
In React's terminology, there are five core types that are important to distinguish:
React Elements
.SVGIcon { | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
/* fix webkit/blink poor rendering issues */ | |
transform: translate3d(0,0,0); | |
/* it's better defined directly because of the cascade shit | |
width: inherit; | |
height: inherit; |
A list of the most common functionalities in Jekyll (Liquid). You can use Jekyll with GitHub Pages, just make sure you are using the proper version.
Running a local server for testing purposes:
(function(d) { | |
var tkTimeout=3000; | |
if(window.sessionStorage){if(sessionStorage.getItem('useTypekit')==='false'){tkTimeout=0;}} | |
var config = { | |
kitId: 'a1b2c3f4', | |
scriptTimeout: tkTimeout | |
}, | |
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";if(window.sessionStorage){sessionStorage.setItem("useTypekit","false")}},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='//use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s) | |
})(document); |
/** @jsx React.DOM */ | |
'use strict'; | |
var Group = React.addons.TransitionGroup; | |
var Item = React.createClass({ | |
componentWillEnter: function(done) { | |
this.props.componentWillEnter(); | |
done(); |
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?language=fra&sensor=false"></script> | |
<script type="text/javascript"> | |
var map; | |
var Markers = {}; | |
var infowindow; | |
var locations = [ | |
[ | |
'Samsung Store Madeleine', | |
'<strong>Samsung Store Madeleine</strong><p>5 Boulevard Malesherbes, 75008 Paris<br>10h – 20h</p>', | |
48.8701925, |