html+javascript(react)の使用方法について

html+javascript(react)の使用方法について教えて頂けますでしょうか？

①
script = html内で指定したファイル内の処理を読み込む
require & import = javascript内で指定したファイル内の処理を読み込む
という認識なのですがあっていますでしょうか？

②
reactを使用する際、
「npm install --save react-modal」でインストール後、
javascript内で「var Modal = require('react-modal');」と宣言して
Modalを使用するようですが、html内で、

③
以下にサンプルプログラムを用意しました。
<button onClick={this.modal.bind(this)}>Click!</button>
を押した際に、Modal（ダイアログ）を表示させたいのですが、方法がわからず困っております。アドバイス頂けないでしょうか？

html
1<!DOCTYPE html>
2<html>
3	<head>
4	 
5	  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
6	  <script src="https://npmcdn.com/react@15.3.0/dist/react.min.js"></script>
7	  <script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js"></script>
8	  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
9	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
10	  <script src = "https://cdn.bootcss.com/react-modal/1.6.5/react-modal.min.js"></script>  
11	  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
12	  <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.6.2/remarkable.min.js"></script>
13	  <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
14	  <script src="src/script.js" type="text/babel"></script>
15	 
16	</head>
17
18	<body class="hold-transition skin-blue-light sidebar-mini">
19		<div class="wrapper"></div>
20		<div id="content"></div>
21		<div class="content"></div>
22	</body>
23</html>
24

javascript
1
2
3/* メモ
4getInitialState() ・・・ 初期値を定めます。コンポーネントがマウントされる直前に実行され、戻り値はthis.stateの初期値として使用されます。
5
6componentDidMount() ・・・ クライアント上(サーバー上は除く)でのみ、初期描画(rendering)が発生した直後に一度実行されます。
7					    AJAXのリクエストの送信などの操作をこのメソッド内で行って下さい。
8
9setState() ・・・ 基本的にはgetIntialStateでstateの初期値を返して、データに変更があった場合にthis.setStateで更新します。
10			
11bind() ・・・ 呼び出された時に新しい関数を生成します。最初の引数 thisArg は新しい関数の this キーワードにセットされます。2個目以降の引数は、新しい関数より前に、ターゲット関数の引数として与えられます。
12
13this.props.data.map() ・・・ map()メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。
14*/
15
16var CommentBox = React.createClass({
17	getInitialState: function() {
18		return {data: []};
19	},
20	componentDidMount: function() {
21		$.ajax({
22			url: this.props.url,
23			dataType: 'json',
24			cache: false,
25			success: function(data) {
26				alert("jsonアクセス成功");
27				console.log(data);
28				this.setState({data: data});
29			}.bind(this),
30			error: function(xhr, status, error) {
31				alert("jsonアクセス失敗");
32				console.error(this.props.url, status, error.toString());
33			}.bind(this)
34		});
35	},
36	render: function() {
37		return (
38			<div className="commentBox">
39				<CommentList data={this.state.data} />
40			</div>
41		);
42	}
43});
44
45var CommentList = React.createClass({
46	modal: function() {	
47		console.log("Modal(ダイアログ)表示");
48		return(
49			<Modal>modal contents</Modal>
50	    )
51	},
52	render: function() {
53		var commentNodes = this.props.data.map(function(comment) {
54			console.log(comment);
55			return (
56				<tr key={comment.id}>
57                    <td>{comment.test_no}</td>
58                    <td>{comment.test_name}</td>
59					<td>		
60						<button onClick={this.modal.bind(this)}>Click!</button>			
61						
62						<button className="btn btn-primary btn-sm" data-toggle="modal" data-target="#modal-example">
63							<i className="glyphicon glyphicon-edit" />
64                        </button>
65							
66					    <button className="btn btn-danger btn-sm">
67							<i className="glyphicon glyphicon-trash" />
68                        </button>
69					</td>
70                </tr>
71			);
72		}.bind(this));
73		return (
74			<table className="table table-striped">
75                <thead>
76                    <th>No.</th>
77					<th>名前</th>
78					<th>編集</th>
79                </thead>
80                <tbody>
81                    {commentNodes}
82                </tbody>
83            </table>
84		);
85	}
86});
87
88ReactDOM.render(
89	<CommentBox url="php/show.php" />,
90	document.getElementById('content')
91);
92