trot

Zusammenfassung

Dies ist ein Befehlszeilen -Helfer, um React -Komponenten zu erstellen.

Installation

 npm install -g trot

Verwendung

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

Helfen

 trot --h

Codebeispiele

Erstellen Sie Komponenten mit 'comp'

Befehlszeile

 trot comp -c ComponentName

Die Ausgabe erstellt eine Datei im Arbeitsverzeichnis (ES5 -Option mit -V 5 Flag):

 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

Zusätzliche Flaggen

 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 */

Mit dem -v -Flag können Sie entweder die ES5- oder die ES6 -Syntax angeben. ES6 ist die Standardeinstellung, wenn kein Versionsflag verwendet wird

Mit dem Flag -f können Sie den Ausgaberordner angeben, um Ihre Projektarchitektur zu entsprechen

Das -c -Flag erstellt eine übereinstimmende CSS -Datei mit demselben Namen wie die Komponente. Die CSS-Datei wird in die Komponentendatei importiert und der <div> wird ein Klassenname von "Komponentenkomponentname" erhalten.

Zum Beispiel:

 trot -c Test -f src -s Y

Erstellt im Verzeichnis ./src eine Test.js -Komponentendatei und eine test.css -Datei im selben Verzeichnis. Die Haupt <div> in der Renderfunktion hat einen className='component-test'

Diese Methodik wird nach dem CSS -Ansatz von Andrew Farmer für React -Komponenten modelliert.

Nestkomponenten mit 'Nest'

Befehlszeilen -CD in das Verzeichnis, in dem Ihre Komponenten erstellt wurden (z. B. SRC)

 trot nest Parent Child1 Child2

Ausgabe

1. Importiert Child1, Child2 in die Elternkomponente
2. Sucht nach der Render () -Funktion in der übergeordneten Komponente und nistet die untergeordneten Komponenten.
3. Kinderkomponenten müssen bereits im selben Verzeichnis existieren

Auf diese Weise können Sie schnell eine grobe Skizze Ihrer verschachtelten Bewerbung sehen.

ES5 -Beispiel (ES6 ist standardmäßig, siehe oben für die Ausgabe):

 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

** Anmerkungen zum Nestbefehl **

1. Wenn Sie sich nicht im Verzeichnis mit den Komponentendateien befinden, erhalten Sie einen Fehler

Motivation

Ich habe dies während des Lernens erstellt, weil ich für jede Komponente frustriert wurde, dass dieselbe Kesselplatte tippte und häufig auch Tippfehler einführte.

Ich suchte nach einem ähnlichen Befehlszeilengenerator für React, konnte aber keine finden, also fing ich an, zu codieren.

TROT speichert wiederholte Tastenanschläge, vereinfacht die Projektentwicklung und verkürzt die Zeit, die für die Erstellung einer funktionierenden App erforderlich ist. Durch die Verwendung dieser Befehlszeilenschnittstelle konnte ich über Syntax und Versionen nachdenken, anstatt über Syntax und Versionen nachzudenken (ES5 vs ES6). ''

Ich bin immer noch relativ neu in JavaScript, Node und React Development. Ich lerne immer noch ES6. Wenn Sie Vorschläge für Verbesserungen, Funktionen oder Hinweise auf Fehler oder Korrekturen haben, senden Sie bitte ein Problem oder geben Sie das Repo ein und senden Sie eine Pull -Anfrage.

Mitwirkende

Justin Clagg

Jay Hayse

Suzanne Atkinson

Beiträge zu diesem Projekt sind willkommen und werden hier anerkannt. Sie können gerne ein Problem mit Vorschlägen für Vorlagen oder Befehlszeilen -Flags erstellen, die zusätzliche Funktionen zur Geschwindigkeit der Reaktionsentwicklung enthalten.

Eröffnen Sie ein Problem oder geben Sie den Repo hier auf Github auf

Protokoll ändern

Siehe Wiki auf der Github-Seite: Wiki-Change-Protokoll

Lizenz

ISC