trot

Ringkasan

Ini adalah penolong baris perintah untuk membuat komponen bereaksi.

Instalasi

 npm install -g trot

Penggunaan

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

Membantu

 trot --h

Contoh Kode

Buat komponen menggunakan 'comp'

Baris perintah

 trot comp -c ComponentName

Output membuat file di direktori kerja (opsi ES5 tersedia dengan -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

Bendera tambahan

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

Bendera -v memungkinkan Anda untuk menentukan sintaks ES5 atau ES6. ES6 adalah default jika tidak ada bendera versi yang digunakan

Bendera -f memungkinkan Anda menentukan folder output agar sesuai dengan arsitektur proyek Anda

Bendera -c akan membuat file CSS yang cocok dengan nama yang sama dengan komponen. File CSS akan diimpor ke dalam file komponen, dan <div> akan diberikan nama kelas "Component-ComponentName".

Misalnya:

 trot -c Test -f src -s Y

Akan membuat file komponen Test.js di direktori ./src , dan file test.css di direktori yang sama. <div> utama dalam fungsi render akan memiliki className='component-test'

Metodologi ini dimodelkan setelah pendekatan CSS Andrew Farmer untuk komponen React.

Komponen sarang menggunakan 'sarang'

Com Command Line CD ke direktori tempat komponen Anda dibuat (EG /SRC)

 trot nest Parent Child1 Child2

Keluaran

1. Mengimpor anak1, anak2 ke dalam komponen orang tua
2. Cari fungsi render () dalam komponen induk dan bersarang komponen anak.
3. Komponen anak harus sudah ada di direktori yang sama

Ini memungkinkan Anda dengan cepat melihat sketsa kasar dari aplikasi bersarang Anda.

Contoh ES5 (ES6 adalah default, lihat di atas untuk output):

 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

** Catatan tentang Perintah Sarang **

1. Jika Anda tidak berada di direktori yang berisi file komponen, Anda akan mendapatkan kesalahan

Motivasi

Saya membuat ini sambil belajar bereaksi karena saya menjadi frustrasi mengetik boilerplate yang sama untuk setiap komponen, sering kali memperkenalkan kesalahan ketik juga.

Saya mencari generator baris perintah serupa untuk React tetapi tidak dapat menemukannya, jadi saya mulai mengkode.

Trot menghemat pada penekanan tombol berulang, menyederhanakan pengembangan proyek dan mengurangi waktu yang diperlukan untuk membuat aplikasi yang berfungsi. Dengan menggunakan antarmuka baris perintah ini saya dapat berpikir tentang pengkodean daripada memikirkan sintaks dan versi (ES5 vs ES6). '

Saya masih relatif baru di JavaScript, Node dan React Development. Saya masih belajar ES6. Jika Anda memiliki saran untuk perbaikan, fitur atau catat kesalahan atau koreksi, silakan kirimkan masalah atau potong repo dan kirimkan permintaan tarik.

Kontributor

Justin Clagg

Jay Hayse

Suzanne Atkinson

Kontribusi untuk proyek ini dipersilakan dan akan diakui di sini, jangan ragu untuk membuat masalah dengan saran untuk templat atau bendera baris perintah untuk disertakan, fungsionalitas tambahan untuk mempercepat pengembangan bereaksi.

Buka masalah atau garpu repo di sini berlari di github

Ubah log

Lihat Wiki di halaman GitHub: Log Wiki-Ch di

Lisensi

ISC