The Joy of JSX
There is a series of complementary videos:
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.
examples.htmlfile has moved to
Elementclass now has a
fromString()factory method, simplifying 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
- The ignored and default properties are now cumulative. Recursive methods called from the
fromProperties()static factory method of the
Elementclass 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.
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
- The Schooner Cecilie site has undergone a significant revision since the videos were made. Please have a look at the source in your browser's developer tools.
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:
You will need to do this if you want to look at the examples.
Only building with Node.js is supported, the usage is as follows:
Once this is done, JSX can be used directly.
The source code for the two examples can be found in the
es6/examples directory. To view the compiled examples, open the
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