catreact
=========

**This module is the Catavolt React Development Kit**


# Using this module in your project

* npm install --save catreact  
  

# Building the code (for contributors)

* If using Typescript (recommended), [WebStorm](https://www.jetbrains.com/webstorm/) is recommended as an ide, as it has very good Typescript support

* Install [Node.js](https://nodejs.org/en/) (5+ recommended) directly or use [nvm](https://github.com/creationix/nvm#installation) to easily manage installations

* From this project's root directory (catreact), run **'npm install'**. This should install all required packages to the 'node_modules' directory in 'catreact', including the catavolt javascript sdk.  


# Configuring WebStorm for Typescript:

* Open the catreact project root folder in WebStorm
* Go to WebStorm -> Preferences -> Languages and Frameworks -> Javascript
* Set the Language Level to JSX Harmony
* Go to WebStorm -> Preferences -> Languages and Frameworks -> TypeScript panel
* Choose 'Enable TypeScript Compiler'
* Make sure the path to the Node interpreter is correct
* Choose 'Use tsconfig.json' radio option
* Click 'Apply' and 'Ok'
* Open the TypeScript Compiler panel at the bottom of WebStorm and Choose 'Compile All' from the buttons on the left


# Dev Workflow  
 
You'll need to run the 'packager' which runs babel (ES6 transpiler) and a 'web formatter' on the javascript generated by your typescript files. This will generate a single 'bundle' file that can be included on webpages.  To see an example of this check the 'npm start' script in the package.json file.  This script uses 'watchify' with a babel plugin to acheive both transformations.  
  
* In a terminal, from the root 'catreact' directory, run **'npm start'** to run the packager in background. The process will watch for file changes and automatically create a new 'bundle.js' everytime you recompile your Typescript

* Try running 'index.html' in the 'examples/catavolt-client' directory (right click, run)
  
---