Setup Dev Environment
11 Nov 2015

React

Note: For now, we’ll use .jsx files and transform them one by one into .js files, using a configured File Watcher in PhpStorm/WebStorm. Then, every .js file will be included using the usual $this->Html->script() helper in the necessary views (.ctp files).

In the future we should investigate more complex methods like Webpack.

To be able to write JSX files and transform them into plain JavaScript you’ll need to install the following prerequisites:

Configure React in PhpStorm/WebStorm

See Using ReactJS in JavaScript and TypeScript.

PhpStorm/WebStorm File Watcher

In PhpStorm/WebStorm, configure a file watcher for your .jsx files as below:

jsx-watcher

Make sure the Program points to the babel executable (on Windows this will be a .exe), replace the default Arguments field with the following:

--presets react,es2015 --source-maps --minified --out-file $FileNameWithoutExtension$.js $FilePath$

and in the Environment variables field add NODE_ENV=production to prevent babel from inlining the __source key in the generated JS files.

Now, you can create .jsx files that will be automatically transformed into corresponding .js files in the same directory, on every save.