没有babel或webpack的ReactJS Hello World

Question

没有babel或webpack的ReactJS Hello World

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

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

index.html：

<!DOCTYPE html>
<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script src="index.js"></script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

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')
);

Run Code Online (Sandbox Code Playgroud)

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

npm init -y

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

РАВ*_*АВИ 9

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

<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script> <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
</head>
<body>

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

  <script>
    function Hello(props) {
     return React.createElement('h1', null, `Hello ${props.text}`);
  }

  ReactDOM.render(
    React.createElement(Hello, {text: 'World'}, null),
    document.getElementById('root')
  );
  </script>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js" crossorigin="anonymous"></script>
</head>
<body>

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

  <script type="text/babel">
     function Hello(props) {
        return <h1>Hello {props.text}</h1>;
      }

      ReactDOM.render(
         <Hello text="World" />,
    document.getElementById('root')
      );
   </script>


</body>
</html>

Run Code Online (Sandbox Code Playgroud)

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js" crossorigin="anonymous"></script>
</head>
<body>
  <div id="root"></div>

  <script data-plugins="transform-es2015-modules-umd" type="text/babel">
     class Hello extends React.Component {
      render() {
        return <h1>Hello {this.props.text}</h1>;
      }
    }

      ReactDOM.render(
         <Hello text="World" />,
    document.getElementById('root')
      );
   </script>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

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

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

Answer 2

Tia*_*gel 3

最简单的方法是使用像node-static ( npm install node-static --save-dev) 这样的库并将其添加为start您的脚本中package.json

"scripts": {       
   "start": "static ./"
 },

Run Code Online (Sandbox Code Playgroud)

使用命令启动它npm start。

虽然这可行，但如果你打算添加 babel，我强烈建议你跳入webpack（或任何其他构建工具，我个人认为 webpack 是最好的选择），因为 webpack 已经有一个开发服务器，可以在开发过程中提供静态文件你（有很多像热重载这样的好东西 ）和 webpack 并不难学，官方文档对于初学者来说有点困难，我建议你先阅读这篇指南。

归档时间：	9 年，8 月前
查看次数：	2654 次
最近记录：	8 年前