2

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

私はこのようにsthを試しました: 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。反応スターター ガイドは、概念をカバーしています。

公式の反応リポジトリですでに採用されている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 に params を追加して、使用するモジュール システムに ES2015 モジュールをコンパイルします。RequireJS を使用するため、コマンドは次のようになりますbabel src --out-dir build --modules amd。

于 2015-09-12T01:39:08.153 に答える