|
| 1 | +# requirejs-react-jsx |
| 2 | + |
| 3 | +A RequireJS plugin for compiling React JSX files. Will use [react-tools](https://www.npmjs.org/package/react-tools) when compiling using r.js, and will use JSXTransformer when running in the browser in development. This allows us to support multiple bundles in r.js and exclude the JSXTransformer from all of them since we're requiring it dynamically and not explicitly. We're also not depending on [requirejs-text](https://github.com/requirejs/text). |
| 4 | + |
| 5 | +# Install |
| 6 | + |
| 7 | +`$ bower install requirejs-react-jsx --save` |
| 8 | + |
| 9 | +If you're not using [bower](http://bower.io/search/) to manage your dependencies (you should), you can just download the [jsx.js](jsx.js) file manually. |
| 10 | + |
| 11 | +Since we're also using [react-tools](https://www.npmjs.org/package/react-tools) for the build step while running in a node process, and not in the browser, you will to do install that also: |
| 12 | + |
| 13 | + `$ npm install react-tools --save` |
| 14 | + |
| 15 | +# Usage |
| 16 | + |
| 17 | +### Setup |
| 18 | + |
| 19 | +`app.js` |
| 20 | + |
| 21 | +```js |
| 22 | +define(function(require){ |
| 23 | + |
| 24 | + var React = require('react'); |
| 25 | + |
| 26 | + function App() { |
| 27 | + this.AppView = React.createClass({ |
| 28 | + render: function () { |
| 29 | + return ( |
| 30 | + <div> |
| 31 | + <p>Hello, React!</p> |
| 32 | + </div> |
| 33 | + ); |
| 34 | + } |
| 35 | + }); |
| 36 | + } |
| 37 | + |
| 38 | + App.prototype.init = function () { |
| 39 | + React.renderComponent(<this.AppView />, document.body); |
| 40 | + }; |
| 41 | + |
| 42 | + return App; |
| 43 | + |
| 44 | +}); |
| 45 | +``` |
| 46 | + |
| 47 | +`main.js` |
| 48 | + |
| 49 | +```js |
| 50 | +require.config({ |
| 51 | + paths: { |
| 52 | + "react": "bower_components/react/react-with-addons", |
| 53 | + "JSXTransformer": "bower_components/react/JSXTransformer", |
| 54 | + "jsx": "bower_components/requirejs-react-jsx/jsx" |
| 55 | + }, |
| 56 | + |
| 57 | + shim : { |
| 58 | + "react": { |
| 59 | + "exports": "React" |
| 60 | + }, |
| 61 | + "JSXTransformer": "JSXTransformer" |
| 62 | + }, |
| 63 | + |
| 64 | + jsx: { |
| 65 | + fileExtension: ".jsx" |
| 66 | + } |
| 67 | +}); |
| 68 | + |
| 69 | +require(['jsx!app'], function(App){ |
| 70 | + |
| 71 | + var app = new App(); |
| 72 | + app.init(); |
| 73 | + |
| 74 | +}); |
| 75 | +``` |
| 76 | + |
| 77 | +### Building |
| 78 | + |
| 79 | +Call with `$ node bower_components/r.js/dist/r.js -o build.js` |
| 80 | + |
| 81 | +In your [r.js](https://github.com/jrburke/r.js/) `build.js` config: |
| 82 | + |
| 83 | +``` |
| 84 | +// add `optimize=none` to skip script optimization (useful during debugging). |
| 85 | +
|
| 86 | +({ |
| 87 | + appDir: "./", |
| 88 | + baseUrl: "./", |
| 89 | + dir: "./compiled", |
| 90 | + mainConfigFile: "./main.js", |
| 91 | +
|
| 92 | + optimize: "uglify2", |
| 93 | + skipDirOptimize: true, |
| 94 | + generateSourceMaps: true, |
| 95 | + findNestedDependencies: true, |
| 96 | + preserveLicenseComments: false, |
| 97 | +
|
| 98 | + onBuildWrite: function (moduleName, path, singleContents) { |
| 99 | + return singleContents.replace(/jsx!/g, ''); |
| 100 | + }, |
| 101 | +
|
| 102 | + modules: [ |
| 103 | + { |
| 104 | + name: "main", |
| 105 | + exclude: ['jsx'] |
| 106 | + } |
| 107 | + ] |
| 108 | +}) |
| 109 | +``` |
| 110 | + |
| 111 | +# License |
| 112 | + |
| 113 | +[MIT](LICENSE) |
0 commit comments