Skip to content

Commit 171962c

Browse files
author
Søren Brokær
committed
Added readme.md
1 parent 17e9c07 commit 171962c

File tree

1 file changed

+113
-0
lines changed

1 file changed

+113
-0
lines changed

readme.md

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
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

Comments
 (0)