babel-plugin-transform-react-xjs

babel-plugin-transform-react-xjs

Babel plugin for transforming do{ } statements into React compatable markup. Most comperable to babel-plugin-transform-react-jsx, simply furnishing a different paradigm. May be used along size JSX and it's respective babel-plugins, or used as a feature-complete replacement, depending on your needs.

Install

npm install babel-preset-expressive-react

.babelrc

{
    "plugins": [
        "expressive-react"
    ]
}

Entry Points

babel-plugin-transform-expressive-react will enter context upon encountering the DoExpression e.g. do{} in various contexts. It will also do so for any method with the name "do" e.g. do(){}

For more information on actual syntax, consult the main repo.

Element Expressions

let element = do {
    div();
}

//equivalent to in JSX

let element = (
    <div></div>
)

//outputs

let element = React.createElement("div", {})

Arrow Components

let SayHi = ({ to }) => do {
    div `Hello ${ to }`;
}

//equivalent to in JSX

let SayHi = (props) => (
    <div>Hello {props.to}</div>
)

//outputs

let SayHi = function(props) {
    return React.createElement("div", {}, "Hello " + props.to)
}

Do Component Method

class Greet extends React.Component {
    do(props){
        SayHi(to `World`)
    }
}

//equivalent to in JSX

class Greet extends React.Component {
    render(){
        var { props } = this;
        return (
            <SayHi to="World" />
        )
    }
}

Disclaimer

This plugin will conflict with babel-plugin-do-expressions. Make sure your project is not using it or the following presets as they do inherit this plugin.

• stage-0
• react-native-stage-0

License

MIT License