React.js

Question

में मॉड्यूल (नहीं मिला) को हल नहीं कर सकता मैं विश्वास नहीं कर सकता कि मैं एक स्पष्ट प्रश्न पूछ रहा हूं, लेकिन मुझे अभी भी कंसोल लॉग में त्रुटि मिल रही है।

कंसोल का कहना है कि यह निर्देशिका में मॉड्यूल नहीं ढूंढ सकता है, लेकिन मैंने टाइपो को कम से कम 10 बार चेक किया है। वैसे भी, यहां घटक कोड है।

मैं जड़ में हैडर को रखना चाहते हैं

import React, { Component } from 'react' 
import Header from './src/components/header/header' 
import logo from './logo.svg' 
import './App.css' 

class App extends Component { 
    render() { 
    return (
     <Header/> 
    ); 
    } 
} 

export default App; 

यह Header घटक

import React, { Component } from 'react' 
import ReactDOM from 'react-dom' 
import navBar from './src/components/header/navBar' 
import './src/css/header.css' 

class Header extends Component { 
    render() { 
     return { 
      <div> 
      <div id="particles-js"></div> 
      <navBar/> 
      <Title/> 
      </div> 
     }; 
    } 
} 

ReactDOM.render(<Header/>, document.getElementById('header')); 

मैं इस स्थान ./src/components/header/header में कम से कम 10 बार है कि मॉड्यूल है देख लिया है है, और यह है (फ़ोल्डर "हेडर" में "header.js" है)।

फिर भी, प्रतिक्रिया अभी भी इस त्रुटि फेंकता है:

./src/App.js Module not found: Can't resolve './src/components/header/header' in '/home/wiseman/Desktop/React_Components/github-portfolio/src'

NPM परीक्षण संकलन करने में विफल एक ही बात कहते हैं।

Answer 1

जिस तरह से हम आम तौर पर import का उपयोग करते हैं, वह सापेक्ष पथ पर आधारित होता है।

. और .. हम कैसे निर्देशिका से बाहर जाने के लिए और mv ~/file . वर्तमान निर्देशिका करने के लिए एक file स्थानांतरित करने के लिए cd .. तरह terminal में नेविगेट करने के लिए उपयोग करने के लिए समान हैं।

my-app/ 
    node_modules/ 
    package.json 
    src/ 
    containers/card.js 
    components/header.js 
    App.js 
    index.js 

आपके मामले में, App.jssrc/ निर्देशिका में है, जबकि header.jssrc/components में है। import पर आप import Header from './components/header' करेंगे। यह मेरी वर्तमान निर्देशिका में मोटे तौर पर अनुवाद करता है, ऐसे घटक फ़ोल्डर को ढूंढें जिनमें हेडर फ़ाइल हो।

अब, header.js से, आपको card से कुछ की आवश्यकता है, तो आप ऐसा करेंगे। import Card from '../containers/card'। यह मेरी वर्तमान निर्देशिका से बाहर निकलने के लिए अनुवाद करता है, एक फ़ोल्डर नाम कंटेनर की तलाश करें जिसमें कार्ड फ़ाइल है।

import React, { Component } from 'react' का सवाल है, यह एक ./ या ../ या / इसलिए नोड react तक node_modules में मॉड्यूल एक विशेष क्रम में की तलाश शुरू कर देंगे पाया जाता है के साथ शुरू नहीं करता है। अधिक विस्तार से समझने के लिए, इसे पढ़ा जा सकता है।

Answer 2

आप प्रतिक्रिया से बनाने-अनुप्रयोग के साथ एक आवेदन पत्र बनाने के लिए मत भूलना सेट वातावरण चर:

NODE_PATH=./src 

या अपने रूट फ़ोल्डर में फ़ाइल .env में जोड़ने;