React.js Failure Manipulating Events

Asked

Viewed 118 times

2

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

enter image description here

And in Firefox neither appears information error message none and supposedly should appear, at least in the tutorial appears the information.

HTML

<!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>

<!-- 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 -->
<script src="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>

<!--Custom Styles -->
<link href="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 cannot understand why there is a lack of information in the browser. The information should appear.

javascript html css events react
  • 1

    You’re using <script src="js/Note.js" in your HTML or is there another way? The part you painted in the image looks like a larger URL to me. Take http from that URL and give a relative path, for example: <script src="/js/Note.js" if the js is at root.

  • @Sergio I am passing you the relative path in all local modules except in remote.

  • 1

    This error has to do with a file you are trying to access on a site that does not allow it. When you use http in the url the browser counts as an external website even if it is yours. Can you put the link you have hidden in the image? even if it is with xxx letters if necessary.

  • file:///XXX/Xxxxx/XxXxx/react-get-started/exercise/Ch03/03_04/start/js/Note.js

  • 1

    Okay, and that file is on your server which is the same one that has the page you’re running right? Just use /react-get-started/exercise/Ch03/03_04/start/js/Note.js, or the path from root to server.

1 answer

1


Browser other questions tagged javascript html css events react

You are not signed in. Login or sign up in order to post.