Question

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

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

对于那些只想使用Babel为React应用程序编译JSX的人，是否有任何文档？我想学习如何在我的机器上（不是在托管网站上）这样做，但它似乎没有初学者文档。

似乎这些作品的各种版本不再一起工作，所以我对我需要的东西感到有点困惑。

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

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

Answer 2

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

显然，有一个独立的Babel编译器，您只需链接到文档的头部，以及指向ReactJS的链接，它就会做出正确的事情＆＃34;。好极了！以下是我使用的链接：

<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 3

这不是对您的确切问题的确切答案，但可能会帮助到此为止的某些人。忘记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!')
);

无论哪种情况，都将元素嵌套到所需的任何深度。

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

3 个答案: