I'm learning React. I added them to my website with html script tag:
My index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyWebsitewithReact</title>
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#2e2e2e">
</head>
<body>
<div class="navbar">
Home
Plugins
</div>
<div id="root"></div>
<script src="https://unpkg.com/react#18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
My index.js:
'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}
const rootNode = document.getElementById('root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));
This is the error I get :
Error: Minified React error #299; visit https://reactjs.org/docs/error-decoder.html?invariant=299 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
I have tried to visit and the error is:
createRoot(...): Target container is not a DOM element
I checked the documentation and everything seems fine
EDIT:
first in your file index.js you need to add in first line:
import React from 'react';
import ReactDOM from 'react-dom/client';
because without imported these library you can't use elements of React and ReactDOOM.
and in your index.html you need to replace this:
<script src="js/index.js"></script>
to this:
<script src="js/index.js" type="text/babel" data-type="module"></script>
I wish I solved your problem.
Related
I am using local vue.js These are my files.
index.html
<!DOCTYPE html>
<html lang="en">
<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="res/vue.js"></script>
<script src="res/vue-router.js"></script>
<title>Vue</title>
</head>
<body>
<div id="app" ></div>
<script type="module" src="App.js"></script>
</body>
</html>
App.js
import Vue from './res/vue.js'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
App.vue
<template>
<div>
{{foo}}
</div>
</template>
<script>
export default {
name: 'App',
data: function(){
return{
foo:'Hello vue'
}
}
}
</script>
<style>
</style>
But my index.html shows nothing
You mount your vue instance at the div node which id is "app", but i can't find the "#app" node, so you can resolve that by insert the "#app" node .
index.html:
<body>
<div id="app"></div>
<script type="module" src="App.js"></script>
</body>
Like the Steven suggested you have to compile vue components.
If you dont want to do it that way, below is the the easiet way.
Vue.createApp({
data() {
return {
foo: 'Hello vue',
};
},
}).mount('#app');
<!DOCTYPE html>
<html lang="en">
<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/vue#next"></script>
<!-- <script src="res/vue-router.js"></script> -->
<title>Vue</title>
</head>
<body>
<div id="app">{{foo}}</div>
<script type="module" src="App.js"></script>
</body>
</html>
You probably need to build it with vue-cli to create a SPA(Single page Application) for your android application
Hi is your import correct? from node_modules it should be import Vue from 'vue' and not import Vue from './res/vue.js' try it
This code is working fine when running locally. When I upload this in 000webhost and use the path of bundle.js in WordPress page then facing this error.
I am getting the above-mentioned error without _registerComponent. Everywhere there is a solution for the error with _registerComponent.
Also I am getting the value of document.getElementById("app") as null.
app.js
import React from "../node_modules/react/index";
import { render } from "../node_modules/react-dom/index";
import Plans from "./components/Plans";
//Import CSS
import "./styles/styles.scss";
const App = () => (
<div>
<Plans/>
</div>
);
var app = document.getElementById("app");
console.log("app",document.getElementById("app"))
render(<App/>, app);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
Code used in WordPress
<html>
<head>
</head>
<body>
<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 async src="https://unvisitable-bows.000webhostapp.com/react-widget-subscription-plans/react-widget-subscription-plans/public/bundle.js" crossorigin></script>
</body>
</html>
As you are not using index.html in wordpress you will need to add root container div for react to use to render your application. Try adding div for app in wordpress html i.e <div id="app"></div>
<html>
<head>
</head>
<body>
<div id="app"></div>
<script async src="https://unvisitable-bows.000webhostapp.com/react-widget-subscription-plans/react-widget-subscription-plans/public/bundle.js" crossorigin></script>
</body>
</html>
Try this, in app.js
import React from 'react';
import ReactDOM from 'react-dom';
import Plans from "./components/Plans";
//Import CSS
import "./styles/styles.scss";
const App = () => (
<div>
<Plans/>
</div>
);
ReactDOM.hydrate(
<App />,
document.getElementById('app')
);
Your variable "app" is undefined. Try this
render(<App />, document.getElementById('app'));
I've been looking for an answer and reading documentation but I still can't make it clear for me. So I'll make it simple. I want to know if it's possible to use, for example, React.Component just with react and reactDOM included as tags in my html.
I'm suspicious that I doesn't work cause I've already try id. Here's a piece of code:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
user: []
}
}
componentDidMount() {
var _this = this;
axios.get('http://localhost:8080/dashboard?user=' +
localStorage.getItem("user"))
.then(function(res){
_this.setState({
items: res.data.user
});
})
.catch(function(e) {
console.log("ERROR ", e);
})
}
}
Edited
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../css/main.css" rel="stylesheet">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js
" integrity="sha384-
ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/handlebars-v4.0.12.js"></script>
<script type="application/javascript" src="https://unpkg.com/react#16.0.0/umd/react.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/react-dom#16.0.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/home.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js"></script>
</head>
<body class="nav-md">
</body>
</html>
As I've read, it's suppose that when then html loads, so it does the react code, cause it has de React.Component, then it should call componentDidMount and do the request but I don't see that this happens.
Any ideas?
Thanks all!
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script><!--core react library-->
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script><!--help us inject react into the dom-->
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
class App extends React.Component{
render(){
return <div>Helo</div>
}
}
let divapp=document.getElementById('app')
ReactDom.render(<App />,divapp);
</script>
</body>
</html>
I have tried everything I could, searched a lot of answers, but none of them helped, I just can't understand why my code is not working, I have cross checked me code with instructor's code, still i am having a blank screen before me, kindly help.
You need bable.js CDN in head tag too.
ReactDOM not ReactDom
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script><!--core react library-->
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script><!--help us inject react into the dom-->
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
class App extends React.Component{
render(){
return <div>Helo</div>
}
}
let divapp=document.getElementById('app')
ReactDOM.render(<App />,divapp);
</script>
</body>
</html>
I recommended you to follow the create-react-app approach which is very simple and easy way to start with reactjs.
Check this out.
https://reactjs.org/tutorial/tutorial.html
Under the :
Setup Option 2: Local Development Environment
Take a look on the :
Instructions for following along locally using your preferred text
editor
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.js"></script>
<title>Document</title>
</head>
<body>
<script type="text/babel">
class App extends React.Component {
render() {
return <div>Helo</div>
}
}
let divapp=document.getElementById('app')
ReactDOM.render(<App />,divapp);
</script>
<div id="app">
</div>
</body>
</html>
I'm connected to my server via npm install -g http-server on Terminal, that's working fine. I just want to see if my h1 tag works so I can proceed to making a practice website. I feel like my mainPage.html may be a little off.
Here's my mainPage.html file:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
</body>
<div id="website"></div>
<script type="text/babel" src="mainPage.js"></script>
</script>
</html>
Here's my mainPage.js file:
var Website = React.createClass({
render: function() {
return(
<h1>Why won't my h1 tag appear!</h1>
);
}
});
ReactDOM.render(<Website/>, document.getElementById('website'));
You need to import babel.js, react and reactDOM
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
Include the reference of react, react-dom and babel, Check this working code:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
</head>
<body>
</body>
<div id="website"></div>
<script type="text/babel" >
var Website = React.createClass({
render: function() {
return(
<h1>Why won't my h1 tag appear!</h1>
);
}
});
ReactDOM.render(<Website/>, document.getElementById('website'));
</script>
</html>