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

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

谢谢！

解决方法

你应该用 Create React App(CRA)开始你的项目.

这是React团队制作的React app初始化程序.它为您完成所有设置(包括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.