react-syntax-sugar

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": {
  "no-undef": 0,
  "react/jsx-no-undef": 0,
  "no-unused-expressions": 0
}

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 name="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 name="myTemplate">
  <p>Template!!</p>
</template>

<template name="myTemplate2">
  <p>Template!!</p>
</template>

class MyApp extends Component {
  render() {
    return (<div className="myApp">
      <myTemplate />
      <myTemplate2 />
    </div>);
  }
}

Conditional

In

<div data-if={3 === 3} />

Out

true ? <div /> : null

OR

In

const myNum = 100;

<div className="myDiv" data-if={myNum === 100} />

Out

const myNum = 100;

myNum === 100 ? <div className="myDiv" /> : null

OR (Else-if)

In

const myNum = 100;

<div className="myDiv" data-if={myNum === 100} />
<div className="myDiv2" data-else-if={myNum === 200} />

Out

myNum === 100 ? <div className="myDiv" /> :
myNum === 200 ? <div className="myDiv2" /> : null

OR (Else)

In

const myNum = 100;

<div className="myDiv" data-if={myNum === 100} />
<div className="myDiv2" data-else-if={myNum === 200} />
<div className="myDiv3" data-else />

Out

myNum === 100 ? <div className="myDiv" /> :
myNum === 200 ? <div className="myDiv2" /> : 
                <div className="myDiv3" />

OR

In

const myNum = 100;

<div className="myDiv" data-if={myNum === 100} />
<div className="myDiv2" data-else />

Out

myNum === 100 ? <div className="myDiv" /> :
                <div className="myDiv2" />

Loop

In

const items = [1, 2, 3];

<p data-for="item in items">
  {item}
</p>

Out

items.map(item => {
  return <p>{item}</p>
});

OR

In

const items = [1, 2, 3];

<p data-for="(item, index) in items" key={index} />

Out

items.map((item, index) => {
  return <p key={index} />
});

Apply

In

<template name="myTemplate" data-if={3 === 5}>
    <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 name="myTemplate" data-for="(item, index) in items">
    <p>Hi!</p>
</template>

Out

const myTemplate = (props) => {
  return items.map((item, index) => {
    return (<div>
      <p>Hi!</p>
    </div>);
  });
};