设置 react-bootstrap 简单应用答案

【问题标题】：Setting up react-bootstrap simple app设置 react-bootstrap 简单应用
【发布时间】：2015-06-18 17:35:18
【问题描述】：

我正在使用 react-bootstrap + requirejs + bower + php（不是 nodejs）设置一个入门应用程序。这一系列工具非常新。所以这是我的应用程序：

.bowerrc

{
  "directory": "javascript/components/",
  "analytics": false,
  "timeout": 120000
}

bower.json

{
  "name": "hello-react-bootstrap",
  "version": "1.0.0",
  "dependencies": {
    "requirejs": "*",
    "react": "~0.13.1",
    "react-bootstrap": "~0.20.0"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Hello World</title>

<!-- Bootstrap Core CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>

    <!-- Require Js -->
    <script data-main="javascript/setup.js" src="javascript/components/requirejs/require.js"></script>

</body>
</html>

javascript/setup.js

requirejs.config({
    baseUrl: "javascript/components",
    paths: {
        "app": "../app",
        'classnames':'classnames/index',
        'jquery': 'https://code.jquery.com/jquery-2.1.3.min',
        'react':'react/react',
        'react-bootstrap':'react-bootstrap/react-bootstrap'
    }
});

require.config({
    urlArgs: "bust=" + (new Date()).getTime()
})

requirejs(["app/main"]);

javascript/app/main.js

//empty for now

应用结构

── bower.json
├── index.html
├── javascript
│   ├── app
│   │   └── main.js
│   ├── components
│   │   ├── classnames
│   │   ├── react
│   │   ├── react-bootstrap
│   │   └── requirejs
│   └── setup.js
└── styles

我尝试过这样的事情： app/main.js

define(['react-bootstrap'], function(ReactBootstrap){
    var React = require('react');
    var Button= ReactBootstrap.Button;
    React.render(Button,document.body)
});

这给了我： Error: Invariant Violation: React.render(): Invalid component element. Instead of passing a component class, make sure to instantiate it by passing it to React.createElement.

编辑忽略我的问题，以下对我有用：

app/main.js

define(['react-bootstrap'], function(ReactBootstrap){
    var React = require('react');  
    React.render(React.createElement(ReactBootstrap.Button,{bsStyle:'info'},'Hello World' ), document.body)
});

【问题讨论】：

您需要使用 JSX 语法或正确的元素创建语法。 React.render(<Button />, document.body) 或 React.render(React.createElement(Button, null), document.body);
如果您的问题不再相关，您可以删除它。
@WiredPrairie，谢谢，但您的解决方案似乎需要 jsx 模块 https://github.com/philix/jsx-requirejs-plugin 对吗？
你要么需要预编译你的 JSX 文件，使用 require 的插件，要么直接手动编码到 React 的 API。我个人使用 Babel，它有一种合理的方式可以集成到许多构建管道中。
@WiredPrairie，您介意按照您对上述示例的建议编写进一步的步骤来整合 JSX 和 Babel 吗？谢谢

标签： javascript requirejs reactjs bower react-bootstrap

【解决方案1】：

如果你想在你的 main.js 中使用 JSX 语法，你必须编译它。否则，您只能使用 React API 来创建您的元素，例如 React.createElement。 react starter guide 涵盖了这个概念。

我建议你可以使用Babel 已经在official react repository 中采用的@ 来转换你的代码。将 babel 安装为 CLI：npm install -g babel。假设你把你所有的 js 放在app/ 文件夹中，然后执行babel app --out-dir build。意思是你扫描app文件夹下的所有js文件，并将它们转换成build/文件夹。

然后，修改javascript/setup.js 中的入口点路径。将requirejs(["app/main"]); 更改为requirejs(["build/main"]);。它包括转换后的 js 文件。

如果你想应用 ES2015 (a.k.a ES6) 来编写更好的 js，只需在 babel CLI 中添加参数即可将 ES2015 模块编译到你使用的模块系统中。您使用 RequireJS，因此命令将是：babel src --out-dir build --modules amd。

【讨论】：