Dear React connoisseurs! Tell me how to properly organize the connection and use of the component, which is stored in a separate file? In the example below, I need to use the Header component inside the main.js file, which is stored in the componets / header.js file

Index.html:

<!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"> <link rel="stylesheet" href="/css/normalize.css"> <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure.css"> <link rel="stylesheet" href="/css/style.css"> <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="/js/main.js" type="text/babel"></script> <title>Тайтл</title> </head> <body> <div id="layout"></div> </body> </html>

/js/components/header.js:

 "use strict"; class Header extends React.Component { render() { return <header>This is Header</header>; } }

/js/main.js:

 'use strict'; import Header from 'components/header'; ReactDOM.render( <Header />, document.getElementById( 'layout' ) );
  • So, it seems I have already seen your question on this topic. Usually , the es6 system of modules is used with the reactor (import-export constructions), but for this it is necessary to adjust the assembly stage. Without this, you can either screw any other system of modules (not very well, but you can) or communicate through the global scope (generally bad). - Duck Learns to Take Cover
  • What kind of module systems are there, this answer: ru.stackoverflow.com/questions/503158/… - Duck Learns to Take Cover
  • In short, if you don’t play around for a real project, then sooner or later you’ll have to set up a webpack, if you play around, you can also talk through global variables as suggested by @Mikl - Duck Learns to Cover

1 answer 1

In your case (you do not use collectors), connect the file with your component via the script tag:

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