आईडी संदर्भों के लिए JS.html index.js फ़ाइल index.html से संपर्क कैसे प्रतिक्रिया करता है?

मुझे हाल ही में प्रतिक्रिया के साथ शुरू किया गया है।आईडी संदर्भों के लिए JS.html index.js फ़ाइल index.html से संपर्क कैसे प्रतिक्रिया करता है?

मेरे index.html शामिल

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 
    <title>React App</title> 
    </head> 
    <body> 
    <div id="root"></div> 
    </body> 
</html>

और index.js शामिल

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; ReactDOM.render( <App />, document.getElementById('root') );

मेरे संदेह मैं index.html में किसी भी स्क्रिप्ट टैग में index.js उल्लेख नहीं किया है। लेकिन index.html में root div तत्व का संदर्भ कैसे दिया जा रहा है? मैं सोच रहा था क्योंकि यह ठीक काम कर रहा है। कृपया मुझे समझाएँ।

मैं एप्लिकेशन

npm install -g create-react-app create-react-app hello-world cd hello-world npm start

स्रोत

2017-01-19 Mr_Perfect

आपका सेटअप क्या है? – lustoykov

create-react-app एक पूर्व-कॉन्फ़िगर किए गए बंडलर वेबपैक और कॉन्फ़िगरेशन webpack.config.js के साथ आता है जो आपकी स्क्रिप्ट को संकलित करता है और उन्हें index.html में इंजेक्ट करता है https://github.com/facebookincubator/create-react-app/blob/3f6937c9569c68217077d61a81e71f2134b62a28/ संकुल/प्रतिक्रिया-स्क्रिप्ट/config/webpack.config.dev.js – lustoykov

मुझे किसी भी कोड को समझ में नहीं आया। क्या आप कृपया –

Create-React-App बहुत ही दिलचस्प सेटअप है बनाने के लिए इन आदेशों को चलाने की थी।

मैं अपने package.json NPM स्क्रिप्ट start

"शुरू" से खुदाई शुरू की: "प्रतिक्रिया-स्क्रिप्ट शुरू"

कि node_modules/.bin
के तहत अपने द्विआधारी react-scripts करने के लिए मुझे ले जाता है मैं हूँ यहां प्रासंगिक सामान पोस्ट करें।

switch (script) { 
    case 'build': 
    case 'eject': 
    case 'start': 
    case 'test': { 
    const result = spawn.sync(
     'node', 
     [require.resolve('../scripts/' + script)].concat(args), 
     { stdio: 'inherit' } 
    );

तो यह मुझसे कहता है कि वे ../scripts/ फ़ोल्डर के अंदर स्क्रिप्ट की तलाश में हैं।

तो मैं प्रतिक्रिया-स्क्रिप्ट NPM मॉड्यूल (node_modules/react-scripts) के पास जाकर node_modules/react-scripts/scripts/start.js फ़ाइल को खोलने के बाद से मैं npm start कर रहा था।

अब यहां वह जगह है जहां मुझे वेबपैक कॉन्फ़िगरेशन मिला था जिसे मैं ढूंढ रहा था।
वे विशेष रूप से node_modules/react-scripts/config/webpack.config.dev.js का जिक्र कर रहे थे। मैं यहां प्रासंगिक सामान पोस्ट करूंगा।

entry: [ 
    // Finally, this is your app's code: 
    paths.appIndexJs, 
], 
plugins: [ 
    // Generates an `index.html` file with the <script> injected. 
    new HtmlWebpackPlugin({ 
    inject: true, 
    template: paths.appHtml, 
    }),

तो paths.appIndexJs द्वारा संदर्भित फ़ाइल webpack config में प्रवेश फ़ाइल है।

और वे पथ paths.appHtml पर HTML लोड करने के लिए HtmlWebpackPlugin का उपयोग कर रहे हैं।

पहेली का अंतिम भाग इस पोस्ट को आपके द्वारा पोस्ट की गई फ़ाइलों से जोड़ रहा है। से paths.js

const appDirectory = fs.realpathSync(process.cwd()); 
const resolveApp = relativePath => path.resolve(appDirectory, relativePath); 
module.exports = { 
    ... 
    appHtml: resolveApp('public/index.html'), 
    appIndexJs: resolveApp('src/index.js'), 
    ... 
}

आपके आवेदन निर्देशिका के अंदर

तो,
appHtml प्रासंगिक सामान पोस्ट करना फ़ाइल public/index.html
appIndexJs फ़ाइल src/index.js

आपका प्रश्न में दो फ़ाइलों है।
वाह! वह काफी यात्रा थी ..: पी

स्रोत

2017-06-23 17:40:49

ने मुझे बहुत मदद की - अपवित्र! धन्यवाद एके! – lentyai

आईडी संदर्भों के लिए JS.html index.js फ़ाइल index.html से संपर्क कैसे प्रतिक्रिया करता है?

उत्तर

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