Why is there no file connection with react code and index.html?

T

trek892018-03-29 13:34:07

JavaScript

trek89, 2018-03-29 13:34:07

There is html "code", if you write react code in html in the script tag, then it is displayed when index.html is opened. But I need to move this piece of react code into a separate file (scripts.jsx)
index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>
<script src="babel.min.js"></script>
<script src="scripts.jsx" type="text/babel"></script>


</head>
<body>
    <div id="root"></div>
<!--    
    <script type="text/babel">

      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );

    </script>
-->
</body>
</html>

If you comment out the react code and move it to a separate file (scripts.jsx), then when index.html is opened, the react code is not executed (empty page). Why? Did I connect something wrong?
script.jsx

import React from 'react.development.js';
import ReactDOM from 'react-dom.development.js';

      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );

Issue resolved!

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

T

trek89, 2018-03-29
@trek89

Found a solution:
https://www.youtube.com/watch?v=fQAKKXc6BCM&list=P...
https://github.com/codedojo/react-intro

M

Maxim, 2018-03-29
@maxfarseer

This is not how it should work. Your code is not running through babel, so you can say that "requires are not executed".
If you want to “learn” without create-react-app, then you need to write text / babel code in the same htmk file (which worked for you), since browsers by default cannot require, which is what the error text is about (require function unspecified).