How to get another component on ReactJs use ES6 modules-CodePudding

i need help for integrate frontend ReactJS on my site. currently i avoid to use nodeJS or NPM for implement my reactJS. but i'm using ReactJS CDN. so i not run npm start when develop the reactJS. i just want to use the frontend.

Hope this will understand from the start. so i have a question, how do i able to get another component and place it on single file.

I Created file App.js. I plan that this file will become a centralize for other components.

let me share what i'm doing right now.

here is my file structure

this is my code on index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Buynow Project</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 
    <script type="text/babel" src="buynow/index.js"></script>    
  </head>
  <body>
    <div id="root"></div>  
  </body>
</html>

this is my code on index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js'

ReactDOM.render(<App />, document.getElementById('root'));

this is my code on App.js

import React from 'react';
import Navbar from './components/Navbar.js'

function App(props){
    return (
      <div>
        <Navbar/>
        Hello App
      </div>
    );
}

export default App;

this is my code on Navbar.js

import React from 'react'; 

function NavBar(props) { 
    return (
      <div>
        <Navbar/>
        Hi NavBar
      </div>
    );
}

export default NavBar;

but i got this error, and pointed on file index.js line:1

Uncaught ReferenceError: require is not defined

this is error

I confuse how to solve this. I start with the simple code just for testing if it can work or not.

please help.

CodePudding user response：

https://reactjs.org/docs/react-without-jsx.html

JSX is not a requirement for using React. Using React without JSX is especially convenient when you don’t want to set up compilation in your build environment.

So you can't use JSX/TSX directly in your browser (need compilation). Also, you can't use import outside a module (so basically now, you can already use your function components by adding the import of all your files in the index.html).

In my experience I suggest that you use the benefits of JSX / TSX and compile your code with NPM to be more comfortable (everything is way more intuitive with jsx).

In any case, in the link that I have included, you will find how to do the equivalent of JSX with pure javascript. That's what you need. (as you can see in my small snippet)

If you want keep using react from CDN and without compiling, your code, should be something like this:

// For the Snippet i have all of your js here
// But you could just import in your index.html every separate component file you have (without any import/export syntax)

function NavBar(props) { 
    return React.createElement('span', null,props.title);
}

function App(props){
    return React.createElement('span', null,   React.createElement(NavBar, {title: 'Header'}, null),
    React.createElement('span', null,'Hello App'));
}

ReactDOM.render(React.createElement(App, {}, null), document.getElementById('root'));

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Buynow Project</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>    
  </head>
  <body>
    <div id="root"></div>  
  </body>
</html>

Anyway, as you see, the code is not so readable this way...

Ps. Also, don't put NavBar inside NavBar or you'll get a render loop

CodePudding user response：

You have to enable module support in script tag

<script type="text/babel" data-type="module" src="./index.js"></script>

Remove React import statements as they can be directly used.