HTML is available:

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://unpkg.com/react@15/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.js"></script> <script src="/r/b2b-spa/js/main.js"></script> <title>Тайтл</title> </head> <body> <div id="root"></div> </body> </html>

The code of the file /r/b2b-spa/js/main.js:

 import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') );

In the first line of main.js an error occurs:

Uncaught SyntaxError: Unexpected token import

Tell the newcomer how to properly connect to the React JS page.

  • in short: the import construction from the box does not yet exist. In the examples that you see, the developers have already fussed over having them. - Duck Learns to Take Cover

2 answers 2

If you want to use import / export, then you need to configure some project collector to work with import / export (es6) + obviously, to translate jsx to js. In the case when you connect the react through the tag, you do not need to import it again, you can immediately use:

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

    You do not need an import, you already have libraries connected by cdn, you can delete and leave the render altogether - it should work. But before this babel, you may be given an error, since you did not specify the type, you have:

     <script src="/r/b2b-spa/js/main.js"></script>

    Need to:

     <script type="text/babel" src="/r/b2b-spa/js/main.js"></script>