gaearon

function mapValues(obj, fn) {
  return Object.keys(obj).reduce((result, key) => {
    result[key] = fn(obj[key], key);
    return result;
  }, {});
}

function pick(obj, fn) {
  return Object.keys(obj).reduce((result, key) => {
    if (fn(obj[key])) {

gaearon

// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
  // It lets us inject component as the last step so people can use it as a decorator.
  // Generally you don't need to worry about it.
  return function (WrappedComponent) {
    // It returns a component
    return class extends React.Component {
      render() {
        return (

insin

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

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

alekseykulikov

Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.

My 3 developers team has just developed React.js application with 7668 lines of CSS (and just 2 !important). During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.

Here are main principles we use to write CSS for modern (IE11+) browsers:

• SUIT CSS naming conventions + SUIT CSS design principles;
• PostCSS + CSSNext. Future CSS syntax like variables, nesting, and autoprefixer are good enough;
• Flexbox is awesome. No need for grid framework;
• Normalize.css, base styles and variables are solid foundation for all components;

alexeisavca

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

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

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

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

thevangelist

import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from '../src/my-component';

const wrapper = shallow(<MyComponent/>);

describe('(Component) MyComponent', () => {
  it('renders without exploding', () => {
    expect(wrapper).to.have.length(1);
  });

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