2017-04-05 21 views
15

का उपयोग करने के लिए मैं लार्वेल के लिए नया नहीं हूं लेकिन जावास्क्रिप्ट ढांचे के लिए नया हूं।सेटअप लार्वेल 5.4 प्रतिक्रिया

मैं एक लार्वेल बिल्ड में प्रतिक्रिया का उपयोग करना चाहता हूं लेकिन इसे कैसे करें इस पर कोई जानकारी नहीं मिल सकती है।

मेरे पास लैरवेल 5.4 है। मुझे पता है कि यह गुलप के बजाय वू और लार्वेल मिक्स के साथ पूर्व-पैक आता है।

मैं यहां ट्यूटोरियल का अनुसरण कर रहा हूं: https://blog.tighten.co/adding-react-components-to-a-laravel-app लेकिन यह 5.4 के लिए नहीं है। इसमें gulpfile को अद्यतन करने की आवश्यकता है, लेकिन चूंकि लैरवेल 5.4 गुलप का उपयोग नहीं करता है, इसलिए कोई नहीं है!

कोई व्यक्ति कृपया छोटे ट्यूटोरियल या दो चरणों में मदद कर सकता है जिसे मुझे 5.4 में प्रतिक्रिया प्राप्त करने के लिए दोहराने की आवश्यकता है?

मुझे गुगल किया गया है लेकिन केवल एनपीएम लिंक ही मिल सकते हैं, जो उपयोगी से कम हैं!

उत्तर

22

जो मुझे आवश्यक दस्तावेज़ों के हिस्से को इंगित करने के लिए जो को धन्यवाद। इसके लिए थोड़ा और कुछ था ताकि किसी और की मदद करने के लिए नीचे दिए गए मेरे चरणों का वर्णन किया जा सके।

  1. node_modules फ़ोल्डर हटाएं। यह ब्रांड नए निर्माण के लिए जरूरी नहीं है, लेकिन यदि आपने किसी अन्य ट्यूटोरियल और स्थापित चीजों का पालन किया है, तो आपको कुछ सिरदर्द बचाएंगे। यदि आपके पास node_modules फ़ोल्डर नहीं है, तो इस चरण को अनदेखा करें।

    कृपया पर ध्यान दें कि उपरोक्त चरण एनपीएम का उपयोग करके इंस्टॉल किए गए कुछ भी हटा देगा।

  2. अपनी परियोजना रूट से npm install चलाएं। यह लार्वेल द्वारा उपयोग किए जाने वाले सभी एनपीएम घटकों को स्थापित करेगा।

  3. ओपन webpack.mix.js और परिवर्तन:

    mix.js('resources/assets/js/app.js', 'public/js') 
        .sass('resources/assets/sass/app.scss', 'public/css'); 
    

    को
    mix.react('resources/assets/js/app.js', 'public/js') 
        .sass('resources/assets/sass/app.scss', 'public/css'); 
    
  4. भागो npm run dev सबक उपरोक्त प्रश्न में निहित से जावास्क्रिप्ट संकलित करने के लिए। आपका रिएक्ट जेएस आउटपुट अब काम कर रहा है।

  5. (वैकल्पिक) फ्लाई पर संकलित करने के लिए npm run watch का उपयोग करें।

मुझे उम्मीद है कि यह किसी और की मदद करता है जितना उसने मेरी मदद की!

+3

सुनिश्चित करें कि आप अपने 'package.json' से अनावश्यक निर्भरताओं को भी हटा दें - अन्यथा 'npm install' बस उस सभी जंक को डालने जा रहा है जिसे आपने वहां से छुटकारा दिलाया है: p –

4

According to the docs, प्रतिक्रिया समर्थन मिक्स करने के लिए बनाया गया है:

मिक्स स्वचालित रूप से कोलाहल प्लग-इन समर्थन प्रतिक्रिया के लिए आवश्यक स्थापित कर सकते हैं। आरंभ करने के लिए, अपने mix.js की जगह() mix.react साथ फोन():

mix.react('resources/assets/js/app.jsx', 'public/js'); 

परदे के पीछे, मिक्स डाउनलोड करेगा और शामिल उचित कोलाहल-पूर्व निर्धारित प्रतिक्रिया कोलाहल प्लग-इन । मेरा अनुमान है कि हो सकता है कोई (इस स्थिति में आप में यह खींचने के लिए एक सामान्य mix.js() कॉल का उपयोग करना होगा -

मुझे यकीन है कि क्या है या नहीं यह अपने आप आपके उत्पादन बंडल में प्रतिक्रिया शामिल करेंगे 100% नहीं हूँ)।

+0

धन्यवाद जो। थोड़ा और जरूरी था, लेकिन मैं अपने उत्तर में पोस्ट करूंगा ताकि अन्य मुझे ढूंढ सकें कि उन्हें क्या चाहिए। – Wildcard27

+0

@ वाइल्डकार्ड 27: हाँ, मैं लारवेल से परिचित नहीं हूं, इसलिए मुझे लगता है कि मेरे उत्तर में पूरा विवरण नहीं हो सकता है। खुशी है कि आप इसे सॉर्ट करने में सक्षम थे :) –

+0

ईमानदार होने के लिए, मैंने केवल दस्तावेज़ों पर स्किम किया क्योंकि मैंने कहीं पढ़ा है कि लारावल को केवल वू के लिए समर्थन है। काश मैं पा सकता हूं कि इसे कहां सुधारने की जरूरत है! – Wildcard27

संबंधित मुद्दे