Here is HCJ Hello World:

	lt;!DOCTYPE	nbsp;HTML	gt;

	lt;html	gt;

	nbsp;	nbsp;	nbsp;	nbsp;	lt;head	gt;

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	lt;meta	nbsp;name="viewport"	nbsp;content="width=device-width,	nbsp;initial-scale=1"	gt;

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	lt;link	nbsp;rel="stylesheet"	nbsp;type="text/css"	nbsp;href="hcj.css"	gt;

	nbsp;	nbsp;	nbsp;	nbsp;	lt;/head	gt;

	nbsp;	nbsp;	nbsp;	nbsp;	lt;body	gt;

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	lt;script	nbsp;src="hcj.min.js"	gt;	lt;/script	gt;

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	lt;script	gt;

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;var	nbsp;pageC	nbsp;=	nbsp;hcj.component.text('Hello	nbsp;World');

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;var	nbsp;rootInstance	nbsp;=	nbsp;hcj.rootComponent(pageC);

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	lt;/script	gt;

	nbsp;	nbsp;	nbsp;	nbsp;	lt;/body	gt;

	lt;/html	gt;

And the rendered result, in an iframe:

We will go through the Hello World example line by line.

	lt;!DOCTYPE	nbsp;HTML	gt;

The DOCTYPE declaration prevents the browser from rendering in quirks mode.

	lt;html	gt;

	nbsp;	nbsp;	nbsp;	nbsp;	lt;head	gt;

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	lt;meta	nbsp;name="viewport"	nbsp;content="width=device-width,	nbsp;initial-scale=1"	gt;

Using this meta tag causes the website to appear at a reasonable size on mobile devices.

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	lt;link	nbsp;rel="stylesheet"	nbsp;type="text/css"	nbsp;href="hcj.css"	gt;

The hcj.css file is the only CSS file that should be included in your HCJ website. It provides a CSS reset and some other styles used by HCJ.

	nbsp;	nbsp;	nbsp;	nbsp;	lt;/head	gt;

	nbsp;	nbsp;	nbsp;	nbsp;	lt;body	gt;

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	lt;script	nbsp;src="hcj.min.js"	gt;	lt;/script	gt;

The hcj.js javascript file contains the HCJ framework proper. It must be placed inside the body tag because it depends on the body element being present for some initialization.

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	lt;script	gt;

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;var	nbsp;pageC	nbsp;=	nbsp;hcj.component.text('Hello	nbsp;World');

This defines an HCJ component called pageC. Suffixing components with C is a common practice. This component is defined using the built-in hcj.component.text function to contain the string "Hello World".

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;var	nbsp;rootInstance	nbsp;=	nbsp;hcj.rootComponent(pageC);

The hcj.rootComponent function bootstraps any component, rendering it as the root-component of a page.

	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	nbsp;	lt;/script	gt;

	nbsp;	nbsp;	nbsp;	nbsp;	lt;/body	gt;

	lt;/html	gt;

That is all!

Source: git://hcj-js.org/hcj

Browse: https://hcj-js.org/source/

Email: info@hcj-js.org