React.js Failure Handling Events

2

I'm starting to learn React.js by seeing some videos, tutorials and documentation. However, I'm having a problem with my code in Google Chrome appearing like this:

AndinFirefoxneitherIgetanyerrormessageinformationandsupposedlyshouldappear,atleastinthetutorialinformationappears.

HTML

<!DOCTYPEhtml><html><!--jQuery,jQuery.ui--><linkhref="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><scriptsrc="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><!--React--><scriptsrc="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xpa1/t39.3284-6/11057025_805715566176382_77439371_n.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script><!--CustomStyles--><linkhref="css/style.css" rel="stylesheet" type="text/css" />
<title>React Bulletin Board</title>
</head>
<body>
<div id="react-container"></div>
<script src="js/Note.js" type="text/babel" ></script>
</body>
</html>

JavaScript

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

@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light);

body,
html,
div.board,
div#react-container {
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
}

div.board {
    background-color: brown;
    width: 100%;
    background: #eab92d;
    background: -moz-radial-gradient(center, ellipse cover, #eab92d 57%, #c79810 99%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(57%, #eab92d), color-stop(99%, #c79810));
    background: -webkit-radial-gradient(center, ellipse cover, #eab92d 57%, #c79810 99%);
    background: -o-radial-gradient(center, ellipse cover, #eab92d 57%, #c79810 99%);
    background: -ms-radial-gradient(center, ellipse cover, #eab92d 57%, #c79810 99%);
    background: radial-gradient(ellipse at center, #eab92d 57%, #c79810 99%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eab92d', endColorstr='#c79810', GradientType=1);

}

div.note {
    height: 150px;
    width: 150px;
    background-color: yellow;
    margin: 2px 0;
    position: relative;
    cursor: -webkit-grab;
    -webkit-box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, .2);
    box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, .2);
}

div.note:active {
    cursor: -webkit-grabbing;
}

div.note p {
    font-size: 22px;
    padding: 5px;
    font-family: "Shadows Into Light", Arial;
}

div.note:hover > span {
    opacity: 1;
}

div.note > span {
    position: absolute;
    bottom: 2px;
    right: 2px;
    opacity: 0;
    transition: opacity .25s linear;
}

div.note button {
    margin: 2px;
}

div.note > textarea {
    height: 75%;
    background: rgba(255, 255, 255, .5);
}

.glyphicon-plus {
    position: fixed;
    top: 10px;
    right: 10px;
}

I can not understand why there is a lack of information in the browser. Being that information should appear.

    
asked by anonymous 26.07.2016 / 20:39

1 answer

1

You are attempting to try to load Note.js from disk, and as chrome warns you well, you will get an error with your Cross Origin request!

My recommendation is to set up a web server on your computer ( link , nothing scary), here are some examples of how to do it something simple at express.js link

    
27.07.2016 / 22:40