发表新帖
发表新帖

React - component in seperate script does not work

前端 未结
关注
3 425
名媛妹妹
名媛妹妹 2020-12-11 18:27

I\'m trying to learn react.js, but got stuck on \"Hello World\" script.

My index.html:
相关标签:
3条回答
  • 庸人自扰
    2020-12-11 18:50

    I suggest you boot up a web server.

    This python -m SimpleHTTPServer will boot up a simple web server.

    You can run this in your directory. Access it here http://localhost:8000.

    Or, you can use Chrome flags and add this line --allow-file-access-from-files

    Notes

    1. Python come pre-packaged with an OSX installation, so if you're on a Mac, good.

    2. Chrome flags is not recommended as it is tedious of a process.

    0 讨论(0)
  • 臣服心动
    2020-12-11 19:09

    I know the answer is already approved but for reference I post code here. We can use react.js with script task like this 

    <!DOCTYPE html>
<html>
  <head>
   <script crossorigin src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('example')
    );
</script>
  </head>
  <body>
    <div id="example"></div>
  </body>
</html>

    0 讨论(0)
  • 鱼传尺愫
    2020-12-11 19:12

    You get that error because:

    1. You have loaded the index.html from your local file system (e.g. by double clicking on it), instead of loading it via a web server
    2. The JSX transformer, the one responsible of text/jsx scripts is a javascript component that tries to fetch the file specified by the src attribute of the script tag
    3. Javascript is allowed to fetch external resources only from the protocols enumerated in the error message (and even for those has further limitation like cross-domain requess); files loaded from the local file system have the file:// protocol which is not within that list.

    When you included the jsx script in the index.html file it worked as no requests were needed in order to retrieve the jsx script.

    What you need to do is grab your hands on a web server, place the hello world files into the document root of that server, and load them from the web server, e.g. from an URL like http://localhost/index.html.

    0 讨论(0)
 看不清?
提交回复
热议问题