Hi I am new in reactjs when i am running server.js file from terminal it show blank page on browser. The code of index.html file is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/babel-
core/5.8.23/browser.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-
dom.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('app')
);
</script>
</body>
</html>
Thanks in advance.
This is a working example.
In your code, the wrong part is the CDN link to babel-core. You may always check your console when working with JS (on Google Chrome: Ctrl + shift + J on Windows, Cmd + Opt + J on IOS).
On the other hand, I thought this was a good opportunity to also introduce components (see ).
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First React Example</title>
</head>
<body>
<div id="hello"></div>
<script src="https://unpkg.com/react#15.0.0/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.0.0/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/babel">
var Greeting = React.createClass({
render: function() {
return (
<p>Hello World</p>
)
}
});
ReactDOM.render(
<Greeting/>,
document.getElementById('hello')
);
</script>
</body>
</html>
Related
i'm new in react.js, i used CDN links to compile some simple react.js code into my html, but i get this error:
"Uncaught SyntaxError: Unexpected token <"
then i searched and i saw somebody said that i should add:
type="text/babel" or type="text/jsx"
to my script tag, i did, but after that, my html didn't know my .js file!
this is my html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="fa">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title> title </title>
</head>
<body>
<div id="app"> </div>
<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>
<script type="text/babel" src="myreact.js"> </script>
</body>
</html>
and this is my react.js file:
'use strict';
class MyComponent extends React.Component{
render()
{
return "hello";
}
}
ReactDOM.render(
<MyComponent/> , document.getElementById('app')
);
please help me to code in react.js.
If you are using CDN, first two you need are to render React into a DOM and the third one (babel) enables JSX and ES6. I have reordered the imports, have included cdn for babel after importing react and react-dom.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="app"></div>
<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/babel.min.js"></script>
<script type="text/babel">
'use strict'
class Application extends React.Component {
render() {
return(
<div>React App</div>
);
}
}
ReactDOM.render(<Application />, document.getElementById('app'));
</script>
</body>
</html>
I am trying to test angular v1.6.2 components and ui-router together but can't get it to work. Here is my
html:
<!DOCTYPE html>
<html lang="en" ng-app="rrrwamac">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <test></test> -->
<ui-view></ui-view>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="index.js"></script>
<script src="test.js"></script>
</body>
</html>
component:
angular.module('rrrwamac').component('test', {
template: '<h3>Its the UI-Router<br>testing..!</h3>'
})
and config:
var app = angular.module('rrrwamac', ['ui.router']);
app.config(function($stateProvider) {
$stateProvider
.state('test', {
url: '',
component: 'test'
});
});
NOTE: When I place component tag
<test></test>
everything works, but when I try using ui-router and ui-view it doesn't.
I am also using live-server that places an extra script into my html and connects to http://127.0.0.1:8080/.
Any help greatly appreciated. Thanx.
I created a web page wherein I want to display there another HTML file. I used jQuery to do this but wasn't able to display the content of the file I have included. Why do you think this happened. Thanks a lot.
Here's my code for my mainpage.
sample.html
<html>
<head>
<title> Sample Only </title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script>
$(function(){
$('#footerLang').load("sampleFooter.html");
});
</script>
</head>
<body>
<div id="footerLang">
<h1></h1>
</div>
</body>
</html>
sampleFooter.html
<p> THIS IS A FOOTER </p>
It is highly possibly because you are placing the following block in head without $(document).on("ready", function() { ...; });
$(function(){
$('#footerLang').load("sampleFooter.html");
});
In this case jQuery will unable to find the #footerLang element since the DOM is not ready, you could revise the script as follow
$(function(){
$(document).on("ready", function () {
$('#footerLang').load("sampleFooter.html");
});
});
or move the script tag just before the </body>
<html>
<head>
<title> Sample Only </title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
</head>
<body>
<div id="footerLang">
<h1></h1>
</div>
<script>
$(function(){
$('#footerLang').load("sampleFooter.html");
});
</script>
</body>
</html>
I found out that this was just a browser compatibility issue. I launch it in Firefox and it worked.
I tried to add to textarea a line of the row numbers with this example:
http://alan.blog-city.com/jquerylinedtextarea.htm
this is my code and I allready use the css and js in my project:
<!DOCTYPE html>
<html>
<head>
<title>CODE</title>
<link href="jquery-linedtextarea.css" rel="stylesheet">
<script src="jquery-linedtextarea.js"></script>
</head>
<body>
<textarea class="lined" name="mytext"></textarea>
<script>
$(function () {
$(".lined").linedtextarea(
{ selectedLine: 1 }
);
$("mytext").linedtextarea();
});
</script>
</body>
</html>
what I wrong ?
It seems you forget to call Jquery Library...
Just add the code below on your <head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
And I believe you should delete that part:
$("mytext").linedtextarea();
I've made a code. It works for me. Check it out...
<html>
<head>
<title>JQuery LinedTextArea Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.js"></script>
<link href="http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>JQuery LinedTextArea Demo</h1>
<p>Add a scrollable lined area to a standard TextArea control.</p>
<textarea class="lined" rows="10" cols="60">
JavaScript was originally developed by Brendan
Eich of Netscape under the name Mocha,
which was later renamed to LiveScript,
and finally to JavaScript.
The change of name from LiveScript to JavaScript roughly
coincided with Netscape adding support for
Java technology in its Netscape Navigator
web browser.
</textarea>
<script>
$(function() {
$(".lined").linedtextarea(
{selectedLine: 1}
);
});
</script>
</body>
</html>
I have a html page with that is to call JSON data from a js file.
The html is below:
<html>
<head>
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript" src="modules/app.js" ></script>
</script>
<title>
</title>
</head>
<body ng-app="albumsApp">
<div data-ng-controller="albumController">
<ul data-ng-repeat="album in albums">
<li>
{{albums.title}}
</li>
</ul>
</div>
</body>
</html>
The "app.js" file that it calls is below:
**
var albumsApp = angular.module ('albumsApp',[])
albumsApp.factory('albumFactory',function() {
return {
getAlbums: function(){
alert("test");
return [{"artist": "Kid 606","title:":"Happiness"}];
},
};
});
albumsApp.controller ('albumController', function ($scope,albumFactory) {
$scope.albums = albumFactory.getAlbums();
});
**
There are nor errors in the console when I run it, just nothing appears.
The alert box "test" appears when I load the page so the function is getting called, it just doesn't display the JSON. Thank you for any replies.
change this:
{{albums.title}}
to
{{album.title}}
It is OK now, thank you very much.
HTML is
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript" src="modules/app.js" ></script>
</script>
<title>
</title>
</head>
<body ng-app="albumsApp">
<div data-ng-controller="albumController">
<ul data-ng-repeat="album in albums">
<li>
Artist is "{{album.artist}} " and title is {{album.title}}
</li>
</ul>
</div>
</body>
</html>
JS is
var albumsApp = angular.module ('albumsApp',[])
albumsApp.factory('albumFactory',function() {
return {
getAlbums: function(){
return [{"artist": "Kid 606","title":"Happiness"}];
},
};
});
albumsApp.controller ('albumController', function ($scope,albumFactory) {
$scope.albums = albumFactory.getAlbums();
});