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 nearly all of 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
examplesdirectory in the
es6directory has been renamed 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
- More ES6 and some experimental syntax has been adopted, for example ES6 imports and exports.
- The static
fromProperties(...)factory method has been replaced with a static
fromClass(...)factory method. In most cases there is now no need to create your own such methods. You only need to do so if you want to make use of the
- The controller has been simplified in the MVC application.
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 dependencies with npm from within the project's root directory:
You can also run a development server, see the section on building later on.
There is nothing more to do other than import the package:
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
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
You can also start a small development server:
The examples will then be available at http://localhost:8888/ and will reload automatically when changes are made.