没有 babel 或 webpack 的 ReactJS Hello World
Posted
技术标签:
【中文标题】没有 babel 或 webpack 的 ReactJS Hello World【英文标题】：ReactJS Hello World without babel or webpack 【发布时间】：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 ***.com/a/4720770/5992765 用节点加载你的 index.html
【参考方案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% 的开发人员工作是编写实际的应用程序。以上是关于没有 babel 或 webpack 的 ReactJS Hello World的主要内容，如果未能解决你的问题，请参考以下文章
React Native - 为啥我需要 babel 或 webpack？
如何在具有单独模块的旧 php 站点中使用 Babel 或 webpack
JavaScript系列文章：React总结之Webpack模块组织
Webpack 热模块替换不适用于 babel-loader 和预设 es2015