没有 babel 或 webpack 的 ReactJS Hello World答案

【问题标题】：ReactJS Hello World without babel or webpack没有 babel 或 webpack 的 ReactJS Hello World
【发布时间】：2017-05-29 12:04:32
【问题描述】：

我正在尝试学习 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>

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，但在我更好地了解服务器设置之前，我不想跳到这一步。

【问题讨论】：

您需要实际运行一个服务器。 github.com/indexzero/http-server 是一个简单的解决方案，您只需在您的目录中运行，它将提供静态文件。或者如果你有 python，你可以运行 python -m SimpleHTTPServer
为什么需要服务器？ react.js 不只是一个库吗？我查看了 (facebook.github.io/react/docs/installation.html) 上的基本设置说明，但没有看到任何提及 node.js 的内容。如果你不编译任何东西，我认为 webpack+babel 也应该是可选的。
嗯，它是可选的。我的上述设置不使用服务器。但是，我最终会想用一些东西来部署它，并且我确实想使用 Babel，这样我就可以使用 JSX。我的理解是生产级的 React 应用程序使用了这些工具中的大部分，而这正是我想要学习的。我只是试着一次学习一个，这样我就可以理解每个人在做什么。
@CaptainStack 你曾经使用节点创建应用程序吗？
@CaptainStack stackoverflow.com/a/4720770/5992765 用节点加载你的 index.html

标签： javascript node.js reactjs

【解决方案1】：

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

<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>

如果您仔细观察，示例 1 脚本中的所有内容都在 JavaScript 中，脚本中没有 html，我的脚本中只有纯 javascript。 React & ReactDom 被插入到我的窗口中，因此我可以全局访问它。太好了，我可以继续这样做，但是 React 引入了一种将 html 插入 javascript (JSX) 的方法，因此我们可以编写更少的 javascript（我们都是懒惰的开发人员）。那么我们怎么写 JSX，因为浏览器不理解 JSX 而他们只理解 javascript？那么我们将使用一个称为独立库（babel Standalone）的工具。它会将您在 JSX 和 javascript 中编写的所有代码转换（将您编写的所有代码转换为浏览器可读的 javascript）转换为普通的 javascript 文件。在此过程开始之前，您需要让独立库知道您要转译哪些 javascript 文件，因此您可以像 <script type="text/babel">....</script> 一样附加 type="text/babel"。加载 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>

既然我们插入了 JSX，那就太好了，如果我想使用最新的 ES6 及更高版本的功能怎么办？浏览器还不支持它们。独立库再次来拯救。该库使您能够添加插件以将最新的 javascript 或 jsx 或其他人编译成 javascript。

这里是示例 3，在带有插件的浏览器上使用 ES6 和 JSX：

<!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>

所有这些工具（例如 babel、webpack）都有助于使您的应用为生产做好准备，但对于学习而言，首先理解 react 会更容易，无需额外工具，然后慢慢开始扩展。

** 注意：所有示例均用于学习目的和原型制作，而不是用于生产用途，如果您阅读了我的完整答案，您就会知道原因。

【讨论】：

【解决方案2】：

首先在你的根文件夹中创建webpack.config.js 文件，如下所示：

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './index.js' //path to your index.js in your case
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
    // js
    {
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'client')
    },
    // CSS
    { 
      test: /\.styl$/, 
      include: path.join(__dirname, 'client'),
      loader: 'style-loader!css-loader!stylus-loader'
    }
    ]
  }
};

之后，使用 express 创建您的 server.js 文件以服务器静态文件：

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(3000, 'localhost', function(err) {
  if (err) {
    console.log(err);
    return;
  }

  console.log('Listening at http://localhost:3000');
});

最后将 .babelrc 文件添加到你的根文件夹，告诉 babel 你将要使用的预设，（在我们的例子中是 es2015 和 react）：

{
 presets: 'es2015'
}

您将需要以下附加模块：

babel-loader, babel-core, babel-preset-react, babel-preset-es2015, webpack-dev-middleware, webpack-hot-middleware, express

祝你好运；）

【讨论】：

问题实际上是如何在没有 webpack 的情况下使用 React，而不是如何配置 webpack。

【解决方案3】：

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

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

使用npm start 命令启动它。

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

【讨论】：

确实如此。开发人员的工作是不断学习新的开发工具。如果您不必每两周学习一个全新的构建工具，那么有人就没有做好他们的工作。哦，另外 10% 的开发人员工作是编写实际的应用程序。