Question

我是ReactJ的新手，并在链接上找到了一个示例

https://www.telerik.com/kendo-react-ui/components/grid/

单击在StackBlitz中打开

在此示例index.js中，main.js未在index.html中链接

为什么html文件使用这些js文件？ HTML文件可以正常工作并调用默认的js文件，而无需向React应用程序中的代码添加源代码吗？

Answer 1

如果打开底部的index.html页面，则会看到：

<my-app>
     <span class="k-icon k-i-loading" style="color: #ff6358"></span>
</my-app>

此 my-app 这里是包装程序，所有的React应用程序都已加载。

现在，如果您转到 index.js 您会看到它只是将 main.js 的导出加载到模块中。

最后，滚动到您将看到的 main.js 底部

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

这意味着我们将使用上面在同一文件中创建的App组件填充my-app标签。

Answer 2

开发 React应用程序时看到的文件（例如：index.html，index.js，main.js）与该应用程序打包使用后，浏览器将看到的文件。

在React应用程序的典型情况下，该应用程序捆绑在一起（通常与webpack捆绑在一起）成小包装，以供Web浏览器使用。因此，即使您运行index.html之类的命令时，即使您的 index.js文件没有专门链接到main.js或npm start，将打包所有代码并将其捆绑在一起，生成一个页面，其中包含index.html中的所有HTML，同时打包所有各种JS代码并引用那些打包的.js文件。

这也许是一个helpful article，可以帮助解释Webpack在捆绑React应用程序中的作用，并且可以帮助您理解为什么看到的index.html与index.html不同最终用户在使用您的应用程序时将看到的内容。

另外，由于您是React的新手，所以我真的建议您尝试一个在线课程，逐步了解React的来龙去脉。我知道每个人的学习方式都不一样。我曾经认为只要阅读其他开发人员的博客和示例，我就能很好地学习新技术。但是后来我意识到，通过在线课程，我可以更快更有效地学习新技术。

我通过Udemy带走了React - The Complete Guide, by Maximilian Schwarzmüller。而且很棒。帮助我了解了正在发生的事情以及如何构建React应用程序。我会极力推荐它。（顺便说一句，我不会因推荐此课程而获得任何补偿）。

文件被调用而没有引用它们

2 个答案: