React-Syntax-Sugar !!
This is a Babel plugin that extends the React syntax. And it's like sugar.
This project was inspired by Vue.
Do you use eslint?
Add eslint rules.
"rules":
Installation
require npm module:
# React-syntax-sugar is build during installation. npm install babel-cli -g
Install via NPM:
npm install react-syntax-sugar --save
Install via Yarn:
yarn add react-syntax-sugar
Babel config:
...
"plugins": [
"react-syntax-sugar"
]
Very well followed.
Syntax
Template
In
<template ="myTemplate"> <p>Template!!</p></template>
Out
const myTemplate = props return <div> <p>Template!!</p> </div>;;
Using the Template Syntax, you can create a more stylish code.
import Component from 'react'; <template ="myTemplate"> <p>Template!!</p></template> <template ="myTemplate2"> <p>Template!!</p></template> { return <div ="myApp"> <myTemplate /> <myTemplate2 /> </div>; }
Conditional
In
<div = />
Out
true ? <div /> : null
OR
In
const myNum = 100; <div ="myDiv" = />
Out
const myNum = 100; myNum === 100 ? <div ="myDiv" /> : null
OR (Else-if)
In
const myNum = 100; <div ="myDiv" = /><div ="myDiv2" = />
Out
myNum === 100 ? <div ="myDiv" /> :myNum === 200 ? <div ="myDiv2" /> : null
OR (Else)
In
const myNum = 100; <div ="myDiv" = /><div ="myDiv2" = /><div ="myDiv3" />
Out
myNum === 100 ? <div ="myDiv" /> :myNum === 200 ? <div ="myDiv2" /> : <div ="myDiv3" />
OR
In
const myNum = 100; <div ="myDiv" = /><div ="myDiv2" />
Out
myNum === 100 ? <div ="myDiv" /> : <div ="myDiv2" />
Loop
In
const items = 1 2 3; <p ="item in items"> item</p>
Out
items;
OR
In
const items = 1 2 3; <p ="(item, index) in items" = />
Out
items;
Apply
In
<template ="myTemplate" => <p>Hi!</p></template>
Out
const myTemplate = props return 3 === 5 ? <div> <p>Hi!</p> </div> : null;;
OR
In
const items = 1 2 3; <template ="myTemplate" ="(item, index) in items"> <p>Hi!</p></template>
Out
const myTemplate = props return items;;