react-titanium
A React custom renderer for Appcelerator® Titanium™ SDK.
This renderer should currently be considered as experimental and subject to
change since it works on a beta version of React (0.14.0-beta3
).
Installation
$ cd Titanium_Workspace/MyApp # Initialize a node package here $ npm init # Let you use transformers (such as Babel) and npm packages $ npm install --save-dev titaniumifier$ node_modules/.bin/install-titaniumifier-plugin$ node_modules/.bin/install-titaniumifier-plugin --no-simulate # React-titanium requires v0.14 $ npm install --save react@0.14.0-beta3 react-titanium# Let’s write in ES2015! $ npm install --save-dev babelify babel-runtime
Edit your package.json file so it looks like this:
// This is the starting point of our app "main": "Resources/app.js" // Hook Babel transformation into Titaniumifier "titaniumifier": "transforms": "babelify": "stage": 0 "optional": "runtime" "plugins": "react-titanium/lib/babel-plugin:before"
Test your installation:
$ [appc] ti build --platform ios
Example
;; state = counter: 0 ; this; { if thisopened || !window return; thisopened = true; window; } { return <window onClick= thisincrement ref= thisopen > <label color="#09f"> We got to: thisstatecounter </label> </window> ; } ;
Building and Development
Setup
$ git clone git@github.com:yuchi/react-titanium.git$ cd react-titanium$ npm install
Compiling (ES2015 to ES5)
$ npm run compile
Testing (temporary solution)
$ cd Titanium_Workspace$ titanium create # Follow the instructions to create an app $ cd MyApp$ npm init$ npm install --save-dev titaniumifier$ node_modules/.bin/install-titaniumifier-plugin$ node_modules/.bin/install-titaniumifier-plugin --no-simulate$ npm install --save-dev babelify babel-runtime # Edit the package.json!! $ npm install --save react@0.14.0-beta3$ ln -s /path/to/my/react-titanium node_modules/react-titanium# Then compile and... $ titanium build --platform ios # ...have fun!
Acknowledgements
I was finally able to grok how to implement a custom renderer thanks to
Yomguithereal’s fantastic react-blessed
.
Go thank him with a follow or a star! 👍
License
MIT