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'));
Related
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>
when I am typing react.js code that is given in bucky's react.js tutorial series it is not getting executed but when pasting it from bucky's github repo. it is getting executed.....Can any one help me out please...and the code is.
<html>
<head>
<title>
creating component
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="C:\Users\hatim\Desktop\react\React-Boilerplate-master\src\js\react.min.js"></script>
<script type="text/javascript" src="C:\Users\hatim\Desktop\react\React-Boilerplate-master\src\js\react-dom.min.js"></script><script type="text/javascript" src="C:\Users\hatim\Desktop\react\React-Boilerplate-master\src\js\browser.min.js"></script>
</head>
<body>
<div id="container_new"></div>
<script type="text/babel" >
var mycomponent=React.createClass({
render: function(){
return(<p>this is new component </p>);
}
});
ReactDOM.render(<mycomponent />,document.getElementById('container_new'));
</script>
</body>
</html>
I don't believe you can include the JavaScript files in the context of the location on your hard drive "c:\". I think you need to be running them using a web server (IIS, Node, etc.) and then include them using relative or absolute web paths (http://localhost/mytest/src/js/react-dom.min.js).
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>
trying beginner's Angular using tutorial here: https://www.youtube.com/watch?v=WuiHuZq_cg4. i think files are in proper places, permissions set, yet my index.html shows nothing on my browser, and Chrome dev tools show everything in place, no errors. code is here" https://gist.github.com/9ad771c60d33fc020216.git, but also here: [what am i missing??]
index.html:
<!doctype html>
<html ng-app>
<head>
<script src="https://code.angularjs.org/1.0.0rc3/angular-1.0.0rc3.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="js/todo.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"
</head>
<body>
<div ng-controllers="TodoCtrl">
{{totalTodos}}
</div>
</body>
</html>
todo.js:
function TodoCtrl($scope) {
$scope.totalTodos = 4;
}
Try
ng-controller="TodoCtrl"
instead of
ng-controllers="TodoCtrl"
S won't tag with controller
I was actually trying to find some tutorials on Handlebar.js & I found this http://javascriptplayground.com/blog/2012/05/javascript-templating-handlebars-tutorial
But it is not actually working as expected.
What I am doing is I have an index.html file,
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js" type="text/javascript" charset="utf-8"></script>
<script src="app.js" type="text/javascript" charset="utf-8"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Messing with Handlebars</title>
</head>
<body>
<script id="ajax-comment" type="text/x-handlebars-template">
<li>
<span class="meta">{{name}} on {{date}}</span>
<p>{{comment}}</p>
</li>
</script>
</body>
</html>
and an app.js which contains the code.
var source = $("#ajax-comment").html();
var template = Handlebars.compile(source);
var data = {
name : "Jack",
date : "12/04/12",
comment : "This is a really awesome tutorial. Thanks."
};
$("ul").append(template(data));
But all I am getting is a blank page. Any mistake I am making here? Detailed explanations would be helpful.
"ul" element doesn't exist, you must append it to something which actually exists.
just add a <ul></ul> somewhere in the body.
fiddle here
You might want to check the answer to this question
Seems like the jquery function was not able to access the element since the DOM wasnt loaded before the call was made. I tried some more combinations after the initial changes of calling the app.js code(without wrapping it inside a function) only after the DOM was loaded which worked.
For example I moved the script call just before the </body> which worked too.
... <script src="app.js" type="text/javascript" charset="utf-8"></script>
</body>
It also helped me to know whether we use HTML or XHTML as our document type, to understand this problem better.
try putting ref to your external JS at bottom, just above the closing body tag
eg
<body>
<ul></ul>
<!-- last thing on the page-->
<script src="app.js" type="text/javascript"></script>
</body>
this seemed to have solved it for me