node package manager
It’s your turn. Help us improve JavaScript. Take the 2017 JavaScript Ecosystem Survey »



Build Status

This stealJS extension let you steal *.jsx files. Steal-react-jsx use Babel's react present to transform *.jsx files.


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.

export default function(ctx){
  return <div>Hello, {}!</div>;

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!

<div>Hello, {}!</div>

That doesn't works!

Hello, {}!

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.


import "react-component.jsx";


import React from 'react';
import ReactDOM from 'react-dom';
let Component = React.createClass({
    render: function () {
        return (
            <div>my component!</div>
    <Component />,