snippets of react

react.md

foobar

import React, { PropTypes } from 'react';
import { StyleSheet, css } from 'aphrodite/no-important';
import { spacing } from '../../styles/base/spacing';

// CSS in JS
const styles = StyleSheet.create({
  card: {
    // looks just like css would
    background: 'rgba(255, 255, 255, 1.0)',
    // but you get the benefits of the imperative language
    width: A_CONSTANT + I_CAN_ADD - with_complicated_functions(WITH_ARGS), 
    // e.g. sharing constants from modules and namespaces
    padding: spacing.space4, 
    // back to traditional CSS
    boxShadow: '0 3px 17px 2px rgba(0, 0, 0, .05)', 
    borderRadius: '3px',
  },
});

// HTML in JS
class Card {
  render() {
    return (
      // JSX extends the JS syntax to enable embedding XML-like things.
      <div className={css(styles.card)}>
        // {} enables you to jump back to programatic javascript
        {this.props.disabled ? "I am disabled" : "I am enabled!"}
      </div>
    );
  }
}