CODEWITHSUNDEEP
javascriptreactjs
Mathew
Mathew

Reputation: 1430

ReactJS can't load files in src

I have the following code in a file called index.html:

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
    <script src="src/Test2.js" type="text/babel"></script>
</head>

<body>
    <div id="asdf"></div>
    <script type="text/babel">

        class Test extends React.Component {
            render() {
                return (<h>asdf</h>);
            }
        }

        ReactDOM.render(
            <Test/>,
            document.getElementById('asdf')
        );

    </script>
</body>

I am trying to use code I've put in a file called Text2.js which is in a folder called src however I get the following error when I run the above code in chrome:

browser.js:5773 Failed to load file:///Users/.../src/Test2.js: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

How can I fix this? Thanks

PS: here is my folder structure:

../reactTutorial  
../reactTutorial/index.html  
../reactTutorial/src  
../reactTutorial/src/Test2.js

In case this is relavent I am on a mac, also here is the code in Text2.js:

var Test2 = React.createClass({
    render: function() {
        return <div>This is Test2</div>;
    }
});

Upvotes: 3

Views: 2167

Answers (3)

Miodrag Trajanovic
Miodrag Trajanovic

Reputation: 134

Better away is if you make this like this: First: make this like react component example App.js and Test.js Second: import Test.js from App.js

Upvotes: 0

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

create one http server will solve this issue.

Define server.js which run http server.

const express = require('express')
const app = express();
const path = require('path');

app.use(express.static('./src')) //assuming src folder will hold all assets.
app.get('/', (req, res) => res.sendFile(path.join(__dirname) + '/index.html'))
app.listen(3000, () => console.log('app listening on port 3000!'))

index.html

add relative path to JS.exclude src folder name.

<script src="Test2.js"></script>

Note : install express.js

run it using node server.js

Upvotes: 1

tynrare
tynrare

Reputation: 96

Cross origin requests are only supported for protocol schemes

For chrome you have to host server(You can use nodejs server or gulp plugins). Try to open this in firefox - should be fine.

Upvotes: 0

Related Questions