now i'm doing add react to website from this tutorial react Tutorial. I don't run this react with node so i just build in with add DOM Container to the HTML. However i struggle to integrate other file in a same page. i share my code
this on file index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" >
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="./App.js"></script>
<script type="text/babel">
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>
this my code on app.js
class App extends React.Component {
render() {
return(
<div>
<img src="<logoURL>"/>
<div id="homeSite"></div>
<script type="text/babel" src="./Home.js"></script>
<script type="text/babel">
ReactDOM.render(<Home />, document.getElementById("homeSite"));
</script>
</div>
)
}
}
and this my code on home.js
class Home extends React.Component {
render() {
return(
<div >
test home display text
</div>
)
}
}
i got 2 warning error
Uncaught ReferenceError: require is not defined
other is this
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
i not sure how to resolve this. please help
In index.js you can not write html code, for html code you have to use index.html file that located in public dir. in index.js write like below
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root'),
);