安装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做我需要的事情.我想只是写一些HTML一些阵营+ JSX在里面,并有"正确的事"发生,但无法找到任何文件对如何做到这一点.

谢谢!

Answer 1

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

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

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

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

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

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

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

React 文档在这里稍微解决了 Babel 设置问题。