3

反応を調査し始めたばかりで、bower にインストールされている場合にreact-bootstrapを使用する方法を理解しようとしましたが、開始部分に従いましたが、どのように機能するかがよくわかりません。

ここにマークアップがあります

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Bootstrap 101 Template</title>

        <!-- Bootstrap -->
        <link href="styles/main.css" rel="stylesheet">
        <script src="vendor/react/react.js"></script>
        <script src="vendor/react-bootstrap/react-bootstrap.js"></script> 
        <script src="vendor/react/JSXTransformer.js"></script>

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>


         <script>
            var Alert = ReactBootstrap.Alert;
            console.log(Alert)
        </script>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      </body>
    </html>

このパッケージでブートストラップ コンポーネントを生成するにはどうすればよいですか?

アップデート

わかったと思いますが、正しく使用しているかどうかわからないので、マークアップで

 <script>
        var Alert = ReactBootstrap.Alert;
 </script>

 <script src="components/Alert.js"></script>

Alert.jsコンパイルされたjsxです

const alertInstance = (
  <Alert bsStyle='warning'>
    <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
  </Alert>
);

React.render(alertInstance, document.body);
4

1 に答える 1