i have my react code in plain HTML
<!Doctype html>
<html>
<head>
<meta charset="uttf-8">
<title>React! React! React!</title>
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<script>
ReactDOM.render(
<h1>Sherlock Holmes</h1>,
document.body
);
</script>
</body>
</html>
but he not work, after run this index.html in Chrome i have only blank white page,
can someone explain me what i am doing wrong?
i use vscode
To make this work, use the development version, not the production version of the react and react-dom files. Also note that you need to specify the type of your script as "text/babel" or babel won't parse it.
Check out the code below:
<html>
<head>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
</head>
</head>
<body>
<script type="text/babel"> /* notice type="text/babel"*/
ReactDOM.render(
<h1>Sherlock Holmes</h1>,
document.body
);
</script>
</body>
</html>
RESULT:
I did react for the first time and it edited your code like that. I guess the two scripts I added are not needed, but just try it. As I understood you have to set an section to place the text. These two links could help too.
Where to place line of code in html for ReactDOM.render?
https://www.w3schools.com/react/react_render.asp
My Code:
<!Doctype html>
<html>
<head>
<meta charset="uttf-8">
<title>React! React! React!</title>
<link rel="stylesheet" href="lib/style.css" />
</head>
<body>
<section id="entry-point"></section>
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script type="text/javascript">
var h = React.createElement('p', null, 'Sherlock Holmes');
ReactDOM.render(h, document.getElementById('entry-point'));
</script>
</body>
</html>
Related
Why my element is not rendered in browser? I just want to see the h1 from react.doc in browser.
<html>
<head>
<link rel="stylesheet" href="index.css">
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
ReactDOM.render(<h1>Hello, everyone!</h1>, document.getElementById("root"))
<html>
<head>
<title>My HTML</title>
<script type="text/javascript"></script>
document.write("Hello World");
</head>
<body>
</body>
</html>
How Do I remove the document.write part of the output? My chrome output is document.write("Hello World");
I just want to output Hello World on Chrome.
You need to move the closing script tag to be after the document.write("Hello World") so that the document.write() is encased within the script tag. e.g.
<html>
<head>
<title>My HTML</title>
<script type="text/javascript">
document.write("Hello World");
</script>
</head>
<body>
</body>
</html>
My webpage works fine in chrome, internet explorer, and JSFiddle but when opened in Mozilla it doesn't read any link or script tags except the ones linked to a website, i.e jquery. In the developer tools it reads jquery but no other JS and says there are no styles applied to the webpage.
<!DOCTYPE html>
<html>
<head>
<title>Word Master</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="C:/Users/Thomas/OneDrive/Documents/workPlease/WMstyle.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/color/jquery.color-2.1.0.js"></script>
<script type="text/javascript" src="C:/Users/Thomas/OneDrive/Documents/workPlease/WMfunctions.js"></script>
<script type="text/javascript" src="C:/Users/Thomas/OneDrive/Documents/workPlease/errorCheck.js"></script>
<script type="text/javascript" src="C:/Users/Thomas/OneDrive/Documents/workPlease/WMpopups.js"></script>
<script type="text/javascript" src="C:/Users/Thomas/OneDrive/Documents/workPlease/WMeasy.js"></script>
</head>
I tried saving all of them with encoding UTF-8 and I added #charset "UTF-8"; to the top of my css.
because you are using the filesystem path:
C:/Users/Thomas/OneDrive/Documents/workPlease/WMeasy.js
It should be absolute
/workPlease/WMeasy.js
or relative
WMeasy.js
I'm getting an error that says "Tag start is not closed" in the following HTML code after the input tag. I can't seem to figure out why since I am using the Handlebars syntax properly. Can someone help me out please?:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="todo">
</div>
<script id="item-template" type="text/x-handlebars-template">
// Your code goes here
<div>
<input id="todo-complete" type="checkbox" {{#if completed}} "checked" {{/if}}>
<label>{{title}}</label>
</div>
</script>
<script src= "underscore.js"> </script>
<script src="handlebars-v1.3.0.js"> </script>
<script src="backbone.js"> </script>
<script src="jquery-1.11.1.js"> </script>
<script src="main.js"> </script>
</body>
You IDE doesn't understand Handlebars syntax, hence reporting a Error, which you should ignore.
I'm facing a weird problem in which I'm unable to close bootstrap tags.
Below is my html code,
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-tagsinput.min.js"></script>
</head>
<body>
<input type="text" id="searchTags" data-role="tagsinput"/>
</body>
</html>
I'm using Bootstrap V3.0.
Below is the screen shot of the tags,
As you can see from the image that 'x' used to close the tags is not displayed. Any idea why??
Thanks in advance.
You're probably missing this css file:
<link href="bootstrap-tagsinput.css" rel="stylesheet">
This is my Source and it works with the closing x:
<html>
<head>
<link href="bootstrap-tagsinput.css" rel="stylesheet">
<link href="bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-tagsinput.js"></script>
</head>
<body>
<input type="text" id="searchTags" data-role="tagsinput"/>
</body>
</html>
(I didn't took care of nice use of js/css folders)
Let me know if this helps