Exploring how React components could be used to provide similar simple configuration (for lookups, inquiries, maintenance) for rapid screen creation

React Lookup

/**
 * @jsx React.DOM
 */
var React = require('react');
var Lookup = require('./lookup.jsx');

var CourseLookup = React.createClass({
    getInitialState: function () {
        return {
            // this could be expanded out to include any config necessary
            searchConfig : {
                title: 'Course Lookup',
                // could be left blank to use default rest provider like Peter was creating
                serviceEndpoint: '/courseSearch',
                criteria: [
                    {
                        name: 'courseTitle',
                        label: 'Title',
                        control: 'text'
                    },
                    {
                        name: 'courseSection',
                        label: 'Section',
                        control: 'text'
                    }
                ],
                results: ['courseId', 'courseTitle', 'courseSection', 'courseDescription']
            }
        };
    },
    // we could also bring this in with a mixin
    render: function () {
        return (
           <Lookup config={this.state.searchConfig}/>
        );
    }
});

React.renderComponent(CourseLookup, document.getElementById('main'));