开源软件名称：

开源软件地址：

开源软件介绍：

babel-plugin-react-directive

Use directive in React.

Now you can use r-if、r-for in jsx.

Usage:

1. Install: yarn add babel-plugin-react-directive --dev

2. Add to your .babelrc:

   {    plugins:[        'react-directive'    ]}

r-if:

• Before:

  render(){    const visible = true    return(        <div>            {                visible ? <div>content<div>                        : ''            }        </div>    )}

• Now:

  render(){    const visible = true    return(        <div>            <div r-if = {visible}>content</div>        </div>    )}

r-for:

• Before:

  render(){    const list = [1, 2, 3, 4, 5]    return(        <div>            {                list.map((item,index)=>(                	<div key={index}>{item}</div>                ))            }        </div>    )}

• Now:

  render(){    const list = [1, 2, 3, 4, 5]    return(        <div>            // auto set 'key' to the index.            <div r-for = {item in list}>{item}</div>            // or you can set the key manually.            <div r-for = {(item,index) in list} key = {index+1}>{item}</div>        </div>    )}