CODEWITHSUNDEEP
javascripthtmlreactjs
Norman Yonion Chen
Norman Yonion Chen

Reputation: 97

Using React create an HTML page with an independent .js file BUT two Errors occured

Update :

Thank you all for teaching me to solve the problem. One brilliant guy tell me to use a webserver , but I just want to overcome the specific problem just using a single html file and a single js file. I think the question would be solved because the similar question is solved but I just did it from that step by step , it still didn't work. I am so confused and really appreciate for the specific answer.

I am a fresh man in react. As I want to create a single html file to contain the elements and .js file to contain the class of react, two errors showed:

  1. Access to XMLHttpRequest at 'xxxxxx/1.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.

  2. GET file://xxxxxxx/1.js net::ERR_FAILED

the code I typed is below:

1.html

<div id="app"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel" src="./1.js"></script>

1.js

import React from "react"
import ReactDOM from "react-dom"

const docItem = document.querySelector('#app')
ReactDOM.render(<p>hello world</p>,docItem)

How to overcome this problem? thank you

Upvotes: 0

Views: 237

Answers (1)

Azer8
Azer8

Reputation: 559

you are using `file://xxxxxxx/1.js``to load the modules. they are not http:// so to slove this you need to install a webserver in your local PC a link a run your test code on that webserver .

  • you can use npm or yarn for creating react apps it's more simple and efficient a link

Upvotes: 1

Related Questions