安装 Babel 以与 React 和 JSX 一起使用

Posted 2023-02-22

【中文标题】安装 Babel 以与 React 和 JSX 一起使用

【英文标题】：Installing Babel to use with React and JSX

【发布时间】：2018-07-03 01:07:41

【问题描述】：

我是 React、Babel 和 JSX 的新手。我正在尝试弄清楚如何安装 Babel，以便它能够在浏览器中使用 React 和 JSX “做正确的事情”。

但是，Babel 的文档假定我已经了解整个 NPM/Node + 许多其他包管理器 + 框架生态系统，而我并不知道。

对于只想使用 Babel 为 React 应用程序编译 JSX 的人，是否有任何文档？我想学习如何在我的机器上（而不是在托管站点上）进行操作，但似乎那里的初学者文档为零。

这些部分的不同版本似乎也不再一起工作，所以我对我需要什么有点困惑。

到目前为止，我已经下载了 React 16.2，并使用 npm 安装了 Babel

npm install --save-dev babel-plugin-transform-react-jsx

并在我的 Babel 所在的文件夹中有一个 node_modules/ 文件夹（似乎是版本 6.24.1，不知道这是否适合 React 16.2），以及我想将我的 html 和 javascript 放在哪里。

但现在我被困住了。我不知道如何让 Babel 做我需要的事情。我只想编写一些带有 React + JSX 的 HTML，并让“正确的事情”发生，但找不到任何关于如何做到这一点的文档。

谢谢！

【问题讨论】：

如果你想“只用一些 React + JSX 编写一些 HTML 并让“正确的事情”发生”，请使用 create-react-app，它会完成 babel 和 webpack 的所有配置你。稍后当您想知道幕后发生的事情时，您可以弹出配置。这是使用 create-react-app 指向 What's Included? 的直接链接。

Setup React.js and Babel的可能重复

【参考方案1】：

正如 React 网站中指出的（关于使用脚本添加 JSX 功能）：

这种方法非常适合学习和创建简单的演示。但是，它会使您的网站变慢并且不适合生产。

因此它建议改用名为 Babel 的 JSX 预处理器（它的工作方式或多或少类似于 CSS 预处理器的工作方式，因此将 JSX 转换为 javascript）。

唯一的要求是安装 Node.js，这样您就可以下载 Babel 并将其作为 npm 添加到您的项目中。

在链接下方按照所有说明进行操作：

Add react to website

【参考方案2】：

这不是对您的确切问题的确切答案，但它可能会帮助一些最终来到这里的人。忘记 Babel，跳过额外的编译步骤和项目膨胀，然后：

使用类似React.createElement():

React.createElement('div', className="container", 
    [
        React.createElement('h1', key: "title", 'Greetings'),
        React.createElement('p',  key: "para", 'To the newcomer, ' + this.props.name + '!')
    ]
);

或者使用preact:

h(
    'div',
     id: 'foo' ,
    h('span', null, 'Hello!')
);

在任何一种情况下，都可以将元素嵌套到所需的任何深度。

【参考方案3】：

啊，我在 https://egghead.io/courses/the-beginner-s-guide-to-reactjs 的 React 初学者指南中找到了答案。

显然有一个独立的 Babel 编译器，你可以在文档的头部链接到它，以及指向 ReactJS 的链接，它“做正确的事”。耶！以下是我正在使用的链接：

<script src="https://unpkg.com/react@16.2.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.2.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

在包含 ReactJS 和 JSX 代码的 script 标签中，必须使用 type=text/babel:

<script type="text/babel">...</script>

我希望这可以帮助其他人开始使用 React 和 JSX。

我猜我最终需要学习如何使用 NPM、NPX、Node、Webpack 和 Babel（可能还有其他工具）来运行生产 ReactJS 代码，但现在我希望这能让我学习 ReactJS 而不必担心所有这些。

【讨论】：

您可能会觉得有用的是codesandbox.io。您编写代码并像热模块重新加载器一样实时更新，但无需进行任何设置。

嗨凯尔 - 谢谢！我已经尝试过这些，但想避免使用沙箱，这样我就可以（最终）弄清楚更多需要什么以及如何设置它。

【参考方案4】：

您应该以Create React App (CRA) 开始您的项目。

这是由 React 团队制作的 React 应用初始化程序。它为您完成所有设置（包括 Babel 和 Webpack 配置），并为您的开发环境添加一些非常好的功能。

---

如果您不想使用 CRA，则需要安装：

babel-core babel-preset-env babel-preset-react

然后在项目的根目录中创建一个文件.babelrc，其中包含：

 "presets": ["env", "react"] 

然后安装并配置Webpack 以运行 Babel 转换。

（或者您也可以使用 babel-cli 手动运行 Babel）。

---

React 文档略微解决了 Babel 设置问题 here。

他们还建议使用 CRA here。

【讨论】：

我试图弄清楚 create react 应用程序，但它确实需要 npm、npx、node、webpack 和 babel 的知识，以及如何配置所有内容。所以我暂时放弃了这条路......虽然我最终必须学会这一切......

很抱歉让您有这种感觉。要运行创建反应应用程序，您实际上只需要 Node（NPM 自带）。没有什么可配置的。但我可以理解，所有这些技术一开始都会让人感到不知所措，尤其是如果你只是想尝试 React。希望你能在你的项目中取得成功。祝你好运！ :)

谢谢！稍后，当我需要设置构建过程时，我肯定会回到 Create React App ……在我这样做之前，我会了解更多关于 Node 的知识 :-) 我只是希望这些工具有两个指南；一份给专家，一份给初学者，它们实际上解释了你为什么要做什么等等。当我不知道这一切意味着什么时，我不喜欢盲目地遵循说明...... :-)

顺便说一句，第一条指令是使用 npx。我以前没有听说过 npx（我有 npm），我花了一点时间才弄清楚它是什么以及如何安装它（而且我需要升级我的 Node 和 npm 安装才能做到这一点）。

老实说，我这周第一次听说npx，我也有点惊讶！似乎它最近已添加到节点中。但是您仍然可以使用npm 而不是npx。我不知道他们为什么在 Create React App 文档中将 npm 替换为 npx。我同意这有点令人困惑。