No Pain, No Gain

プログラミングで日常をちょっとだけ楽にしよう。

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一枚で作れたり出来ちゃう。