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

Question

我是 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，并让“正确的事情”发生，但找不到任何关于如何做到这一点的文档。

谢谢！

Answer 1

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

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

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

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

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

Add react to website

Answer 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!')
);

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

Answer 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 而不必担心所有这些。

Answer 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。