logo标签列表

不使用babel或webpack的ReactJS Hello World

javascriptnode.jsreactjs
8
我想学习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，但在我更好地理解服务器设置之前，我不想跳过该步骤。

1
你需要实际运行一个服务器。https://github.com/indexzero/http-server 是一个简单的解决方案，你可以在你的目录中直接运行它，它将提供静态文件。或者如果你有Python，你可以运行 python -m SimpleHTTPServer。 - Andy Ray
2
为什么需要服务器？React.js不只是一个库吗？我查看了（https://facebook.github.io/react/docs/installation.html）上的基本设置说明，没有看到任何有关Node的提及。如果您不需要转译任何内容，我认为Webpack+Babel也应该是可选的。 - chiliNUT
1
好的，这是可选的。我的上述设置不使用服务器。然而，我最终会想要部署它，并且我确实想要使用Babel以便可以使用JSX。我的理解是，生产级别的React应用程序使用大多数这些工具，这就是我想要学习的内容。我只是想逐个学习它们，以便我可以理解每个工具正在做什么。 - Captain Stack
@CaptainStack，你曾经使用Node创建过应用程序吗？ - areiilla
对于那些正在寻找类似问题的人：我发现ReactArmory的指南非常有用 https://reactarmory.com/guides/learn-nude-react/custom-react-elements - Hoàng Long
显示剩余2条评论
3个回答
16

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>

如果你仔细观察，例子1中的所有内容都是JavaScript，脚本中没有HTML，只有纯JavaScript。React和ReactDom被插入到我的窗口中，所以我可以全局访问它们。这很好用，我可以继续这样做，但是React引入了一种将HTML插入JavaScript（JSX）的方法，以便我们可以写更少的JavaScript（因为我们都是懒惰的开发者）。那么我们如何编写JSX呢？因为浏览器不理解JSX，它们只能理解JavaScript。

好的，我们将使用一个叫做独立库（babel standalone）的工具。它会将你在JSX和JavaScript中编写的所有代码转译（将所有代码转换为浏览器可读取的JavaScript），并将其转化为普通的JavaScript文件。在此过程开始之前，您需要让独立库知道您要转译哪些JavaScript文件，因此您需要像这样附加type="text/babel"：<script type="text/babel">....</script>。一旦DOM加载完成，独立库将转译您告诉它要转译的脚本，并将纯JavaScript插入到您的DOM中，然后您的JavaScript将运行。

是的，我说了... 1.首先将您的代码转译 2.然后将其加载到DOM中 3.然后我的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。

以下是一个使用插件在浏览器上运行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>

所有这些工具，如 babel、webpack，都有助于使您的应用程序准备好投入生产，但为了学习，首先最好不使用额外的工具来理解 react ，然后再慢慢开始扩展。

** 注意：所有示例仅供学习和原型制作之用，不适用于生产用途，如果您阅读完我的整个答案，您就会知道原因。

3

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

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

使用npm start命令启动。

虽然这样做可以工作，但如果您计划添加babel，我强烈建议您转向webpack（或任何其他构建工具，我个人认为webpack是最好的选择），因为webpack已经有一个开发服务器，会在开发期间为您提供静态文件（带有许多有用的功能，如热重载）。而且学习webpack并不难，官方文档对于初学者来说可能有些困难，我建议您先阅读这篇how-to。

确实。开发人员的工作就是不断学习新的开发工具。如果你不必每两周学习一个全新的构建工具，那么有人就没有做好他们的工作。哦，还有开发人员工作的另外10%是编写实际应用程序。 - HeadCode
-1
首先，在根目录下创建你的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'
    }
    ]
  }
};

接下来创建你的server.js文件，使用express来提供静态文件服务：

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

祝你好运 ;)

2
问题实际上是如何在没有webpack的情况下使用React，而不是如何配置webpack。 - Harald Gliebe
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接