Skip to content

Instantly share code, notes, and snippets.

@cornedor

cornedor/index.html

Created June 2, 2015 10:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save cornedor/0e4de9e8eb98fc0a3888 to your computer and use it in GitHub Desktop.
Save cornedor/0e4de9e8eb98fc0a3888 to your computer and use it in GitHub Desktop.
Download ZIP
Simple React+Material UI example
Raw
index.html
<!doctype html>
<html>
<title>Minimal React/Material test</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
<div id="holder"></div>
<script src="bundle.js"></script>
</html>
Raw
main.js
require("react-tap-event-plugin")();
var React = require("react/addons");
var mui = require("material-ui");
var ThemeManager = require("material-ui/lib/styles/theme-manager")();
var Colors = require("material-ui/lib/styles/colors");
var RaisedButton = mui.RaisedButton;
var Paper = mui.Paper;
var Something = require("./components/something");
var App = React.createClass({
childContextTypes: {
muiTheme: React.PropTypes.object
},
getChildContext() {
return {
muiTheme: ThemeManager.getCurrentTheme()
};
},
componentWillMount() {
ThemeManager.setPalette({
accent1Color: Colors.deepOrange500
});
},
getInitialState() {
return {
helloWhat: "World",
clickCount: 0
}
},
render() {
return <Paper zDepth={this.state.clickCount % 6} style={{ padding: "20px", width: "200px", margin: "0 auto" }}>
<p>Click count: {this.state.clickCount}</p>
<RaisedButton label={`Hello ${this.state.helloWhat}!`} onTouchTap={this._onButtonTouch} />
<Something />
</Paper>;
},
_onButtonTouch() {
this.setState({
helloWhat: "you",
clickCount: this.state.clickCount + 1
});
}
});
React.render(<App />, document.querySelector("#holder"));
Raw
package.json
{
"name": "minimaterial",
"version": "0.1.0",
"description": "Minimal react/material design example",
"main": "src/main.js",
"scripts": {
"watch": "watchify src/main.js -t reactify -o bundle.js ",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Corné Dorrestijn",
"license": "MIT",
"devDependencies": {
"material-ui": "^0.8.0",
"react": "^0.13.3",
"react-tap-event-plugin": "^0.1.7",
"reactify": "^1.1.1"
}
}
Raw
something.js
var React = require("react/addons");
var mui = require("material-ui");
var Paper = mui.Paper;
var Something = React.createClass({
render() {
var styles = {
margin: "20px 0 0 0",
padding: "20px",
transform: "rotate(180deg)"
};
return <Paper zDepth={2} style={styles}>
This is a Something
</Paper>
}
});
module.exports = Something;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment