JSX support for Easy elements.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



JSX support for Easy elements.

The Joy of JSX

There is a series of complementary videos:

The Joy of JSX


Many of these points have been picked up in the last video in the series, 'Traditional MVC', which has been re-recorded. Also bear in mind that the changes are to the source code of the Easy project, not this one. The files of interest are the element.js, react.js and jsx.js files.

  • The examples.html file has moved to examples/index.html.
  • The Element class now has a fromString() factory method, simplifying the React.createElement() method.
  • The addTo(), etc methods have been taken out of the JSX mixin. The updateParentContext() method is now called directly from the loop over the child elements in the applyProperties() method.
  • The ignored and default properties are now cumulative. Recursive methods called from the fromProperties() static factory method of the Element class will traverse the superclasses in order to find them.
  • It is best to call the assignContext() method from an initialise() method called from within your own fromProperties() static factory method rather than from within parentContext() methods. Initialise methods are introduced in the re-recorded video.
  • The assignContext() method has been improved. It no longer returns the names of the context properties that have been assigned, there didn't seem much point. The default for the thenDelete argument is true.


You can install Juxtapose with npm:

npm install juxtapose

You can also clone the repository with Git...

git clone https://github.com/djalbat/juxtapose.git

...and then install the necessary modules with npm from within the project's root directory:

npm install


Only building with Node.js is supported, the usage is as follows:


Once this is done, JSX can be used directly.

Compiling from source

Automation is done with npm scripts, have a look at the package.json file. The pertinent commands are:

npm run build-debug
npm run watch-debug

As well as building the Juxtapose library itself, this will build the examples. The source code for the two examples can be found in the es6/examples directory. To view the compiled examples, open the examples/index.html file.