3 ms·
> and how templates and code should be kept separate... But then I tried it, and I realized just how wrong I was. Indeed. In fact, experiments with different
by eric_bullington 11y ago
> and how templates and code should be kept separate... But then I tried it, and I realized just how wrong I was.
Indeed. In fact, experiments with different configurations have led me to start developing large React applications using a system that organizes applications by components like this:
src/index.js
src/ButtonThing/index.js
src/ButtonThing/view.js
src/ButtonThing/controller.js
src/ButtonThing/model.js
src/FormThing/index.js
src/FormThing/view.js
src/FormThing/controller.js
src/FormThing/model.js
Then, you can simply import these components using something like:
var FormThing = require('../FormThing');
And you can compose them, with one large component consisting of multiple small ones. For this reason, I've found it useful with large applications to create a separate library of smaller components that are used in multiple larger components, so I don't end up having to hard-code multi-level imports (ie, '../../../MyUsefulComponent').
You'd need to use a slightly different structure with ES6 modules, but the main idea is the same.
If you're using something like Flux to manage data, you can probably skip using the `model.js` modules and simply stick with a `view.js` and `controller.js` (or however you wish to name it).
The way I've done this, all CSS goes into the view.js modules, but you could use a separate style.css in each component.
I've found that this organizational approach works great for large JavaScript applications.
Finally, regarding testing, with React I've finally been able to consistently apply easy command-line unit testing to DOM code without worrying about setting up PhantomJS or JSDom and struggling to get initial tests working. It's made unit testing much, much easier, and I find I'm much more inclined to keep a high level of test coverage maintained with React applications than with previous JS applications I've created. React makes testing very easy (I know AngularJS also is said to offer easy testing, but I've not used it outside of a few small JS applications).