I was following the Facebook's react tutorial and was playing around with it. When i tried to integrate MDL with my page (from getmdl.io), its not working.
In my index.html; i have added links to their css and js files. I also installed mdl using npm.
My index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Tutorial</title>
<!-- Not present in the tutorial. Just for basic styling. -->
<link rel="stylesheet" href="css/base.css" />
<script src="http://ift.tt/1LFNtwt"></script>
<script src="http://ift.tt/1YcPqm7"></script>
<script src="http://ift.tt/1LFNwbT"></script>
<script src="http://ift.tt/1TswyyX"></script>
<script src="http://ift.tt/1LFNwbV"></script>
<!--Material design things getMdl-->
<link rel="stylesheet" href="http://ift.tt/1I7E37E">
<link rel="stylesheet" href="http://ift.tt/1YcPqmf">
<script defer src="http://ift.tt/1LFNwsb"></script>
</head>
<body>
<div id="content"></div>
<script type="text/javascript" src="client/public/bundle.js"></script>
</body>
</html>
In my index.jsx file, which is being converted to bundle.js by webpack:
const LikeComponent = React.createClass({
getInitialState : function (){
return {likesCount2 : this.props.likesCount};
},
getLikesCount : function (){
return {likesCount2};
},
onLike : function () {
let newLikesCount = this.state.likesCount2 + 1;
this.setState ({likesCount2 : newLikesCount});
},
componentDidUpdate: function(){
componentHandler.upgradeDom();
},
render : function(){
return (
<div>
Likes : <span>{this.state.likesCount2}</span>
<div>
{/*<RaisedButton label="Like" onClick={this.onLike}/>*/}
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onClick={this.onLike}>Like Me</button>
</div>
</div>
);
}
});
I have added the button in render function.
The output should have a material design button, but the button doesn't change.
Output right now: Button is plain HTML button
Is there anyone who can help.
Aucun commentaire:
Enregistrer un commentaire