pbaio

<?xml version="1.0" encoding="utf-8"?>

<configuration>
    <appSettings>
        <!--
            All appSettings are made available to your Node.js app via environment variables
            You can access them in your app through the process.env object.
            
            process.env.<key>
        -->

jlongster

// Have some complicated non-React widgets that manipulate DOM?
// Do they manage a list of DOM elements? Here's how to wrap it
// into a React component so you can "constantly rerender" it.

// A dumb non-react widget that manually manage some DOM node that
// represent a list of items
function NonReactWidget(node) {
  this.node = node;
}

therealklanni

repeat(a) -> [a]

Inspired by Haskell, I wanted to see if I could replicate, using ES6 features, the repeat function:

repeat :: a -> [a]

So as you can see in repeat.js, I have done exactly that. However there are some caveats.

chantastic

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

ryanflorence

// with static data, do filtering and sorting in the client
<Autocomplete
  initialValue="Ma"
  items={getUnitedStates()}
  getItemValue={(item) => item.name}
  shouldItemRender={(item, value) => (
    state.name.toLowerCase().indexOf(value.toLowerCase()) !== -1 ||
    state.abbr.toLowerCase().indexOf(value.toLowerCase()) !== -1
  )}
  sortItems={(a, b, value) => (

jquense

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

jlongster

  // Simple wrapper to use bootstrap's grid system to position elements side-by-side
  var VerticalFieldsElement = React.createClass({
    render: function() {
      return dom.div(
        { className: 'clearfix' },
        React.Children.map(this.props.children, function(child) {
          if(!child) {
            return child;
          }

samwgoldman

/* @flow */

var React = require("react")
var Immutable = require("immutable")

// In order to use any type as props, including Immutable objects, we
// wrap our prop type as the sole "data" key passed as props.
type Component<P> = ReactClass<{},{ data: P },{}>
type Element = ReactElement<any, any, any>

jsdf

// for an updated version see https://github.com/jsdf/react-native-refreshable-listview

var React = require('react-native')
var {
  ListView,
  ActivityIndicatorIOS,
  StyleSheet,
  View,
  Text,
} = React

ryanflorence

var pureRender = (Component) => {
  Object.assign(Component.prototype, {
    shouldComponentUpdate (nextProps, nextState) {
      return !shallowEqual(this.props, nextProps) ||
             !shallowEqual(this.state, nextState);
    }
  });
};

module.exports = pureRender;