## はじめに
React Ifameを使って、HTMLを表示するURLを表示する方法を書いていきます。

## 参考
こちらがドキュメントになります。
https://www.npmjs.com/package/react-iframe

## React Iframeをインストール
まずは、以下のコマンドでReact Iframeをインストールしていきます。
![img](/mosaic-code.jpg)
packege.jsonを確認します。
![img](/mosaic-code.jpg)

## コードに適用する
React Ifameを使用するには、以下のようなコードにします。
今回は、News APIで取得できるURLを使用します。

![img](/mosaic-code.jpg)

すると、、、
![スクリーンショット 2023-10-09 17.40.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/f7650441-9321-92fc-8fe9-06b0ea80cf26.png)
このように、表示できるようになりました！

## 最後に

他にも色々な記事を書いているので、よければ読んでいってください、、、
[基本設計について](https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc)
[Vue.jsとNode.jsでチャットアプリを作った](https://qiita.com/hukuryo/items/265c676d17fe21e75242)
[Next.js×TypeScriptでTODOアプリを作成する](https://qiita.com/hukuryo/items/ebeb26823f944f143b11)
[cv:issue_marketplace_engineer]

## はじめに
React Ifameを使って、HTMLを表示するURLを表示する方法を書いていきます。

## 参考
こちらがドキュメントになります。
https://www.npmjs.com/package/react-iframe

## React Iframeをインストール
まずは、以下のコマンドでReact Iframeをインストールしていきます。
```: ターミナル
npm install react-iframe
```
packege.jsonを確認します。
```:packege.json
"dependencies": {
    "react-iframe": "^1.8.5",
  },
```

## コードに適用する
React Ifameを使用するには、以下のようなコードにします。
今回は、News APIで取得できるURLを使用します。

```
import Iframe from "react-iframe";

<Iframe 
 url={"https://www3.nhk.or.jp/news/html/20231007/k10014218571000.html"} 
 width="100%"
 height="1000px"
/>
```

すると、、、
![スクリーンショット 2023-10-09 17.40.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/f7650441-9321-92fc-8fe9-06b0ea80cf26.png)
このように、表示できるようになりました！

## 最後に

他にも色々な記事を書いているので、よければ読んでいってください、、、
[基本設計について](https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc)
[Vue.jsとNode.jsでチャットアプリを作った](https://qiita.com/hukuryo/items/265c676d17fe21e75242)
[Next.js×TypeScriptでTODOアプリを作成する](https://qiita.com/hukuryo/items/ebeb26823f944f143b11)


はじめに

参考

React Iframeをインストール

続きを読むには単価診断を受けてください（30秒）