Material UI Base Fiddle
HTML
<script src="https://fb.me/react-with-addons-15.2.1.js"></script>
<script src="https://fb.me/react-dom-15.2.1.js"></script>
<script src="https://rawgit.com/nathanmarks/3f5196f5973e3ff7807f2bab4e603a37/raw/f409f3bf5902c211b358a3ebe7b6cd366da551e8/mui-umd.js"></script>
<script src="react-redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.3.1/redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js"></script>
<div id="container"></div>
Babel + JSX
const {MuiThemeProvider, getMuiTheme, TextField} = MaterialUI;
const {connect} = ReactRedux;
const {createStore} = Redux;
const {Provider} = ReactRedux;
function mapStateToProps(state = {}, ownProps) {
var dataKey = ownProps.dataKey;
return {
value: state[dataKey],
dataKey: undefined
}
}
const mapDispatchToProps = (dispatch, ownProps) => {
return {}
};
const PropsShowerV = React.createClass({
render: function () {
return <div>{JSON.stringify(this.props)}</div>
}
});
const reducer = (s)=> {
return s
};
const store = createStore(reducer, {stuff: 123});
var PropsShower = connect(mapStateToProps, mapDispatchToProps)(PropsShowerV);
var TextInput = connect(mapStateToProps, mapDispatchToProps)(TextField);
ReactDOM.render(
<Provider store={store}>
<MuiThemeProvider muiTheme={getMuiTheme()}>
<div>
<PropsShower name="foo" dataKey="stuff"/>
<TextInput name="bar" dataKey="stuff"/>
</div>
</MuiThemeProvider>
</Provider>,
document.getElementById('container')
);