unable to load react component in index.html

Question

I am creating a static React app( no server), moreover like a portfolio site. I am stuck at a point on loading React component from external Js file into another component. But I am getting the following error in the browser console :

ReferenceError: require is not defined

Many suggested using create-react-app to create the react app, but it runs on node server localhost:, actually I need to deploy it on apache server, suggest me what should I do now?

my folder structure :

App.js

import Header from './js/Header.js';
class App extends React.Component
{
    render(){
        return (
                <Header/>
            );
    }
}
ReactDOM.render(
    <App/>,
    document.getElementById("root")
);

Header.js

class Header extends React.Component
{
    render(){
        return (
            <div>This is Naveen!!</div>
        );
    }
}
export default Header;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <!--Import Google Icon Font-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--Import materialize.css-->
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <!-- Compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
        <!--Let browser know website is optimized for mobile-->
        <!--Import React Js minified js-->
        <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
        <!--Import React Js DOM minified js-->
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
        <!--Import Babel Js-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
        <!--Import external CSS-->
        <link rel="stylesheet" href="main.css"/> 
	    <style>
	    </style>
    </head>
	<body>
        <!--Root component of the app-->
        <div id="root"></div>
        <!--Import Jquery for materialize css-->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <!--Import Application js files-->
        <script type="text/babel" src="js/App.js"></script>
    </body>
</html>

skovy · Accepted Answer · 2019-09-15 16:55:43Z

You don't need the import since React and ReactDOM are global. The import is invalid.

class App extends React.Component {
  render() {
    return ( <
      div > This is Naveen!! < /div>
    );
  }
}
ReactDOM.render( <
  App / > ,
  document.getElementById("root")
);

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <!--Let browser know website is optimized for mobile-->
  <!--Import React Js minified js-->
  <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
  <!--Import React Js DOM minified js-->
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
  <!--Import Babel Js-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
  <!--Import external CSS-->
  <link rel="stylesheet" href="main.css" />
  <style>

  </style>
</head>

<body>
  <!--Root component of the app-->
  <div id="root"></div>
  <!--Import Jquery for materialize css-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <!--Import Application js files-->
  <script type="text/babel" src="js/App.js"></script>
</body>

</html>

Removing import react worked!!, but what if I need to import another react component into my main component, like the above-edited code

Collectives™ on Stack Overflow

unable to load react component in index.html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related