React で Web アプリケーションを実装し、HTML の FILE API で指定されたファイルを IPFS にアップロードする機能を実現します。

> mkdir IPFS
> cd IPFS
IPFS> npx create-react-app ipfs-web --template typescript
IPFS> cd .\ipfs-web\
IPFS\ipfs-web> npm install --save ipfs-core ipfs-core-types util

「ipfs-core」は JavaScript で IPFS を操作するためのライブラリ js-ipfs の一部です。

• js-ipfs-examples

IPFS にファイルをアップロードする機能を提供する IPFSUploader.tsx コンポーネントを実装します。

IPFS\ipfs-web> mkdir src\components
IPFS\ipfs-web> code src\components\IPFSUploader.tsx

IPFS\ipfs-web> code src\App.tsx

import React from 'react';
import './App.css';
import IPFSUploader from './components/IPFSUploader';
 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <IPFSUploader/>
      </header>
    </div>
  );
}
 
export default App;

IPFS\ipfs-web> npm start