JSFiddle - React, Tailwind, and code Playground

by Dustin Getz

HTML

<script src="http://fb.me/react-with-addons-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js "></script>
<script src="https://rawgithub.com/kendo-labs/bower-kendo-ui/master/js/kendo.web.min.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/kendo-labs/bower-kendo-ui/master/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://rawgithub.com/kendo-labs/bower-kendo-ui/master/styles/kendo.default.min.css">
<script src="https://rawgithub.com/wingspan/wingspan-forms/dist/dist/wingspan-forms-quickstart.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/wingspan/wingspan-forms/dist/dist/wingspan-forms.css">
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

.MyForm{display:table;padding:10px}.MyForm>div{display:table-row}.MyForm>div>div{display:table-cell;width:50%;padding:10px}.MyForm>div>pre{display:table-cell;vertical-align:top;padding:10px}

JavaScript 1.7

/** @jsx React.DOM */
'use strict';
var SimpleFormMetadata = {
    firstName: { label: 'First Name' },
    lastName: { label: 'Last Name' },
    gender: { label: 'Gender' },
    age: { label: 'Age' },
    birthday: { label: 'Birthday'}
};

var MyForm = React.createClass({

    genderOptions: [{ value: 'male', label: 'Male'}, { value: 'female', label: 'Female'}],

    getInitialState: function () {
        return {
            firstName: '',
            lastName: '',
            gender: '',
            age: null,
            birthday: null
        };
    },

    render: function () {
        return (
            <div className="MyForm">
                <div>
                    <div>
                        <FormField fieldInfo={SimpleFormMetadata.firstName} isValid={this.isFieldValid('firstName')}>
                            <KendoText value={this.state.firstName} onChange={_.partial(this.onFieldChange, 'firstName')} />
                        </FormField>

                        <FormField fieldInfo={SimpleFormMetadata.lastName} isValid={this.isFieldValid('lastName')}>
                            <KendoText value={this.state.lastName} onChange={_.partial(this.onFieldChange, 'lastName')} />
                        </FormField>

                        <FormField fieldInfo={SimpleFormMetadata.gender} isValid={this.isFieldValid('gender')}>
                            <KendoComboBox
                                dataSource={this.genderOptions}
                                displayField="label"
                                valueField="value"
                                value={this.state.gender}
                                onChange={_.partial(this.onFieldChange, 'gender')} />
                        </FormField>

                        <FormField fieldInfo={SimpleFormMetadata.age} isValid={this.isFieldValid('age')}>
                            <KendoNumber spinners={true} value={this.state.age} onChange={_.partial(this.onFieldChange, 'age')} />
     ...