Как восстановить файл JS index.js, связанный с index.html для ссылок на id?

Недавно я начал реагировать.

Мой 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.js в любом теге скрипта в index.html. Но как он ссылается на элемент root div в index.html? Мне было интересно, как он работает нормально. Пожалуйста, объясните мне.

Я создал эти команды для создания приложения

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

ОТВЕТЫ

Ответ 1

Create-React-App - очень интересная настройка.

Я начал выкапывать из package.json НПМ сценария start

"start": "start-scripts start"

Это приводит меня к их двоичным react-scripts в node_modules/.bin
Я разместил здесь соответствующий материал.

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

Таким образом, это говорит мне, что они ищут скрипт внутри папки ../scripts/.

Поэтому я node_modules/react-scripts модулю npm для сценариев реакции (node_modules/react-scripts) и открываю node_modules/react-scripts/scripts/start.js так как я делал npm start.

Теперь я нашел конфигурацию webpack, которую я искал.
Они специально ссылались на node_modules/react-scripts/config/webpack.config.dev.js. Я разместил здесь соответствующий материал.

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

Таким образом, файл, передаваемый paths.appIndexJs является файлом входа в конфигурацию webpack.

И они используют HtmlWebpackPlugin для загрузки html по пути paths.appHtml.

Заключительная часть головоломки связывает это с файлами, которые вы опубликовали. Проводка соответствующего материала из 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

Ваши два файла.
Вау! Это было довольно путешествие..: P