我开始研究ReactJS.Facebook似乎刚刚发布了15.0.1版本.我在去年使用JSXTransformer期间在0.12.x版本期间查看了这个框架,现在它似乎已经远离了它.
现在似乎几乎每个教程都建议使用最新的React和Webpack.有没有办法不使用webpack？我正试图找到一个有效的例子,其中包含React 15.xx的grunt任务
任何帮助,将不胜感激.
最简单的方法：
<!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进行极简反应设置。
如果您不想使用webpack，则必须考虑可以使用哪些功能。
随着浏览器对ES6功能的支持的提高，您现在可以拥有ES6语法，并且还可以使用模块（在激活实验性标志时）而无需使用Webpack。
如果要使用JSX，则始终需要将其转换为JS，因为地平线上的浏览器没有对它的本机支持。最简单的方法是将带有“ React”预设的Babel中间件添加到开发服务器。
依赖关系管理也将变得复杂，因为npm在CommonJS中提供了程序包，这些程序包无法在浏览器中正常运行...
如果您想尝试一下，可以查看我放在GitHub React Without Webpack上的实验React入门工具包，该工具试图使用本机浏览器功能和http2复制大多数webpack功能。
您只需包含独立版本的babel，就像文档中所解释的那样：https ://reactjs.org/docs/add-react-to-a-website.html#optical-try-react-with-jsx
\n\n\n快速尝试 JSX
\n\n在项目中尝试 JSX 的最快方法是将此标签添加到您的页面中：
\n\n现在\n你可以通过在任何标签中添加 type="text/babel"\n 属性来使用 JSX。下面是一个包含 JSX 的 HTML 文件示例，您可以下载并使用。
\n\n这种方法非常适合学习和创建简单的演示。但是，它会使您的网站变慢并且不适合生产。当您\n\xe2\x80\x99 准备好继续前进时，请删除这个新标签和您\n\xe2\x80\x99 添加的\n type="text/babel" 属性。相反，在下一节中，您将设置一个 JSX 预处理器来自动转换所有标记。
\n
这是一个例子：
\n\n索引.html
\n\n\n\n<body>\n\n <div id="root"></div>\n\n <script src="https://unpkg.com/react@16/umd/react.development.js"></script>\n <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>\n <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>\n\n <script type="text/babel">\n\n function Hello(props) {\n const [name, setName] = React.useState(props.name);\n return (\n <h1 onClick = {() => setName(Math.random().toString(36).substring(5))}>\n Hello {name}\n </h1>\n );\n }\n\n ReactDOM.render(\n <Hello name=\'World\'/>,\n document.getElementById(\'root\'),\n );\n\n </script>\n\n</body> \n不使用 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"]
}
| 归档时间： |
|
| 查看次数： |
9231 次 |
| 最近记录： |