All my React.js apps work perfectly in all desktop browsers I have tested (chrome, edge, IE, firefox). However, when I try to open them on my iphone, either chrome or safari, I am presented with a blank screen.
Below is an example of an app that works on desktop but appears blank on iOS.
<html>
<head>
<meta charset="utf-8">
<title>react test</title>
<script src="js/jquery.min.js"></script>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script>
var h = React.createElement;
$(document).ready(() => {
ReactDOM.render(h('h1', null, 'Hello World!'), document.getElementById('app'));
});
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
What is the solution to this?
I solved this one with a lot of experimentation.
The version of safari on my iphone did not support ES6 arrow functions which I used in my code.
Replacing all arrow functions with function(){} fixed the issue.
You should always put your script in the end of the document, like this
<html>
<head>
<meta charset="utf-8">
<title>react test</title>
</head>
<body>
<div id="app"></div>
<script src="js/jquery.min.js"></script>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script>
var h = React.createElement;
$(document).ready(() => {
ReactDOM.render(h('h1', null, 'Hello World!'), document.getElementById('app'));
});
</script>
</body>
</html>
Related
This question already has answers here:
Simple Component is not rendering: React js
(3 answers)
Closed 6 years ago.
[Updates:]
So you need Babel https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js
React has changed it's API and ReactDom should be used -> See this post.
So I tried to give react a shot and either I'm too far down a rabbit hole but I can't seem to figure while the extremely simple page just doesn't load up and work..
I have just react_hello.html
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></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>
</head>
<div id="root">
<body>
<script type="text/babel">
console.log("A");
var ExampleElement = React.createClass({
render : function()
{
return (<p>Testing 123</p>);
};
});
React.render(<ExampleElement/>, document.getElementById('root'));
</script>
</body>
</html>
It doesn't work both in Chrome and Firefox, I see a blank page and get this in the console:
Download the React DevTools and use an HTTP server (instead of a file: URL) for a better development experience: https://fb_dot_me_url_blocked/react-devtools
Sure I could download the dev tools but I don't want to because I want to understand grounds up how it works. Why don't I see tutorials that point to the basic idea of how to setup a page with react!! Even https://facebook.github.io/react/ uses codepen.
Because you define this <div id="root" outside of the body.
Try this:
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></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>
</head>
<body>
<div id="root"/>
<script type="text/babel">
console.log("A");
var ExampleElement = React.createClass({
render : function()
{
return (<p>Testing 123</p>);
};
});
ReactDOM.render(<ExampleElement/>, document.getElementById('root'));
</script>
</body>
</html>
Another change is, you need to use ReactDOM.render instead of React.render, check the difference between this two: Is there any difference between React.render() and ReactDOM.render()?
ReactDOM.render(<ExampleElement/>, document.getElementById('root'));
I am working on cordova appache app on VS2015 . I want to use jquery in my app as I use it in web app . I tried to make it but it dosen't work . here is my code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<!-- test references -->
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<p>Hello, your application is ready!</p>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
<script>
$(document).ready(function () {
alert("test!");
});
</script>
Please advise .
There's no jQuery script linked there. Surely you need to add:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
(Or a link to the jquery file on your server)
To your script links - probably before index.js.
EDIT: Also your script tag is outside your HTML. Move it to the bottom of the body tag, instead:
<script>
$(document).ready(function () {
alert("test!");
});
</script>
</body>
</html>
Context
I've used Mocha before many times, both in the browser and just using the command line. I tend to use Chai's expect module for bdd.
I have five test files that have been working with command line npm test. I just want to run the tests in the browser for better debugging.
Problem
The setup is just boggling my mind. I either get a blank Mocha page without tests or I see the first test flash on screen, then it redirects.
Current specRunner.html
<!DOCTYPE HTML
<html>
<head>
<title>Mocha Tests</title>
<link rel="stylesheet" href="node_modules/mocha/mocha.css" />
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/mocha/mocha.js"></script>
<script src="node_modules/chai/chai.js"></script>
<script>mocha.setup('bdd');</script>
<script src="mineLocation.js"></script>
<script src="test/mineTests.js"></script>
<script>
window.expect = chai.expect;
mocha.run();
</script>
</head>
<body>
<div id="mocha"></div>
</body>
</html>
Previous Attempts
I've tried moving script tags around, thinking that dependencies are being unmet at load time.
I've tried relative vs. absolute paths. Console says all the tags are loading correctly.
I've tried modifying the run script tag. When it is as the example above, it turns out a blank page and says "Cannot read property 'appendChild' of null", pointing back to Mocha:
When the run script tag looks like this:
$(function() {
window.mochaPhantomJS ? mochaPhantomJS.run() : mocha.run();
});
It redirects from /specRunner.html to /2,1 and the console error repeats about every 30 seconds.
Here you go, just tested it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mocha Test</title>
<link rel="stylesheet" type="text/css" href="node_modules/mocha/mocha.css">
</head>
<body>
<div id='mocha'></div>
<div id='app'></div>
<script src="node_modules/mocha/mocha.js"></script>
<script src="node_modules/chai/chai.js"></script>
<script src="app.js"></script>
<script>
mocha.setup('bdd');
var expect = chai.expect;
</script>
<!-- Tests -->
<script src="app_test.js"></script>
<script>
mocha.run();
</script>
</body>
</html>
So, I've found that it's not necessarily an issue with the HTML setup, but rather an issue with a test.
Setting the location variable globally within the file causes the strange redirection (to /2,1) and error "Cannot read property 'appendChild' of null".
Moving the variable within the describe statement, on line 4, fixes the problem.
My final HTML is cleaner as well:
<html>
<head>
<meta charset="utf-8">
<title>Mocha Tests</title>
<link rel="stylesheet" href="node_modules/mocha/mocha.css" />
</head>
<body>
<div id="mocha"></div>
<script src="node_modules/mocha/mocha.js"></script>
<script>mocha.setup('bdd');</script>
<script src="node_modules/chai/chai.js"></script>
<script>var expect = chai.expect;</script>
<!-- src files -->
<script src="narcissistic.js"></script>
<script src="morseCodeDecoder.js"></script>
<script src="windComponents.js"></script>
<script src="mineLocation.js"></script>
<!-- test files -->
<script src="test/narcissisticTests.js"></script>
<script src="test/morseTests.js"></script>
<script src="test/windTests.js"></script>
<script src="test/mineTests.js"></script>
<script>mocha.run();</script>
</body>
</html>
I tried to include jQuery in the main page via HTML Imports, but it only worked in Chrome. Both Safari and Firefox threw a "ReferenceError: $ is not defined" message on the first line of the JavaScript code in the main page. It appeared that the JavaScript code on the page was executed before the jQuery object was loaded in Safari or Firefox. I was using the latest versions of Polymer(0.4) and jQuery (2.1.1). Below is a minimal example:
jquery.html
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
main.html
<!DOCTYPE html>
<html>
<head>
<title>Import jQuery</title>
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="jquery.html">
</head>
<body>
<script>
$(document).ready(function() {
console.log("Hello World!");
});
</script>
</body>
</html>
Did I miss something obvious here? Thanks!
Neither Safari nor Firefox support HTMLImports today. Instead platform.js polyfills that feature using Ajax requests.
Without native browser support there is no way to make your <script> tag wait until the imports have finished loading. For this reason, to support the polyfills you have to wait until the HTMLImportsLoaded event fires (or put all your dependent code behind imports).
So, either:
<!DOCTYPE html>
<html>
<head>
<title>Import jQuery</title>
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="jquery.html">
</head>
<body>
<script>
addEventListener('HTMLImportsLoaded', function() {
$(document).ready(function() {
console.log("Hello World!");
});
});
</script>
</body>
</html>
or
code.html
<script>
$(document).ready(function() {
console.log("Hello World!");
});
</script>
main.html
<!DOCTYPE html>
<html>
<head>
<title>Import jQuery</title>
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="jquery.html">
</head>
<body>
<link rel="import" href="code.html">
</body>
<body onload="javascript function"> is working well on desktop browser, but is not working on iPhone. My iPhone seems like it can read external CSS files and JS files, since when I click button from page, it fires JS functions. But oddly, only onload event is not working. I am so clueless now. Can anybody tell me why can't I fire onload event on iPhone? Below is my code.
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 연습</title>
<meta name="viewport" content="width=480, user-scalable=1"/>
<link rel="stylesheet" href="../styles/test1.css" />
<script type="text/javascript" src="../scripts/fbsdk.js"></script>
<script type="text/javascript" src="../scripts/initcss.js"></script>
<script>
//document.addEventListener('DOMContentLoaded', checkLoginCase, false);
</script>
</head>
<body onload="checkLoginCase()">
<div id="wrap">
<header id="top">
<img src="../fbimg/logo.png" alt="상단이미지" title="상단이미지">
</header>
</div>
<button onclick="checkLoginCase()"> check fxn1</button>
<button onclick="checkAlert()"> check fxn2</button>
</body>
</html>
It should be working, but try to avoid inline JavaScripts.
Try this:
window.onload = (function(){
checkLoginCase();
});
//-or-
window.onload = checkLoginCase;