I have the following code which is in a saved format of .html (index.html).
I am learning React right now and when I execute this html file in the browser, nothing happens.
I am wondering where the two lines of code are suppose to go or how to call them (execute the rendering).
Where would I find the files in ./lib if I am using a mac?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Introduction | Learning React</title>
<link rel="stylesheet" href="lib/style.css" />
</head>
<body>
<section id="entry-point"></section>
<!-- Wifi might be spotty, so we've downloaded these to `./lib` -->
<script src="lib/react.js"></script>
<script src="lib/react-dom.js"></script>
<script type="text/javascript">
// Intentionally blank. Your walk-through code will go here
var hello = React.createElement('p', null, 'Hello, World!');
// Checkout what this does by opening your HTML file in the browser
ReactDOM.render(hello, document.getElementById('entry-point'));
</script>
</body>
</html>
It works as long as you include the proper libraries:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Introduction | Learning React</title>
<link rel="stylesheet" href="lib/style.css" />
</head>
<body>
<section id="entry-point"></section>
<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 type="text/javascript">
// Intentionally blank. Your walk-through code will go here
var hello = React.createElement('p', null, 'Hello, World!');
// Checkout what this does by opening your HTML file in the browser
ReactDOM.render(hello, document.getElementById('entry-point'));
</script>
</body>
</html>
Using the correct setup (JSX compiler, e.g. Babel), you could simplify the above createElement to:
ReactDOM.render(
<p>Hello, World!</p>,
document.getElementById('entry-point')
);
<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>
<div id="entry-point"></div>
If you don't want to use packet managers you can include React with CDNs.
For development:
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
For production (minified):
<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>
Related
I am not sure what is wrong with my code. When I open it in Firefox, it doesn't do anything.
However, copying it into fsfiddle it works
Am I missing a JavaScript file for jQuery templates but I thought this was added to jQuery in 1.5
why
<!DOCTYPE html>
<html>
<head>
<script src="scripts/jquery-3.4.1.js"></script>
<script src="scripts/main.js"></script>
<meta charset="UTF-8">
<title>Exam Random Generator</title>
</head>
<body>
<div id ="mainContainer"> </div>
<script id="questionTemplate" type="text/x-jQuery-tmpl">
<div class="questionContainer">
<p class="question">${sQuestionText}</p>
</div>
<br/>
</script>
<script type="text/javascript">
// Render the books using the template
$("#questionTemplate").tmpl(oQuestions).appendTo("#mainContainer");
</script>
</body>
</html>
I am trying to run my first React code but when I refresh the page nothing shows.
This is how my HTML looks like:
<!DOCTYPE html>
<html>
<head>
<title>React course</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(<h1>Hi, my name is Sidney</h1>, document.getElementById('example'));
</script>
</body>
</html>
Anything that I am possibly doing?
AS i found on the #stackoverflow, you have a problem with your version of babel. Look at this demo, uses a previous version of babel
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(<h1 key="0.01">Hi, my name is Sidney</h1>, document.getElementById('example'));
</script>
You need this version of Babel to transpile your JSX code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
I am new to Vue.js and I am simply trying to load script tags to the page, like jQuery for example. I tried adding the scripts to the end of the body in the index.html file, but they come back as 404s.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<div id="app"></div>
<!-- JQUERY -->
<script src="assets/js/jquery-2.1.4.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/tipr.min.js"></script>
</body>
</html>
Try moving them to the /static/ folder &/or prefixing the paths with ./ or /
I'm trying to make a windows phone 8.1 app that send a get request using html5 css and javascript. the only problem is the my code works on my browser but when I build the app using visual studio the get request is sent only the first time. I have no clue why this happens.
The code for the page is this :
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
$.get("http://192.168.1.100/gpio/0")
});
} );
</script>
</head>
<body>
<button>Send GET request </button>
</body>
</html>
The code that I use for the app is the same with just a few changes :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App1</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<!-- App1 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="/js/jquery-1.12.1.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$.get("http://192.168.1.100/gpio/0")
});
});
</script>
</head>
<body>
<button>Send GET request</button>
</body>
</html>
I've had a look at similar answers but haven't seen an answer to this.
My directory structure is simply:
Test
|---index.html
|---bootstrap.min.css
|---angular.min.js
|---app.js
My code:
<!doctype HTML>
<html ng-app="store">
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<p>I am {{4 + 6}}</p>
<p>{{"Hello" + " you"}}</p>
</body>
</html>
Sadly, running this in the browser (file:///Users/Will/Projects/angular/demo/index.html), it doesn't work. Is this because it's local?
Consider that the following works when loaded directly from the filesystem (and not a webserver):
<!doctype HTML>
<html ng-app>
<head>
<title>Test</title>
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
<p>I am {{4 + 6}}</p>
<p>{{"Hello" + " you"}}</p>
</body>
</html>
Note that I have changed "ng-app='store'" to "ng-app", so that angular is not trying to load the 'store' module.
This shows that angular, on its own, is doing its thing correctly. So the issue is somewhere within the store module. As suggested in the comments, check your browser console for error messages, and troubleshoot those.