sebmarkbage

import { Component } from "React";

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

prestonparris

Reactjs conf 2015 Notes

• react native announced

  • Allows you to use react style javascript to target native ios and android, native views, live reloading
  • intro pt1
  • intro pt2
  • facebook groups app uses react native with graphql and relay

• realtime page tweaking

  • rethink best practices and workflows

• inmutability is a good idea

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

lettertwo

path = require 'path'
webpack = require 'webpack'
fs = require 'fs'
ExtractTextPlugin = require 'extract-text-webpack-plugin'
ProgressPlugin = require 'webpack/lib/ProgressPlugin'
flag = require 'node-env-flag'
settings = require './src/settings'


scriptExportsLoader = path.join __dirname, 'script-exports-loader'

ryanflorence

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

ryanflorence

var Dialog = React.createClass({
  mixins: [Portal],

  createPortal: function() {
    this.dialog = $(this.portalNode).dialog({
      autoOpen: false,
      title: this.props.title,
      close: this.props.onClose
    }).data('ui-dialog');
  },

ryanflorence

var Popover = React.createClass({
  render: function() {
    // break this rendering tree
    return null;
  },

  componentDidMount: function() {
    var node = this.node = document.createElement('div');
    // append a node to render into later
    document.body.appendChild(node);

ryanflorence

var Dialog = React.createClass({
  render: function() {
    // 1) render nothing, this way the DOM diff will never try to do
    //    anything to it again, and we get a node to mess with
    return React.DOM.div();
  },

  componentDidMount: function() {
    // 2) do DOM lib stuff
    this.node = this.getDOMNode();

mathisonian

The final result: require() any module on npm in your browser console with browserify

This article is written to explain how the above gif works in the chrome (and other) browser consoles. A quick disclaimer: this whole thing is a huge hack, it shouldn't be used for anything seriously, and there are probably much better ways of accomplishing the same.

Update: There are much better ways of accomplishing the same, and the script has been updated to use a much simpler method pulling directly from browserify-cdn. See this thread for details: mathisonian/requirify#5

inspiration

esnunes

var Promise = require('es6-promise').Promise;


var handlerA = function () {
  return waitFor([handlerB])
    .then(function () {
      console.log('handlerA');
    });
};
var handlerB = function () {