Как реагировать на определение правильного HTML-файла? - PullRequest
Новая
       36

Как реагировать на определение правильного HTML-файла?

0 голосов
/ 05 марта 2019

Я пытаюсь реагировать с кодамиandbox.io.При запуске нового проекта отображается код по умолчанию.

В файле index.js у нас есть ссылка на элемент «root» в файле HTML.Но я не понял, как файл JS связан с файлом HTML.

В Vanilla JS HTML-файл может иметь тег «script». Почему тег "script" здесь не нужен?

Код 

index.js  
import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);



index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-    scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
</head>

<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
create a production bundle, use `npm run build` or `yarn build`.

</body>

Ответы [ 2 ]

0 голосов
/ 05 марта 2019

как файл JS подключен к файлу HTML?

это пример того, как реагируют

index.html: 

<div id="root"></div>

index.js: 

ReactDOM.render(<App/>, document.getElementById('root'))

app.js: 

function App() {
  return (
    <div className="App">
      Hello React!
    </div>
  );
}

это JSX, он будет переведен во что-то другое и создаст DOM в React, что-то вроде: 

const app = document.createElement('div');
app.innerText= 'Hello React!';

Итак, теперь у вас есть dom (приложение), которое создается в app.js, и у вас есть запрос dom (root) в index.js, ReactDOM.render (, rootDOM) просто делает что-то вродеэто: 

rootDom.appendChild(app);

наконец, ваш компонент (приложение) будет отображаться в корневом домене;

Почему тег "script" здесь не нужен?

, поскольку webpack сделает это за вас, он упакует ваш код в файл javascript и вставит ссылку на index.html.

0 голосов
/ 05 марта 2019

Если вы извлечете приложение и проверите файл webpack.config, вы можете заметить эту часть: 

plugins: [
      // Generates an `index.html` file with the <script> injected.
      new HtmlWebpackPlugin(...)
    ]

Итак, просто упакуйте веб-пакет в пакет HTML.Если вы будете работать с реагировать без создания приложения, вам нужно будет использовать скрипт-тег или написать аналогичный плагин самостоятельно.

Кроме того, вы изучаете исходный код.Если вы будете обслуживать приложение и проверять инспектора, вы увидите пакет в теге script.

...