Now that I've made some progress on Juxtapose I wanted to review some of the pieces and decisions I've made when putting this together. There are some differences between what I'm using here and what we've used for other JavaScript projects at CTL.
In the src directory, there's a mix of
.js and .jsx files. I'm using
.jsx when there's jsx templating in the file,
which allows Emacs to automatically indent these sections
correctly using web-mode.
I've chosen to use the newer ecmascript 6 JavaScript syntax,
made possible by Babel.
You'll see the string es2015 in
.babelrc and .eslintrc - this denotes
features added to ecmascript 6 in 2015, which turn out to
be the essential ones I've been using, like import / export /
class.
Because I'm using a newer JavaScript syntax, jshint had trouble with this code. It turns out most people are using eslint instead of jshint for this, so I'm using that as well.
Testing is done with Jest - I figured it would be the most straight-forward to use because Facebook specifically built it to test React applications. It's just a unit-testing framework though, like QUnit or Mocha.
A key concept about making a React application is the balance
of "state" vs "props". This was covered in
Thinking in React, and the guideline is to
identify which components depend on which pieces of state,
and put that state in one place: the nearest common parent.
In my application that turns out to be the root class:
JuxtaposeApplication.