여기의 React와 AssemblyScript의 환경 작성이 간단하고 훌륭했기 때문에, 스스로도 시험해 투고했습니다. m(_ _)m

Adding a WebAssembly component to a React App

AssemblyScript에 대해 자세히 알아보기

The AssemblyScript Book

직접 시도한 코드는 여기입니다.

htps : // 기주 b. 코 m / 오쿠무라 켄고 / 레아 ct-Ase mblysc 리 pt-sa mp ぇ

create-react-app로 프로젝트 만들기

# reactのプロジェクト作成
yarn create react-app webassembly-in-react

cd webassembly-in-react/
# VSCodeを使っている場合はこれでVSCodeを開き直せる
# code -r webassembly-in-react/ 

# AssemblyScriptを追加する
yarn add -D AssemblyScript/assemblyscript

# AssemblyScriptの例となるtsファイルの追加、package.jsonにscriptの追加 を自動でやってくれる
yarn asinit .

package.json

package.json script를 다시 작성하여 AssemblyScript를 빌드하고 react를 빌드하도록 변경합니다.

package.json

  "scripts": {
    "jsstart": "react-scripts start",
    "jsbuild": "react-scripts build",
    "asbuild": "asc assembly/index.ts -b public/as-api.wasm",
    "start": "npm run asbuild && npm run jsstart",
    "build": "npm run asbuild && npm run jsbuild"
  },

package.json 전체

package.json

{
  "name": "webassembly-in-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "jsstart": "react-scripts start",
    "jsbuild": "react-scripts build",
    "asbuild": "asc assembly/index.ts -b public/as-api.wasm",
    "start": "npm run asbuild && npm run jsstart",
    "build": "npm run asbuild && npm run jsbuild"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "assemblyscript": "AssemblyScript/assemblyscript"
  }
}

assembly/index.ts

yarn asinit . 에서 자동 생성된 assembly/index.ts 에 script를 추가합니다.

※TypeScript가 아닌 AssemblyScript로 작성되었습니다.

assembly/index.ts

export function factorial(value: f64): f64 {
  if (value == 0 || value == 1) return 1;
  return value * factorial(value - 1);
}

src/와-아피. js

↑의 AssemblyScript를로드하는 로더 만들기

src/wa-api.js

import {instantiateStreaming} from "assemblyscript/lib/loader";
export default instantiateStreaming(
    fetch('./as-api.wasm')
);

src/App.js

React에서 AssemblyScript를 실행하도록 변경

src/App.js

import React, { useState } from 'react';
import waApi from './wa-api';

function App() {
  const [value, setValue] = useState(5);
  const [result, setResult] = useState();

  return (
    <div className="App">
      <p>
        The factorial of
        <input value={value} onChange={evt => setValue(evt.target.value)} />
        is {result}
      </p>
      <button onClick={async () => setResult((await waApi).factorial(value))}>
        Calculate
      </button>
    </div>
  );
}

export default App;

이 상태로 빌드합니다.

yarn start

React에서 AssemblyScript를 실행할 수 있었던 훌륭한 튜토리얼이었습니다.

읽어 주셔서 감사합니다. m(_ _)m