2

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

.bowerrc

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

鲍尔.json

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

索引.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.

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

应用程序/main.js

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

1 回答 1

0

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

我建议你可以使用官方 react 仓库中已经采用的Babel来转换你的代码。将 babel 安装为 CLI ：. 假设您将所有 js 放在文件夹中，然后执行. 这意味着您扫描文件夹下的所有js文件并将它们转换为文件夹。npm install -g babelapp/babel app --out-dir buildappbuild/

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

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

于 2015-09-12T01:39:08.153 回答