ReactのJSファイルをCDNを使って読み込み、さらにReactを使って外部のJSONをAjaxで取得し、ブラウザ画面に表示させるJavaScriptのサンプルを作成しました。

サンプルのコード

JavaScriptの準備。CDNを使ってReact本体を呼び出します。

<script src="https://unpkg.com/react@16.14.0/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16.14.0/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

コンテナの準備。HTMLの任意の場所にReactを描写させるDOM要素を準備しておきます。

<div id="app"></div>

今回使うJSONファイルです。例としてno、name、weaponの値を持っているものとします。

{
"Party": [
  { "no": 1,"name": "マリオ", "weapon": "ひまんパタこうら" },
  { "no": 2,"name": "マロ", "weapon": "ソニックシンバル" },
  { "no": 3,"name": "ジーノ", "weapon": "スターガン" },
  { "no": 4,"name": "クッパ", "weapon": "ドリルクロー" },
  { "no": 5,"name": "ピーチ姫", "weapon": "フライパン" }
 ] 
}

以下は実行コードになります。PARTYというReactコンポーネントを作成し、ajaxで外部のJSONファイルにアクセス。名前（name）と武器名（weapon）を取得してJSXでブラウザ画面上に描写させます。

class PARTY extends React.Component {
 constructor(props) {
  super(props);
  this.state ={
   status: null,
   party: []
  }
 }
 componentDidMount(){
  //JSONのファイル名
  fetch("party.json")
  .then(res => res.json())
  .then(
    (data) => {
     this.setState({
     status: 'success',
     party: data.Party
    });
   },
   (error) => {
    this.setState({
     status: 'error'
    });
   }
  )
 }
 render() {
  if (this.state.status === 'success') {
   let partys = this.state.party.map((party) => { return <li key={party.no}>名前：{party.name}　武器：{party.weapon}</li>});
   return <ul>{partys}</ul>
  }else if(this.state.status === 'error') {
   return <p>エラーです</p>
  }else{
   return <p>読み込み中</p>
  }
 }
}
ReactDOM.render(<PARTY />,document.getElementById('app'));

JSXとは、Reactでよく使われる仕組みでJavaScriptのコードの中にXMLのようなマークアップのコードを記述するものです。

実行結果

名前と武器がリストで表示されます。

<ul>
<li>名前：マリオ　武器：ひまんパタこうら</li>
<li>名前：マロ　武器：ソニックシンバル</li>
<li>名前：ジーノ　武器：スターガン</li>
<li>名前：クッパ　武器：ドリルクロー</li>
<li>名前：ピーチ姫　武器：フライパン</li>
</ul>

「フィクションです。じっさいの人物には、いっさい関係ありません。」以上。

おしまい♥

タグ：React