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' }));

gaearon

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

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:

gaearon

import { combineReducers } from 'redux';
import users from './reducers/users';
import posts from './reducers/posts';

export default function createReducer(asyncReducers) {
  return combineReducers({
    users,
    posts,
    ...asyncReducers
  });

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
// ------------

tlrobinson

// give it a name so it reuses the same window
var win = window.open(null, "redux-devtools", "menubar=no,location=no,resizable=yes,scrollbars=no,status=no");

// reload in case it's reusing the same window with the old content
win.location.reload();

// wait a little bit for it to reload, then render
setTimeout(function() {
    React.render(
        <DebugPanel top right bottom left >

gaearon

// While I claim this is a drop-in replacement, it is a little bit slower.
// If you have hundreds of links, you might spend a few more milliseconds rendering the page on transitions.

// KNOWN ISSUES WITH THIS APPROACH:

// * This doesn't work great if you animate route changes with <TransitionGroup>
//   because the links are going to get updated immediately during the animation.
// * This might still not update the <Link> correctly for async routes,
//   as explained in https://github.com/reactjs/react-router/issues/470#issuecomment-217010985.

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

halfzebra

This gist is a proposal for lightning talk at Reactive Conf 2017

Like the idea? Give me a 🌟 and see you in Bratislava!

How Create React App changed the way I work

Hello, my name is Eduard!

I'm the maintainer of Create Elm App and contributor to Create React App and Webpack

evanrs

This is a proposal for a lightning talk I would give at the Reactive 2015 conference.

NOTE: If you like it, put a star ⭐ on it—the number of stars decides if it makes the cut!

Rewriting history with predicates

Redux provides a simple pattern for managing application state. As demonstrated in Dan Abramov's talk following this pattern lets you painlessly implement simple undo and time travel. By keeping a history of actions, and reducing a subset