ReactをjQueryみたいにローカルにインストールせずに使う方法
ReactをCDNを利用して npm
でインストールせずに使う方法です。
HTMLファイルへの記述
HTMLファイルの</body>
タグの前にて以下のスクリプトを読み込む。
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> <script src="js/app.js" type="text/babel"></script>
最後の行は自作のスクリプトを読み込んでいる。その際、type="text/babel"
となっている点に注意。ReactはJSXでの記述となるので、type="text/javascript"
と書いてもコードが解釈されない。
以上の設定でReactが使えるようになる。
スクリプトの書き方
実際にReactでコードを書いていく。
まずはHTMLファイルにReactが操作するdiv
を作る。
<body> <div id="app"></div> </body>
この例ではapp
の中にReactが作ったDOMが挿入される。
今回の自作のスクリプトはapp.js
という外部ファイルに書く。
class App extends React.Component { constructor(props) { super(props); this.state = { text: 'Hello World!' } } render() { return ( <div> <p> { this.state.text } </p> </div> ) } } ReactDOM.render( <App />, document.getElementById('app') //htmlの<div id="app"></div>をターゲットに設定している。 );
このように通常のReactと同じように書けば動く。最後の行でHTMLの中の<div id="app"></div>
を取得して、その中にReactが作成したDOMを挿入している。
以上でまるでjQueryを使うときみたいに、ローカルにインストールすることなくReactを使用することが出来た。 これで普段自分で使う業務アプリとかも気軽にHTML一枚で作れたり出来ちゃう。