Dribbble Viewer - Inspirrre

May 18th 16

I wanted to learn ReactJS so I started a dummy project to work on.

Inspirrre

ReactJS

I thought that it would nice nice to write JSX in CoffeeScript (CJSX). Trying to set this up was a bit of a pain with karma and so I ended up using Jest.

Inspirrre

This is the config for Jest with CJSX:

preprocessor.js

var ReactTools = require('react-tools');
var cjsx = require('coffee-react-transform');
var coffee = require('coffee-script');

module.exports = {
  process: function(src, path) {
    if (path.match(/\.coffee$/)) {
      return coffee.compile(cjsx(src), {bare: true})
    } else {
      return ReactTools.transform(src);
    }
  }
};

package.json

"jest": {
  "scriptPreprocessor": "<rootDir>/preprocessor.js",
  "testFileExtensions": [
    "coffee",
    "js"
  ],
  "moduleFileExtensions": [
    "js",
    "json",
    "coffee"
  ],
  "globals": {
    "SCRIPTS": "<rootDir>/src/scripts"
  },
  "testPathIgnorePatterns": [
    "/node_modules/",
    "<rootDir>/node_modules/"
  ],
  "unmockedModulePathPatterns": [
    "<rootDir>/node_modules/react"
  ]
}

Source is here

Scaffold Bootstrap

Next