я получаю «Uncaught SyntaxError: неожиданный токен <», когда я запускаю мои файлы .html и .js - PullRequest
Новая
       11

я получаю «Uncaught SyntaxError: неожиданный токен <», когда я запускаю мои файлы .html и .js

1 голос
/ 01 мая 2019

Я новичок вact.js, я использовал CDN-ссылки, чтобы скомпилировать в мой HTML-код какой-то простой кодact.js, но я получаю эту ошибку:

"Uncaught SyntaxError: неожиданный токен <" </p>

Затем я искал и увидел, что кто-то сказал, что я должен добавить: 

type="text/babel" or type="text/jsx"

к моему тегу скрипта, я сделал, но после этого мой html не знал мой файл .js!

это мой HTML: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="fa">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title> title </title>
</head>

<body> 

  <div id="app"> </div>

  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>

  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"</script>

  <script type="text/babel" src="myreact.js"> </script>

</body>
</html>

и это мой файл activ.js: 

'use strict';

class MyComponent extends React.Component{ 
    render()
    {
      return  "hello";
    }
}

ReactDOM.render(
  <MyComponent/> , document.getElementById('app')
);

, пожалуйста, помогите мне написать код в activ.js.

1 Ответ

2 голосов
/ 01 мая 2019

Если вы используете CDN, первые два, которые вам нужны - это рендеринг React в DOM, а третий (babel) включает JSX и ES6. Я переупорядочил импорт, включил cdn для babel после импорта реакции и реакции. 

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="app"></div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
    'use strict'
    class Application extends React.Component {
     render() {
      return(
          <div>React App</div>
      );
     }
    }

    ReactDOM.render(<Application />, document.getElementById('app'));
  </script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...