I want to learn ReactJS by following this tutorial. Although I'm not able to run the Hello World example in my browser.
I try running the following code:
<head>
<meta charset="UTF-8">
<title>Dev ReactJS</title>
<!-- <script src="build/react.js"></script> -->
<script src="build/react-with-addons.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<div id="mount"></div>
<script type="text/jsx">
/** #jsx React.DOM */
React.render(
React.DOM.h1(null, 'Hello, world!'),
document.getElementById('mount')
);
</script>
</body>
</html>
Which generates the error shown below:
Uncaught TypeError: React.render is not a function - Inline JSX script:3
I've read some things about changes made in v0.14, but I'm using the starter kit including v0.11. I'm uploading to my website trough FTP, or is it necessary to run on, for example, a NodeJS server? I can't find anything about that..
Thanks in advance.
That article was written in 2014, There have been lots of changes in the react ecosystem. This guide react-howto by Pete Hunt will prove useful in your journey into the sometimes overwhelming react ecosystem
Sure. Because tutorial too old, new versions of React.js doesn't contain render, instead you have to use react-dom. See details on official Facebook page (with examples)
Related
I've got a little project in Angular. I'm trying to keep everything in the Single Responsibility way and
I'm quite happy with me app structure. The only think I feel is not looking very good is index.html. All js files are included on
the bottom of the file and I do not like the look of it. I'm adding more files (controllers, services, etc) as I go and the list
could grow quite long.
So my question is: Is it normal,that the index file includes all these or is there way to move all these in a single file and reference that in the index.html?
<html>
<head>
...
</head>
<body>
...
...
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-route.js"></script>
<script src="assets/js/angular-touch.js"></script>
<script src="assets/js/angular-sanitize.js"></script>
<script src="assets/js/angular-animate.min.js"></script>
<script src="assets/js/jquery-2.1.3.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="app/app.js"></script>
<script src="app/app.routes.js"></script>
<script src="controllers/controllerOne.js"></script>
<script src="controllers/controllerTwo.js"></script>
<script src="controllers/controllerThree.js"></script>
<script src="directives/directiveOne.js"></script>
<script src="directives/directiveTwo.js"></script>
<script src="services/serviceOne.js"></script>
<script src="services/serviceTwo.js"></script>
<script src="services/serviceThree.js"></script>
</body>
</html>
Update 07/04/2015
I have end up using Gulp. For anyone looking for bit of help on this, I have followed this small tutorial: https://medium.com/#dickeyxxx/best-practices-for-building-angular-js-apps-266c1a4a6917
There are few possible solutions that I know that will automatically inject your script tags for index.html:
Using Gulp - Task / Build runner.
You can use Gulp-Inject which is:
a stylesheet, javascript and webcomponent reference injection plugin
for gulp
Grunt - JavaScript Task Runner
You can use Grunt-Injector for:
Inject references to files into other files (think scripts and stylesheets into an html file)
Another option which I didn't use is RequireJS.
See - http://www.startersquad.com/blog/angularjs-requirejs/
You can find many discussions on Gulp vs Grunt, Both will make your life easier and solve your problem.
See:
Grunt vs Gulp
Another Grunt vs Gulp
What i would suggest is using a task runner of some sort to concatenate all your files, and build them in to something like a single 'app.js' file.
My personal preference is gulp, but another popular alternative is grunt. Here is a nice introduction to using gulp with angular which I suggest checking out.
Using require.js , u can manage all tags in one line
This approach is utterly normal for a development stage as it facilitates debugging. You shouldn't be worried about the way it looks.
However, when releasing your application to production you should concatenate all scripts into one single file as this'll significantly boost your bootstrap time. There are different ways of achieving this goal and usually they involve usage of front-side build tools like Grunt or Gulp. It's is up to you to decide which tool will work best for you.
Moreover, require.js has built-in modularity with a easy-to-use tool for concatenation, though, it's argued that Angular benefits from using it as Angular has it's own modularity. The main advantage of require.js is that there's no need to pay attention to order in which your files are concatenated since it's responsibility of the tool. Unfortunately, it costs a lot of boilerplate code.
As a simple solution, in HTML5 you can do this
<link rel="import" href="header.html">
and place all your
<script src="libs/....js"></script>
<script src="libs/....js"></script>
<script src="libs/....js"></script>
in the header.html
It's ok. Separating different scripts into different files is a part of basic recommandations for code styling.
The best way is to use Google Style recommendations in work. These 2 are for html&css and javascript:
https://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
I have a asp.net MVC app, and I want to start unit testing the javascript closures I use with the app. I have watched a few demo's on plural site, and played with the sample code in the github repository.
however, all the actual mocha.js examples assume I want to host with node, and that the npm system will get all of my dependencies. At this time I cannot install node.js on my laptop. the test code in the plural site courses all are horribaly orginized, and when I look at the files named "mocha.js" they actually contain the require.js code as well.
in any regards, Does anyone has a good "html" hostable template for mocha.js code, and a nice way to orginize the dependencies outside of the node npm system?
Mocha can run in the browser without having to worry about dependencies. The documentation has a section about it. As shown in the documentation, you need a page that loads and starts Mocha, and loads anything else you need:
<html>
<head>
<meta charset="utf-8">
<title>Mocha Tests</title>
<link rel="stylesheet" href="mocha.css" />
</head>
<body>
<div id="mocha"></div>
<!-- Load the libraries you need -->
<script src="jquery.js"></script>
<script src="expect.js"></script>
<script src="mocha.js"></script>
<!-- Tell Mocha what interface to use for the tests. You must do this
before you read the test files. -->
<script>mocha.setup('bdd')</script>
<!-- Load the test files. This is where your tests would be located. -->
<script src="test.array.js"></script>
<script src="test.object.js"></script>
<script src="test.xhr.js"></script>
<!-- Run the tests. -->
<script>
mocha.checkLeaks();
mocha.globals(['jQuery']);
mocha.run();
</script>
</body>
</html>
I've added some comments above to indicate what is going on.
I've installed Microsoft Expression Web 4, installed php 5.3.28, renamed the php.ini-production to php.ini, did display_errors=on, did cgi.force_redirect=0, switched the positions of php_mbstring.dll and php_exif.dll (ran php.exe and it said it could not find php_mbstring.dll), directed expression web to the php-cgi.exe, and forced expression web 4 to boot a server for every test. I run the sample code for php information as follows...
file name - "index.php"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled 1</title>
</head>
<body>
<?php
phpinfo() ;
?>
</body>
</html>
I get a blank page (WSOD), and am still looking for a solution.
In short I've been following the instructions given here.
And followed up with some additional potential fixes with little success.
Thank you in advance for your time.
Solved the problem, did a full reinstall of all products involved.
I want to add one HTML file into another.
For example: I have header.html and footer.html
Now I am trying to create aboutus.html where I want to add these two HTML files
there is no dynamic code in these file except JavaScript.
How can I do this without using any scripting language except JavaScript and CSS?
Server Side Includes (SSI) exist for this particular functionality. However, you need to have the server configured for such includes. Apache supports it. Not sure about other web servers.
or Server Side Includes (SSI), all embedding is done there on the server side...
In the case of web sites with no dynamic content but have common elements, I generate the final pages on my development machine using Perl's Template Toolkit and upload the resulting static HTML files to the server. Works beautifully.
For example:
header.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>[% title %]</title>
<link rel="stylesheet" href="/site.css" type="text/css">
<meta name="description" content="[% description %]">
<meta name="keywords" content="[% keywords.join(',') %]">
</head>
<body>
<div id="banner">
<p>Banner</p>
</div>
footer.html
<address>
Last update:
[%- USE date -%]
[%- date.format(date.now, '%Y-%m-%d %H:%M:%S') -%]
</address>
</body>
</html>
aboutus.html
[%- INCLUDE header.tt.html
title = 'About Us'
description = 'What we do, how we do it etc.'
keywords = 'rock, paper, scissors'
-%]
<h1>About us</h1>
<p>We are nice people.</p>
You can now use tpage or ttree to build your pages.
The only way to do this on the client side without javascript is to use frames or iframes. If you want to use javascript, you can use AJAX. Most javascript frameworks provide corresponding convenience methods (e.g. jQuery's load function).
Obviously there are many server side solutions, including the popular SSI extension for apache (see other posts).
I'm not entirely sure what it is you want but an entirely client side method of doing it would be to embed them with the <object> tag.
<html>
<head>
<title>About Us</title>
</head>
<body>
<object data="header.html"><!--Something to display if the object tag fails to work. Possibly an iFrame--></object>
<!--Content goes here...-->
<object data="footer.html"></object>
</body>
</html>
I do not think that this would work if either header.html or footer.html have javascript that accesses the parent document. Getting it to work the other way might be possible though.
Check out ppk's website (quirksmode.org), and go to the javascript archives,
(http://quirksmode.org/js/contents.html). He uses an ajax function he wrote called sendRequest (found at http://quirksmode.org/quirksmode.js). Since IE9+ plays nice with standards, I've simplified it some:
function sendRequest(url,callback,postData) {
var req = new XMLHttpRequest();
if (!req) return;
var method = (postData) ? "POST" : "GET";
req.open(method,url,true);
req.setRequestHeader('User-Agent','XMLHTTP/1.0');
if (postData)
req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
req.onreadystatechange = function () {
if (req.readyState != 4) return;
if (req.status != 200 && req.status != 304) {
// alert('HTTP error ' + req.status);
return;
}
callback(req);
}
if (req.readyState == 4) return;
req.send(postData);
}
Then use the sendRequest function by wrapping the setFooter, setHeader functions and any other content functions around it.
why not use php or any other side scripting language?
doing this with javascript will not all users allow to watch your page.
Whilst this can be done with JS in a number of ways (AJAX, iframe insertion) it would be a very bad idea not to do this within the mark-up directly or (much) better on the server side.
A page reliant on JS for it's composition will not be fully rendered on a significant proportion of user's browsers, and equally importantly will not be correctly interpreted by google et al, if they like it at all.
You can do it, but please, please, don't.
Obviously header.html and footer.html are not html files -- with full fledged headers etc. If you have just html snippets and you want to include them so you can create different pages - like aboutus.html, terms.html, you have a couple of options:
Use a framework like Rails - which allows you to use layouts and partials. [** heavy **]
Write a simple tool that will generate all the files by concat-ing the appropriate files.
I assume you are doing this to avoid duplicating header and footer content.
Another way would be using ajax to include the remote html files.
Framesets would be the way to do this without any script or serverside influences.
<frameset rows="100,*,100">
<frame name="header" src="header.html" />
<frame name="content" src="content.html" />
<frame name="footer" src="footer.html" />
</frameset>
HTML5 framesets:http://www.w3schools.com/tags/html5_frameset.asp
This is a very dated solution, most web hosts will support server side includes or you could use php to include your files
http://php.net/manual/en/function.include.php
Cheers
Is there a decent way with static HTML/XHTML to create common header/footer files to be displayed on each page of a site? I know you can obviously do this with PHP or server side directives, but is there any way of doing this with absolutely no dependencies on the server stitching everything together for you?
Edit: All very good answers and was what I expected. HTML is static, period. No real way to change that without something running server side or client side. I've found that Server Side Includes seem to be my best option as they are very simple and don't require scripting.
There are three ways to do what you want
Server Script
This includes something like php, asp, jsp.... But you said no to that
Server Side Includes
Your server is serving up the pages so why not take advantage of the built in server side includes? Each server has its own way to do this, take advantage of it.
Client Side Include
This solutions has you calling back to the server after page has already been loaded on the client.
JQuery load() function can use for including common header and footer. Code should be like
<script>
$("#header").load("header.html");
$("#footer").load("footer.html");
</script>
You can find demo here
Since HTML does not have an "include" directive, I can think only of three workarounds
Frames
Javascript
CSS
A little comment on each of the methods.
Frames can be either standard frames or iFrames. Either way, you will have to specify a fixed height for them, so this might not be the solution you are looking for.
Javascript is a pretty broad subject and there probably exist many ways how one might use it to achieve the desired effect. Off the top of my head however I can think of two ways:
Full-blown AJAX request, which requests the header/footer and then places them in the right place of the page;
<script type="text/javascript" src="header.js"> which has something like this in it: document.write('My header goes here');
Doing it via CSS would be really an abuse. CSS has the content property which allows you to insert some HTML content, although it's not really intended to be used like this. Also I'm not sure about browser support for this construct.
The simplest way to do that is using plain HTML.
You can use one of these ways:
<embed type="text/html" src="header.html">
or:
<object name="foo" type="text/html" data="header.html"></object>
You can do it with javascript, and I don't think it needs to be that fancy.
If you have a header.js file and a footer.js.
Then the contents of header.js could be something like
document.write("<div class='header'>header content</div> etc...")
Remember to escape any nested quote characters in the string you are writing.
You could then call that from your static templates with
<script type="text/javascript" src="header.js"></script>
and similarly for the footer.js.
Note: I am not recommending this solution - it's a hack and has a number of drawbacks (poor for SEO and usability just for starters) - but it does meet the requirements of the questioner.
you can do this easily using jquery. no need of php for such a simple task.
just include this once in your webpage.
$(function(){
$("[data-load]").each(function(){
$(this).load($(this).data("load"), function(){
});
});
})
now use data-load on any element to call its contents from external html file
you just have to add line to your html code where you want the content to be placed.
example
<nav data-load="sidepanel.html"></nav>
<nav data-load="footer.html"></nav>
The best solution is using a static site generator which has templating/includes support. I use Hammer for Mac, it is great. There's also Guard, a ruby gem that monitors file changes, compile sass, concatenate any files and probably does includes.
The most practical way is to use Server Side Include. It's very easy to implement and saves tons of work when you have more than a couple pages.
HTML frames, but it is not an ideal solution. You would essentially be accessing 3 separate HTML pages at once.
Your other option is to use AJAX I think.
You could use a task runner such as gulp or grunt.
There is an NPM gulp package that does file including on the fly and compiles the result into an output HTML file. You can even pass values through to your partials.
https://www.npmjs.com/package/gulp-file-include
<!DOCTYPE html>
<html>
<body>
##include('./header.html')
##include('./main.html')
</body>
</html>
an example of a gulp task:
var fileinclude = require('gulp-file-include'),
gulp = require('gulp');
gulp.task('html', function() {
return gulp.src(['./src/html/views/*.html'])
.pipe(fileInclude({
prefix: '##',
basepath: 'src/html'
}))
.pipe(gulp.dest('./build'));
});
You can try loading them via the client-side, like this:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>
<div id="headerID"> <!-- your header --> </div>
<div id="pageID"> <!-- your header --> </div>
<div id="footerID"> <!-- your header --> </div>
<script>
$("#headerID").load("header.html");
$("#pageID").load("page.html");
$("#footerID").load("footer.html");
</script>
</body>
</html>
NOTE: the content will load from top to bottom and replace the content of the container you load it into.
No. Static HTML files don't change. You could potentially do this with some fancy Javascript AJAXy solution but that would be bad.
Short of using a local templating system like many hundreds now exist in every scripting language or even using your homebrewed one with sed or m4 and sending the result over to your server, no, you'd need at least SSI.
The only way to include another file with just static HTML is an iframe. I wouldn't consider it a very good solution for headers and footers. If your server doesn't support PHP or SSI for some bizarre reason, you could use PHP and preprocess it locally before upload. I would consider that a better solution than iframes.