gaearon

import React, { Component } from 'react';
import { createStore, combineReducers, applyMiddleware, bindActionCreators } from 'redux';
import { provide, connect } from 'react-redux';
import thunk from 'redux-thunk';

const AVAILABLE_SUBREDDITS = ['apple', 'pics'];

// ------------
// reducers
// ------------

chenglou

key is pretty much crucial for state perservation in React. As of React 0.13 it can't do the following things:

• Clone state

<Comp key={1} /><Comp key={1} />

• Preserve component state across different parents:

threepointone

// store.js
let {store, handler} = sto(initialState, reduceFn);   // where reduceFn: function(currentState, action, ...args){}

dispatcher.register(handler);
export store;

// elsewhere
store.get()  // -> current state

store.toObservable() // -> to be used with .observe()

alexeisavca

var React = require('react/addons');
var ReactIgnore = {
    displayName: 'ReactIgnore',
    shouldComponentUpdate (){
        return false;
    },

    render (){
        return React.Children.only(this.props.children);
    }

fdecampredon

// in this first option events handlers are just RxJs functor Subject
// those subject are passed down to the render function and are manually injected into
// the properties of react component


var RxReact = require('rx-react');
var React = require('react');

gaearon

// Usage example:
//
// willTransitionTo(transition, params, query, callback) {
//   observeStore(DraftStore, s => s.isLoaded()).then(() => {
//     if (DraftStore.isMissingTitle()) {
//       transition.redirect('composeDraft', params);
//     }
//   }).finally(callback);
// }

insin

{
  "browser": true,
  "node": true,

  "curly": true,
  "devel": true,
  "globals": {
    "ActiveXObject": true,
    "async": true,
    "moment": true,

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

gaearon

'use strict';

var React = require('react'),
    classSet = require('react/lib/cx'),
    _ = require('underscore');

var ClassNameMixin = {
  propTypes: {
    className: React.PropTypes.string,
    context: React.PropTypes.string

sebmarkbage

Deprecating transferPropsTo

It's a common pattern in React to wrap a component in an abstraction. The outer component exposes a simple property to do something that might have more complex implementation details.

We used to have a helper function called transferPropsTo. We no longer support this method. Instead you're expected to use a generic object helper to merge props.

render() {
 return Component(Object.assign({}, this.props, { more: 'values' }));