trot

Синопсис

Это помощник командной строки для создания компонентов React.

Установка

 npm install -g trot

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

 trot comp -c Parent     /* Creates new react components 'Parent' */
trot nest Parent Child  /* Nests child components in render function of parent */

Помощь

 trot --h

Примеры кода

Создайте компоненты, используя «Comp»

Командная строка

 trot comp -c ComponentName

Вывод создает файл в рабочем каталоге (опция ES5 доступна с флагом -v 5):

 import React, { Component } from 'react'
import PropTypes from 'prop-types' //ES6


class ComponentName extends Component {
    constructor(props){
        super(props) 
        this.state = {
        
        }
    }

    render(){
        return (
            <div>
                <h1>ComponentName</h1>
            </div>
        )
    }
}

ComponentName.propTypes = {

};

export default ComponentName

Дополнительные флаги

 trot comp -c ComponentName -v 5      /* Outputs ES5 Syntax */
trot comp -c ComponentName -v 6      /* Outputs ES6 Syntax */
trot comp -c ComponentName -f src    /* Specifies output folder */
trot comp -c ComponentName -s y      /* Creates matching CSS file */

Флаг -v позволяет указать синтаксис ES5 или ES6. ES6 - по умолчанию, если флаг версии не используется

Флаг -f позволяет указать выходную папку в соответствии с архитектурой вашего проекта

Флаг -c создаст соответствующий файл CSS с тем же именем, что и компонент. Файл CSS будет импортирован в файл компонентов, а <div> будет предоставлено имя класса «Component-ComponentName».

Например:

 trot -c Test -f src -s Y

Создаст файл компонента Test.js в каталоге ./src и файл test.css в том же каталоге. Основной <div> в функции рендеринга будет иметь className='component-test'

Эта методология смоделирована после подхода CSS Эндрю Фармера для компонентов React.

Компоненты гнезда с использованием «гнездо»

Командная строка в каталоге, где были созданы ваши компоненты (например, SRC)

 trot nest Parent Child1 Child2

Выход

1. Импорт Child1, Child2 в родительский компонент
2. Поиск функции render () в родительском компоненте и гнездирует дочерние компоненты.
3. Детские компоненты уже должны существовать в том же каталоге

Это позволяет быстро увидеть грубый набросок вашего вложенного приложения.

Пример ES5 (ES6 по умолчанию, см. Выше для вывода):

 Parent.js


import React from 'react'
import Child1 from 'Child1'
import Child1 from 'Child2'

var Parent = React.createClass({
  render: function(){
   return (
      <div >
        <h1>Parent</h1>
        <Child1 />
        <Child2 />
      </div>
    )
  }
})

export default Parent

** Примечания по команде Nest **

1. Если вы не находитесь в каталоге, содержащем файлы компонентов, вы получите ошибку

Мотивация

Я создал это во время реагирования обучения, потому что я разочаровался в печати одной и той же шаблонной пластины для каждого компонента, часто вводя опечатки.

Я искал аналогичный генератор командной строки для React, но не смог его найти, поэтому я начал кодирование.

Трот сохраняет повторные нажатия клавиш, упрощает разработку проекта и сокращает время, необходимое для создания рабочего приложения. Используя этот интерфейс командной строки, я смог подумать о кодировании, а не думать о синтаксисе и версиях (ES5 против ES6). '

Я все еще относительно новичок в JavaScript, Node и React Development. Я все еще изучаю ES6. Если у вас есть предложения для улучшений, функций или примечания к любым ошибкам или исправлениям, отправьте проблему или разложите репо и отправьте запрос на вытяжение.

Участники

Джастин Клэгг

Джей Хейз

Сюзанна Аткинсон

Вклад в этот проект приветствуются и будут признаны здесь, не стесняйтесь создавать проблему с предложениями для шаблонов или флагов командной строки, чтобы включить дополнительные функциональные возможности для скорости реагирования.

Откройте проблему или разжигайте репо здесь

Изменить журнал

См. Вики на странице GitHub: Wiki Change Log

Лицензия

ISC