javascript - 安装 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

我的文件夹中有一个 node_modules/文件夹，Babel 所在的文件夹(似乎是版本 6.24.1，不知道这是否适合 React 16.2)，以及我想放置 HTML 和 JavaScript 的位置。

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

谢谢!

Answer 1

您应该使用 Create React App 开始您的项目(加拿大税务局)。

这是 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 .