没有 Webpack 的反应答案

【问题标题】：React without Webpack没有 Webpack 的反应
【发布时间】：2016-08-05 05:29:09
【问题描述】：

我开始研究 ReactJS。看来 Facebook 刚刚发布了 15.0.1 版本。去年我在 0.12.x 版本中研究过这个框架，当时它使用的是 JSXTransformer，现在它似乎不再使用它了。

现在似乎几乎每个教程都建议使用最新的 React 和 Webpack。有没有办法根本不使用 webpack？我正在尝试为 React 15.x.x 的 grunt 任务找到一个很好的有效示例。

任何帮助将不胜感激。

【问题讨论】：

你不需要 webpack。你甚至不需要 JSX，你可以写 React.createElement 如果你想。如果你想要 JSX，你需要 Babel，它可以与 grunt 一起工作。这就是你所需要的。
请收下：jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack
@nbrogi 好吧，对于“如何在没有 Webpack 的情况下使用 React？”这个问题，这将是一个非常糟糕的答案。说“只需使用 webpack。”
@azium：因为解决方案比它试图解决的问题更痛苦，所以这不是一个愚蠢的答案。无论如何，您可以使用 Babel、Gulp 或其他任何东西，但无法回避 React 需要转译的事实。

标签： reactjs gruntjs

【解决方案1】：

最简单的方法：

<!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>

【讨论】：

有没有办法将脚本标签内的反应代码移动到外部文件中，这样它就不会全部在一个html文件中？
@TomaszS 使用代码创建一个新文件，然后像这样引用：<script type="text/babel" src="your_react_file.js"></script>
关于如何解决这个问题的任何想法？ SyntaxError: unknown: Support for the experimental syntax 'classProperties' isn't currently enabled... Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation. 在类中使用函数时？

【解决方案2】：

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 功能。

【讨论】：

Snowpack 看起来它将采用 npm 包并通过 ESM 导入使其可用。

【解决方案3】：

不使用 webpack 的最简单方法是使用 babel。

目前我能想到的最简单的设置是使用 babel-cli 和 babel-preset-react 包。

如果您设置了 package.json 文件，您只需键入：

npm install babel-cli babel-preset-env --save-dev

那么你需要一个.babelrc文件，至少有以下内容：{"presets": ["react"]}.

例如，如果您的 javascript 源代码位于 js 文件夹中，您可以通过添加 scripts 字段将它们编译到 lib 文件夹中你的 package.json 像这样：

"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"]
}

【讨论】：

如果您使用 import 语句，这将不起作用，因为它将被转换为需要使用打包工具（如 webpack 或 Parcel 或 rollup）打包的 require 语句。

【解决方案4】：

您只需要包含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 预处理器来转换你所有的自动标记。

这是一个例子：

index.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>

【讨论】：

【解决方案5】：

你不需要 Webpack 或 grunt，而不是 JSXTransformer 你需要使用 Babel https://reactjs.org/docs/getting-started.html#offline-transform

【讨论】：

【解决方案6】：

你必须从 CDN 安装 react 和 reactDom 和 babel，如果你需要另一个库，比如 axios，你必须使用 script 标签导入它

下面的代码获取数据并用 h1 标签显示

<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 src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>

    <script type="text/babel">
      function ShowPost(props) {
        const [post, setPost] = React.useState("");

        React.useEffect(()=>{
          
          const fetchData= async ()=>{
            const data = await axios.get(
              `https://jsonplaceholder.typicode.com/posts/${props.postId}`
            );
            setPost(data.data.body);
          }

          fetchData()

        },[])


        return <h1>{post}</h1>;
      }

      ReactDOM.render(<ShowPost postId={1} />, document.getElementById("root"));
    </script>
  </body>
</html>

【讨论】：