我开始研究 ReactJS。看来 Facebook 刚刚发布了 15.0.1 版本。去年我研究了这个框架，在 0.12.x 版本期间，当时它使用 JSXTransformer，现在它似乎不再使用它了。
现在似乎几乎每个教程都建议使用最新的 React 和 Webpack。有没有办法根本不使用 webpack？我正在尝试为 React 15.xx 找到一个带有 grunt 任务的有效示例
任何帮助，将不胜感激。
没有 Webpack 的 React
IT技术
reactjs
gruntjs
2021-04-11 02:29:02
6个回答
最简单的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
class Hello extends React.Component{
render() {
return <p>Hello {this.props.name}</p>;
};
}
ReactDOM.render(
<Hello name='World'/>,
document.getElementById('root'),
);
</script>
</body>
</html>
Jsx 转换器似乎已被弃用。
2019 年 4 月 8 日更新：使用https://github.com/developit/htm进行极简react设置。
如果您不想使用 webpack，则必须考虑可以没有哪些功能。
随着浏览器对 ES6 功能支持的进步，您现在可以拥有 ES6 语法并使用module（在激活实验标志时），而无需使用 Webpack。
如果你想使用 JSX，你总是需要将它转译为 JS，因为在即将出现的浏览器中没有对它的原生支持。最简单的方法是将带有“React”预设的 Babel 中间件添加到您的开发服务器。
依赖管理也会变得复杂，因为 npm 在 CommonJS 中提供了包，不能在浏览器中运行......
如果您想对此进行试验，可以查看我放在 GitHub React上的实验性 React 入门套件，该套件尝试使用本机浏览器功能和 http2 来复制大多数 Webpack 功能。
不使用 webpack 的最简单方法是使用 babel。
目前我能想到的最小设置是使用babel-cli和babel-preset-react包。
如果你设置了package.json文件，你只需要输入：
npm install babel-cli babel-preset-env --save-dev
那么你需要一个至少包含以下内容的.babelrc文件：{"presets": ["react"]}.
例如，如果您的 javascript 源代码在js文件夹中，您可以通过将脚本字段添加到package.json来将它们编译到lib文件夹，如下所示：
"scripts": {
"build": "babel js --out-dir lib"
},
因此，运行npm run build会将您的 javascript 文件编译到lib文件夹中。
然后你只需要在你的 html 中链接编译后的文件，就像这样：
<script src="lib/script.js"></script>
使用 react 的最小代码是：
const HelloWorld = function HelloWorld(props, context) {
return <p>Hello <strong>React</strong>!</p>;
};
ReactDOM.render(
<HelloWorld />,
document.getElementById('root'),
);
请注意，使用这种方法您不会将 es6 转换为 es5，因此如果您想支持旧浏览器，您仍然需要添加babel-preset-env包，并像这样修改.babelrc文件
{
"presets": ["env", "react"]
}
您只需要包含 的独立版本babel，就像在文档中解释的那样：https : //reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx
快速尝试 JSX
在您的项目中尝试 JSX 的最快方法是将此标记添加到您的页面：
现在你可以通过添加 type="text/babel" 属性在任何标签中使用 JSX。这是一个带有 JSX 的示例 HTML 文件，您可以下载并使用它。
这种方法非常适合学习和创建简单的演示。但是，它会使您的网站变慢并且不适合生产。当你准备好继续前进时，删除这个新标签和你添加的 type="text/babel" 属性。相反，在下一节中，您将设置一个 JSX 预处理器来自动转换所有标签。
下面是一个例子：
索引.html
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Hello(props) {
const [name, setName] = React.useState(props.name);
return (
<h1 onClick = {() => setName(Math.random().toString(36).substring(5))}>
Hello {name}
</h1>
);
}
ReactDOM.render(
<Hello name='World'/>,
document.getElementById('root'),
);
</script>
</body>
您不需要 Webpack 或 grunt，您需要使用 Babel https://reactjs.org/docs/getting-started.html#offline-transform而不是 JSXTransformer