- ReactJS provides developer toolbar for debugging ReactJS application.
- You can install the addon by using following link.
- In this demo, “We will learn debugging ReactJS application using this add-on”.
- For debugging purpose we have created WelcomeMessage react element.The code for WelcomeMessage element is embedded in JSBIN link:
- The code for WelcomeMessage element is as below:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
</head>
<body>
<script type="text/jsx">
var WelcomeMessage = React.createClass({
getDefaultProps: function () {
return{
myName : "developer"
};
},
render: function() {
return (
<h1>
Welcome {this.props.myName}
</h1>
);
}
});
React.render(<WelcomeMessage myName=”Sandeep”/>, document.body);
</script>
</body>
</html>
- On successful installation of ReactJS developer tool a new tab is created in chrome developer console.The tab contains element window,properties window,states window,component window and event listener window.
- The following screenshot shows the chrome developer console with React tab .The element window contains the React Element.The properties windows contains the myName.
