trot Download - ดาวน์โหลดซอร์สโค้ด trot

trot

ส่วนประกอบของบุคคลที่สาม

ES 6 - PropTypes and Set State update.

ดาวน์โหลด

เรื่องย่อ

นี่คือตัวช่วยบรรทัดคำสั่งเพื่อสร้างส่วนประกอบปฏิกิริยา

การติดตั้ง

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

ธงเพิ่มเติม

 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 ของ Andrew Farmer สำหรับส่วนประกอบที่ตอบสนอง

ส่วนประกอบของรังโดยใช้ 'Nest'

ซีดี บรรทัดคำสั่ง ลงในไดเรกทอรีที่ส่วนประกอบของคุณถูกสร้างขึ้น (เช่น /src)

 trot nest Parent Child1 Child2

เอาท์พุท

นำเข้า Child1, Child2 เป็นองค์ประกอบหลัก
ค้นหาฟังก์ชั่น render () ในองค์ประกอบหลักและทำรังส่วนประกอบเด็ก
ส่วนประกอบของเด็กจะต้องมีอยู่แล้วในไดเรกทอรีเดียวกัน

สิ่งนี้จะช่วยให้คุณเห็นภาพร่างคร่าวๆของแอปพลิเคชันที่ซ้อนกันของคุณอย่างรวดเร็ว

ตัวอย่าง 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 **

หากคุณไม่ได้อยู่ในไดเรกทอรีที่มีไฟล์ส่วนประกอบคุณจะได้รับข้อผิดพลาด

แรงจูงใจ

ฉันสร้างสิ่งนี้ในขณะที่การเรียนรู้ตอบสนองเพราะฉันรู้สึกหงุดหงิดพิมพ์หม้อไอน้ำเดียวกันสำหรับทุกองค์ประกอบมักจะแนะนำการพิมพ์ผิดเช่นกัน

ฉันค้นหาตัวสร้างบรรทัดคำสั่งที่คล้ายกันสำหรับ React แต่ไม่พบหนึ่งดังนั้นฉันจึงเริ่มเขียนโค้ด

Trot บันทึกการกดแป้นซ้ำทำให้การพัฒนาโครงการง่ายขึ้นและลดเวลาที่จำเป็นสำหรับการสร้างแอพที่ใช้งานได้ ด้วยการใช้อินเทอร์เฟซบรรทัดคำสั่งนี้ฉันสามารถคิดเกี่ยวกับการเข้ารหัสแทนที่จะคิดเกี่ยวกับไวยากรณ์และเวอร์ชัน (ES5 vs ES6) -

ฉันยังค่อนข้างใหม่สำหรับ JavaScript, Node และ React Development ฉันยังคงเรียน ES6 หากคุณมีข้อเสนอแนะสำหรับการปรับปรุงคุณสมบัติหรือบันทึกข้อผิดพลาดหรือการแก้ไขใด ๆ โปรดส่งปัญหาหรือแยก repo และส่งคำขอดึง

ผู้มีส่วนร่วม

Justin Clagg

Jay Hayse

Suzanne Atkinson

การมีส่วนร่วมในโครงการนี้ยินดีต้อนรับและจะได้รับการยอมรับที่นี่อย่าลังเลที่จะสร้างปัญหาพร้อมคำแนะนำสำหรับเทมเพลตหรือธงบรรทัดคำสั่งเพื่อรวมฟังก์ชั่นเพิ่มเติมเพื่อเพิ่มความเร็วในการพัฒนาปฏิกิริยา

เปิดปัญหาหรือแยก repo ที่นี่ trot บน gitHub