تنزيل trot - تنزيل رمز مصدر trot

trot

مكونات الطرف الثالث

ES 6 - PropTypes and Set State update.

تنزيل

ملخص

هذا هو مساعد سطر الأوامر لإنشاء مكونات 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

أمثلة رمز

قم بإنشاء مكونات باستخدام "شركات"

سطر الأوامر

 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> اسم "Class-ComponentName".

على سبيل المثال:

 trot -c Test -f src -s Y

سيتم إنشاء ملف مكون Test.js في دليل ./src ، وملف test.css في نفس الدليل. سيكون <div> الرئيسي في دالة Render اسم className='component-test'

تم تصميم هذه المنهجية بعد نهج CSS لـ Andrew Farmer لمكونات React.

مكونات العش باستخدام "عش"

قرص سطر الأوامر في الدليل حيث تم إنشاء مكوناتك (على سبيل المثال /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 Command **

إذا لم تكن في الدليل الذي يحتوي على ملفات المكونات ، فستحصل على خطأ

تحفيز

لقد قمت بإنشاء هذا أثناء React Learning لأنني أصبحت محبطًا في كتابة نفس الغلاية لكل مكون ، وغالبًا ما أقدم الأخطاء المطبعية أيضًا.

لقد بحثت عن مولد سطر أوامر مماثل لـ React لكنني لم أتمكن من العثور على واحد ، لذلك بدأت الترميز.

يحفظ Trot على ضغطات المفاتيح المتكررة ، وتبسيط تطوير المشروع وتقليل الوقت اللازم لإنشاء تطبيق عمل. باستخدام واجهة سطر الأوامر ، تمكنت من التفكير في الترميز بدلاً من التفكير في بناء الجملة والإصدارات (ES5 مقابل ES6). '

ما زلت جديدًا نسبيًا على تطوير JavaScript و Node و React. ما زلت أتعلم ES6. إذا كانت لديك اقتراحات للتحسينات أو الميزات أو ملاحظة أي أخطاء أو تصحيحات ، فيرجى إرسال مشكلة أو تافز الريبو وتقديم طلب سحب.

المساهمين

جاستن كلاج

جاي هايس

سوزان أتكينسون

نرحب بالمساهمات في هذا المشروع وسيتم الاعتراف بها هنا ، لا تتردد في إنشاء مشكلة مع اقتراحات للقوالب أو أعلام سطر الأوامر لتشمل وظائف إضافية لتطوير رد الفعل السريع.

افتح مشكلة أو مفترق الريبو هنا على جيثب