Используйте директивы в React

Теперь вы можете использовать r-if и r-for в JSX.

Использование:

1. Установите: yarn add babel-plugin-react-directive --dev.

2. Добавьте в ваш .babelrc:

   {
       plugins:[
           'react-directive'
       ]
   }

r-if:

• До:

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

• Теперь:

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

r-for:

• До:

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

• Теперь:

  render(){
      const list = [1, 2, 3, 4, 5]
      return(
          <div>
              // автоустановка ключа на индекс.
              <div r-for = {item in list}>{item}</div>
              // или вы можете установить ключ вручную.
              <div r-for = {(item,index) in list} key = {index+1}>{item}</div>
          </div>
      )