tmbtech

$ cd /usr/local
$ git checkout b64d9b9c431642a7dd8d85c8de5a530f2c79d924 Library/Formula/node.rb
$ brew unlink node
$ brew install node
$ npm install -g npm@latest

tmbtech

React.createClass({
    render() {
        let videos = this.props.videos.size > 0 ? this.props.videos.map(video => {
            return (
                <li key={video.id}>
                   <a href={video.desc}>{video.headline}</a>
                </li>
            );
        }) : <li> no data found </li>;

tmbtech

import React from "react";
import {ContextTypes, DefaultProps, PropTypes} from "./Decorators";

// this will throw a warning.
@PropTypes({name: React.PropTypes.func})
@DefaultProps({name: "robbie"})
class BaseClass extends React.Component {
    render() {
        return (
            <div className="base-class-example">

tmbtech

// Promise.all is good for executing many promises at once
Promise.all([
  promise1,
  promise2
]);

// Promise.resolve is good for wrapping synchronous code
Promise.resolve().then(function () {
  if (somethingIsNotRight()) {
    throw new Error("I will be rejected asynchronously!");

tmbtech

If you've reached this page, it's probably because your "parent-based and owner-based contexts differ".

As we've been iterating on React's "context" feature, we've discovered that the parent-based relationship is more useful than the owner-based relationship, so we're migrating to use a parent-based hierarchy.

In short, the owner of a component is whomever creates the component, while the parent of a component is whomever would be the containing ancestor in the DOM hierarchy. To learn more about the owner relationship, see the docs here: http://facebook.github.io/react/docs/multiple-components.html

In many cases, the owner and the parent are the same node, in which case, no further action is necessary. However, if your owner and your parent differ, you should ensure that the context variables you're using aren't going to break when we switch from owner-based contexts to parent-based contexts. If you're seeing the warning, your component may not be ready for the switch.

NOTE: semantically-equal context var

tmbtech

The 0.13.0 improvements to React Components are often framed as "es6 classes" but being able to use the new class syntax isn't really the big change. The main thing of note in 0.13 is that React Components are no longer special objects that need to be created using a specific method (createClass()). One of the benefits of this change is that you can use the es6 class syntax, but also tons of other patterns work as well!

Below are a few examples creating React components that all work as expected using a bunch of JS object creation patterns (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/ch4.md#mixins). All of the examples are of stateful components, and so need to delegate to React.Component for setState(), but if you have stateless components each patterns tends to get even simpler. The one major caveat with react components is that you need to assign props and context to the component instance otherwise the component will be static. The reason is

tmbtech

var React = require('react');
import HashHistory from 'react-router/lib/HashHistory';
var { Router, Route, Link, Navigation } = require('react-router');

var App = React.createClass({

  childContextTypes: {
    foo: React.PropTypes.object.isRequired
  },
  getChildContext() {

tmbtech

//saving from reactiflux channel, credit: pgwsmith.
export default function componentClassConnectedToStore(Component, store, storeIdentifier) {
    const ComponentWrapper = React.createClass({
        mixins: [Reflux.connect(store, storeIdentifier)],

        render() {
            return (
                <Component {...this.props} {...this.state} />
            );
        }

tmbtech

    <Router routes={routes}
      history={new BrowserHistory()}
      createElement={(Component, props) => {
        if (Component.fetchData) {
          dataFetchers[ Component.displayName ] = Component.fetchData.bind(Component, flux, props);
          clearTimeout(dataFetcherTimeout);
          dataFetcherTimeout = setTimeout(() => {
            Object.keys(dataFetchers).forEach(displayName => dataFetchers[ displayName ]());
            dataFetchers = {};
          }, 10);

tmbtech

class Index extends React.Component {
    componentDidMount() {
        const {branch: branches, location} = this.props;

        const component = branches.filter(branch => branch.childRoutes)
            .map(branch => branch.childRoutes.find(childRoute => childRoute.path === location.pathname))
            .reduce(element => element);

        console.log(component.foo); // LOG: bar
    }