https://github.com/stealjs/steal-react-jsx
A StealJS plugin that enables importing renderers from `*.jsx` files.
https://github.com/stealjs/steal-react-jsx
Last synced: 6 months ago
JSON representation
A StealJS plugin that enables importing renderers from `*.jsx` files.
- Host: GitHub
- URL: https://github.com/stealjs/steal-react-jsx
- Owner: stealjs
- License: mit
- Created: 2015-11-16T11:57:13.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-06-19T19:36:19.000Z (almost 6 years ago)
- Last Synced: 2024-08-09T10:02:21.734Z (10 months ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/steal-react-jsx
- Size: 18.6 KB
- Stars: 5
- Watchers: 13
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# steal-react-jsx
[](https://travis-ci.org/stealjs/steal-react-jsx)
This stealJS extension let you steal `*.jsx` files.
`Steal-react-jsx` use [Babel's react present](http://babeljs.io/docs/plugins/preset-react/) to transform `*.jsx` files.
## Usage
It is up to you if you are using `steal-react-jsx` to import a renderer function or a React Component.
### Import a renderer function
If you would like to import a `.jsx` template to your app, you can simply use one of the module loader syntax like `es6`, `commonjs` or `steal`.
For example (es6):
```
import renderer from "my-jsx-template.jsx";
```
Your template can be either a javascript module or plain HTML.
#### Javascript Module
If you are writing the template as a javascript module you have to make sure you set a __default export__.
The exported function have to return the HTML string.
```javascript
export default function(ctx){
return
Hello, {ctx.name}!;
}
```
#### Plain HTML
You can import a `.jsx` file thats content is plain HTML. `steal-react-jsx` does convert it into a renderer function for you.
__We expect that the content of the `.jsx` file is proper HTML and starts with a HTML tag !__
That works!
```html
Hello, {ctx.name}!
```
That __doesn't__ works!
```html
Hello, {ctx.name}!
```
You have access to the component's context by using the `ctx` object in your template.
### Import React Component
If you want to import a whole React component written in `jsx` you can simply import it into your app.
__app.js__
```
import "react-component.jsx";
```
__react-component.jsx__
```
import React from 'react';
import ReactDOM from 'react-dom';
let Component = React.createClass({
render: function () {
return (
my component!
);
}
});
ReactDOM.render(
,
document.getElementById('demo')
)
```