React component is not being displayed on browser, getting empty screen - javascript

<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>

Related

How to enable JSX intellisense in HTML <script> tag?

I want JSX Intellisense in Visual Studio Code in HTML files, right inside the <script> tag. Currently, I can't figure out a way to do so.
Here's my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Working with forms - Project 2</title>
</head>
<body>
<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#6/babel.min.js"></script>
<script type="text/babel">
function App() {
return <React.Fragment>
<h1>Working with forms - Project 2</h1>
</React.Fragment>
}
ReactDOM.render(<App/>, document.getElementById('root'));
</script>
</body>
</html>

Templete in App.vue doesn't show in index.html

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

Is it possible to use React.Component just including react and reactDom as tags in the html?

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!

"ReferenceError: ReactRedux is not defined

I am following the Redux tutorial and trying to include Provider. I am using JSbin
My HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script scr="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.5/react-redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.js"></script>
<script src="https://wzrd.in/standalone/expect#latest"></script>
<script src="https://wzrd.in/standalone/deep-freeze#latest"></script>
<title>JS Bin</title>
<script src="https://fb/react-0.14.3.js"></script>
<script src="https://fb/react-dom-0.14.3.js"></script>
</head>
<body>
<div id='root'></div>
</body>
</html>
JS File:
const { Provider } = ReactRedux;
However I am getting the error:
"ReferenceError: ReactRedux is not defined
What am I doing wrong?
In your snippet you posted, you have scr and not src.
<script scr="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.5/react-redux.js"></script>
Should be
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.5/react-redux.js"></script>

My page won't load (ReactJS)

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>

Categories

Resources