babel-plugin-direactive
一个Babel插件，为React开发者提供类似Vue的模板指令（如r-if、r-for等），使React代码更简洁易读，特别适合熟悉Vue的前端开发者。
• Copy the embed code to showcase this product on your website
• Share on X to spread the word about this amazing tool
一个babel插件，可以让React模板表达对熟练Vue的前端开发者更友好### 项目地址：https://github.com/wangzongxu/babel-plugin-direactive### 举例- 使用指令之前jsxfunction Component() { return ( <section> { isLoadong ? <div>Loading...</div> : error ? <div>{error}</div> : shopList.length > 0 ? ( <ul> { shopList.map(shop => ( <li key={shop.id}> <h5>{shop.name}</h5> <ul style={{ display: isShowProducts ? 'block' : 'none' }}> { shop.productList.map(product => ( <li key={product.id}> <h6>{product.name}</h6> </li> )) } </ul> </li> )) } </ul> ) : <div>Empty</div> } </section> )}- 使用指令之后jsxfunction Component() { return ( <section> <div r-if={isLoadong}>Loading...</div> <div r-else-if={error}>{error}</div> <ul r-else-if={shopList.length > 0}> <li r-for="shop in shopList" r-key="shop.id"> <h6>{shop.name}</h6> <ul r-show={isShowProducts}> <li r-for="product in shop.productList" r-key="product.id"> <h6>{product.name}</h6> </li> </ul> </li> </ul> <div r-else>Empty</div> </section> )}### 支持的指令- r-if- r-else-if- r-else- r-for/r-key- r-show- r-html- r-text- r-pre- r-model