没有babel或webpack的ReactJS Hello World

我正在尝试学习ReactJS，并且发现很多教程令人困惑，因为它们将NodeJS，Babel和Webpack一次全部放入了它们的解释中，并掩盖了许多正在发生的事情。我正在尝试做一个基本的Hello World应用程序，并一次添加一个这些工具，以便我了解做得更好的事情。

我从一个基本的静态HTML和JS文件开始：

index.html：

index.js（尚未使用JSX）：

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('app')
);

好的，这可以按预期工作。现在，我想建立一个可以提供确切内容的NodeJS项目，因此我首先开始：

npm init -y

这给了我一个package.json。如何配置NodeJS以在localhost：8080上提供此基本的Hello World代码？我的下一步是添加Babel，以便我可以使用JSX，但是在不了解服务器设置之前，我不想跳到这一步。

ReactJS是一个UI框架。要学习ReactJS，您不需要nodejs，npm或任何其他精美的工具。只需一个库脚本文件，您就可以将库插入简单的index.html并开始编写javascript。请注意，因为您是在Web上写作，所以需要两个脚本（完全一样）。

这是一个仅使用纯JavaScript和React的示例1：

如果您密切注意，示例1脚本中的所有内容都在JavaScript中，脚本中没有html，而我的脚本中只有纯JavaScript。React＆ReactDom被插入到我的窗口中，因此我可以全局访问它。这样做很好，我可以继续这样做，但是React引入了一种将html插入javascript（JSX）的方法，因此我们可以编写更少的javascript（我们都是懒惰的开发人员）。那么，由于浏览器不了解JSX并且仅了解javascript，我们如何编写JSX？好吧，我们将使用一个称为独立库（babel standalone）的工具。它将把您在JSX和javascript中编写的所有代码转换（转换为浏览器可读javascript的所有代码）（转换为普通的javascript文件）。在此过程开始之前，type="text/babel"这样。加载dom后，独立库将转换您告诉它进行转换的脚本，并将纯JavaScript插入dom，然后您的javascript将运行。是的，我说过... 1.首先您的代码将被转换2.然后将其加载到dom 3.然后运行我的JavaScript。这就是为什么我们不应该在生产中使用它的原因，因为在您的javascript开始与reactjs开始运行之前会发生巨大的延迟。这就是现代工具将提供帮助的地方。

这是在浏览器上使用JSX和React的示例2：

现在我们插入了JSX，如果我要使用最新的ES6及更高版本的功能怎么办？浏览器尚不支持它们。独立库再次开始救援。该库使您能够添加插件以将最新的javascript或jsx或其他代码编译为javascript。

这是带有插件的浏览器上的ES6和JSX的示例3：

所有这些工具（例如babel，webpack）有助于使您的应用程序投入生产，但要进行学习，首先无需使用额外的工具就可以了解反应，然后慢慢开始扩展就容易得多。

**注意：所有示例都是出于学习目的和原型设计，而不是用于生产用途，如果您阅读了我的完整答案，您就会知道为什么。