Question

我正在努力学习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来提供这个基本的Hello World代码，例如localhost：8080？我的下一步是添加Babel以便我可以使用JSX，但我不想跳到那一步，直到我更好地理解服务器设置。

Answer 1

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>

这里是一个示例1，其中仅包含纯JavaScript和React：

<!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并且仅了解javascript，我们如何编写JSX？好吧，我们将使用一个称为独立库（babel standalone）的工具。它将把您在JSX和javascript中编写的所有代码转换（转换为浏览器可读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>

现在插入的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之类的所有这些工具有助于使您的应用程序准备好投入生产，但要进行学习，首先需要理解反应而无需额外的工具，然后慢慢开始扩展。

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

Answer 2

最简单的方法是使用像node-static（npm install node-static --save-dev）这样的库，并将其添加为start

中的package.json脚本

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

使用npm start命令启动它。

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

Answer 3

首先在根文件夹中创建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

祝你好运;）

没有babel或webpack的ReactJS Hello World

3 个答案: