I've recently embarked on my journey to learn React.js by delving into various tutorials and documentation. However, I'm encountering a peculiar issue specifically in Google Chrome:
https://i.sstatic.net/qODiP.png
Interestingly, in Firefox, it fails to display anything despite the expectation that it should showcase the code information.
The Code Snippet
<!DOCTYPE html>
<html>
<!-- jQuery, jQuery.ui -->
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
// More script imports...
JavaScript Component
var Note = React.createClass({
edit: function() {
alert('editing note');
},
remove: function() {
alert('removing note');
},
render: function() {
return (
<div className="note">
<span>
<button className="btn btn-primary glyphicon glyphicon-pencil"/>
<button className="btn btn-danger glyphicon glyphicon-trash"/>
</span>
</div>
);
}
});
React.render(<Note>Hello World</Note>,
document.getElementById('react-container'));
CSS Styling
@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light);
// CSS rules and styles...
It's quite baffling to me why both browsers are omitting crucial information from the tutorial code snippets. This unexpected behavior is hindering my learning process within this React.js tutorial.