diff --git a/examples/browserify-gulp-example/gulp/config.js b/examples/browserify-gulp-example/gulp/config.js index 6646e0de91b32a..7cb623aa678df4 100644 --- a/examples/browserify-gulp-example/gulp/config.js +++ b/examples/browserify-gulp-example/gulp/config.js @@ -26,6 +26,7 @@ module.exports = { entries: src + '/app/app.jsx', dest: dest, outputName: 'app.js' - }] + }], + extensions: ['.jsx'], } }; diff --git a/examples/browserify-gulp-example/src/app/app.jsx b/examples/browserify-gulp-example/src/app/app.jsx index 384bce3aacf60b..a4775ddebeba70 100644 --- a/examples/browserify-gulp-example/src/app/app.jsx +++ b/examples/browserify-gulp-example/src/app/app.jsx @@ -1,20 +1,14 @@ -(function () { - let React = require('react'); - let ReactDOM = require('react-dom'); - let injectTapEventPlugin = require('react-tap-event-plugin'); - let Main = require('./components/main.jsx'); // Our custom react component - - //Needed for React Developer Tools - window.React = React; - - //Needed for onTouchTap - //Can go away when react 1.0 release - //Check this repo: - //https://github.com/zilverline/react-tap-event-plugin - injectTapEventPlugin(); - - // Render the main app react component into the app div. - // For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render - ReactDOM.render(
, document.getElementById('app')); - -})(); +import React from 'react'; +import ReactDOM from 'react-dom'; +import injectTapEventPlugin from 'react-tap-event-plugin'; +import Main from './components/main'; // Our custom react component + +//Needed for onTouchTap +//Can go away when react 1.0 release +//Check this repo: +//https://github.com/zilverline/react-tap-event-plugin +injectTapEventPlugin(); + +// Render the main app react component into the app div. +// For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render +ReactDOM.render(
, document.getElementById('app')); diff --git a/examples/browserify-gulp-example/src/app/components/main.jsx b/examples/browserify-gulp-example/src/app/components/main.jsx index cc84b2ff026fc6..b056ed649e8ab6 100644 --- a/examples/browserify-gulp-example/src/app/components/main.jsx +++ b/examples/browserify-gulp-example/src/app/components/main.jsx @@ -1,19 +1,30 @@ /** In this file, we create a React component which incorporates components provided by material-ui */ -const React = require('react'); -const RaisedButton = require('material-ui/lib/raised-button'); -const Dialog = require('material-ui/lib/dialog'); -const ThemeManager = require('material-ui/lib/styles/theme-manager'); -const LightRawTheme = require('material-ui/lib/styles/raw-themes/light-raw-theme'); -const Colors = require('material-ui/lib/styles/colors'); +import React from 'react'; +import RaisedButton from 'material-ui/lib/raised-button'; +import Dialog from 'material-ui/lib/dialog'; +import ThemeManager from 'material-ui/lib/styles/theme-manager'; +import LightRawTheme from 'material-ui/lib/styles/raw-themes/light-raw-theme'; +import Colors from 'material-ui/lib/styles/colors'; + +const containerStyle = { + textAlign: 'center', + paddingTop: 200, +}; + +const standardActions = [ + { + text: 'Okay', + }, +]; const Main = React.createClass({ childContextTypes: { - muiTheme: React.PropTypes.object + muiTheme: React.PropTypes.object, }, - getInitialState () { + getInitialState() { return { muiTheme: ThemeManager.getMuiTheme(LightRawTheme), }; @@ -27,45 +38,41 @@ const Main = React.createClass({ componentWillMount() { let newMuiTheme = ThemeManager.modifyRawThemePalette(this.state.muiTheme, { - accent1Color: Colors.deepOrange500 + accent1Color: Colors.deepOrange500, }); this.setState({muiTheme: newMuiTheme}); }, - render() { - - let containerStyle = { - textAlign: 'center', - paddingTop: '200px' - }; + _handleRequestClose() { + this.setState({ + open: false, + }); + }, - let standardActions = [ - { text: 'Okay' } - ]; + _handleTouchTap() { + this.setState({ + open: true, + }); + }, + render() { return (
+ onRequestClose={this._handleRequestClose} + > 1-2-3-4-5 -

material-ui

example project

- -
); }, - - _handleTouchTap() { - this.refs.superSecretPasswordDialog.show(); - } - }); -module.exports = Main; +export default Main; diff --git a/examples/webpack-example/src/app/app.jsx b/examples/webpack-example/src/app/app.jsx index 91abba3efe2988..a4775ddebeba70 100644 --- a/examples/webpack-example/src/app/app.jsx +++ b/examples/webpack-example/src/app/app.jsx @@ -1,20 +1,14 @@ -(function() { - let React = require('react'); - let ReactDOM = require('react-dom'); - let injectTapEventPlugin = require('react-tap-event-plugin'); - let Main = require('./components/main'); // Our custom react component - - //Needed for React Developer Tools - window.React = React; - - //Needed for onTouchTap - //Can go away when react 1.0 release - //Check this repo: - //https://github.com/zilverline/react-tap-event-plugin - injectTapEventPlugin(); - - // Render the main app react component into the app div. - // For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render - ReactDOM.render(
, document.getElementById('app')); - -})(); +import React from 'react'; +import ReactDOM from 'react-dom'; +import injectTapEventPlugin from 'react-tap-event-plugin'; +import Main from './components/main'; // Our custom react component + +//Needed for onTouchTap +//Can go away when react 1.0 release +//Check this repo: +//https://github.com/zilverline/react-tap-event-plugin +injectTapEventPlugin(); + +// Render the main app react component into the app div. +// For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render +ReactDOM.render(
, document.getElementById('app')); diff --git a/examples/webpack-example/src/app/components/main.jsx b/examples/webpack-example/src/app/components/main.jsx index 4f3869d0381b76..b056ed649e8ab6 100644 --- a/examples/webpack-example/src/app/components/main.jsx +++ b/examples/webpack-example/src/app/components/main.jsx @@ -1,11 +1,22 @@ /** In this file, we create a React component which incorporates components provided by material-ui */ -const React = require('react'); -const RaisedButton = require('material-ui/lib/raised-button'); -const Dialog = require('material-ui/lib/dialog'); -const ThemeManager = require('material-ui/lib/styles/theme-manager'); -const LightRawTheme = require('material-ui/lib/styles/raw-themes/light-raw-theme'); -const Colors = require('material-ui/lib/styles/colors'); +import React from 'react'; +import RaisedButton from 'material-ui/lib/raised-button'; +import Dialog from 'material-ui/lib/dialog'; +import ThemeManager from 'material-ui/lib/styles/theme-manager'; +import LightRawTheme from 'material-ui/lib/styles/raw-themes/light-raw-theme'; +import Colors from 'material-ui/lib/styles/colors'; + +const containerStyle = { + textAlign: 'center', + paddingTop: 200, +}; + +const standardActions = [ + { + text: 'Okay', + }, +]; const Main = React.createClass({ @@ -33,39 +44,35 @@ const Main = React.createClass({ this.setState({muiTheme: newMuiTheme}); }, - render() { - - let containerStyle = { - textAlign: 'center', - paddingTop: '200px', - }; + _handleRequestClose() { + this.setState({ + open: false, + }); + }, - let standardActions = [ - {text: 'Okay'}, - ]; + _handleTouchTap() { + this.setState({ + open: true, + }); + }, + render() { return (
+ onRequestClose={this._handleRequestClose} + > 1-2-3-4-5 -

material-ui

example project

- -
); }, - - _handleTouchTap() { - this.refs.superSecretPasswordDialog.show(); - }, - }); -module.exports = Main; +export default Main;